Uso de Chart Helper
Iniciaremos WebMatrix e selecionaremos criar um novo projeto baseando-nos em um layout (Template).
Dentro dos layouts disponíveis escolheremos Site vazio (Inglês), lhe daremos o nome de MercadoDoAutomovel-XML (optamos por retirar o acento) e clicaremos sobre o botão OK.
Inicialmente nos encontraremos na visão de Site. Clicamos sobre Databases e passamos a visualizar o painel de Databases.
Para estabelecer uma conexão com uma base de dados, na visão Databases e selecionado o nome de nosso projeto na área da esquerda, podemos começar de duas formas:
- Clicar com o botão direito do mouse sobre Other Connections e selecionando New.
- Clicando na ficha Home, se não estiver já selecionada e posteriormente no botão New Connection.
Se abrirá a caixa de diálogo Connect to Database, como se aprecia na figura anexa.
Deveremos escolher, no nosso caso, dado que utilizaremos a base de dados SQL Server migrada no nosso primeiro exemplo de criação de bases de dados (Vendas-2010-01-06.sdf):
- Como Name, o nome da conexão, não de a base de dados, algo que nos seja significativo, por exemplo, Vendas2010-1.
- Em Database Type deixamos selecionado SQL Server 2005/2008.
- Escreveremos o Server com o que estejamos trabalhando. Será o nome do servidor no que tenhamos migrado a base de dados; por exemplo morseSQLServer, morseSQLExpress, … (consulte o administrador em cada caso)
- Em Database escreveremos o nome da base de dados migrada ( ou de qualquer outra instalada, com a que queiramos trabalhar), no nosso exemplo Vendas-2010-01-06.sdf.
- Não esquecer de marcar o espaço Add to web config, do contrario, o sistema não encontrará a referencia da conexão realizada. Com isso se criará, se não houver, um arquivo web.config na raiz de nosso diretório do projeto. Ele conterá, entre outras possíveis coisas, a cadeia de conexão pertinente.
- Finalizaremos clicando sobre o botão OK.
Assim aparentará a árvore de bases de dados de nosso projeto, muito similar a se tivéssemos criado uma base de dados ou se a tivéssemos incluído no projeto na pasta App_Data, porém, diferentemente desses outros casos, a base de dados não está fisicamente em nosso projeto, é o servidor que nos dará acesso a ela e daí obteremos os dados para trabalhar.
Agora cliquemos sobre Files e passemos a visualizar o painel de Files.
Na vista Files clicamos com o botão direito do mouse sobre o nome de nosso projeto e selecionamos New File…
Se abrirá a janela Choose a File Type e selecionamos CSHTML, damos o nome VendasChart.cshtml e pressionamos sobre o botão OK.
Aparecerá a referencia de VendasChart.cshtml na árvore de referencias de nosso projeto (se não o virmos, clicar com o botão direito do mouse sobre o nome de nosso projeto e selecionar Refresh).
Para usar a base de dados em um Chart, clicamos duas vezes sobre el nome do arquivo VendasGraph.cshtml, passar a modo edição no painel da direita, selecionemos todo seu conteúdo e o substituímos, simplesmente, pelo seguinte código:
@{
var db = Database.Open(“vendas2010-1”);
var data = db.Query(“SELECT Marca, Vendas FROM Primeiro_Semestre”);
var myChart = new Chart(width: 600, height: 400)
.AddTitle(“Vendas”)
.DataBindTable(dataSource: data, xField: “Marca”)
.Write();
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
</body>
</html>
Se fizemos o exercício de trabalho com uma base de dados SQL, no que criávamos um DataGrid, veremos que as duas primeiras linhas de código Razor são exatamente as mesmas.
Se trata de abrir e carregar a base de dados ?base de dados alojada como tal na pasta App_Data naquele caso e conexão para uma base de dados alojada em um servidor SQL neste caso- e realizar uma consulta para obter os campos que desejamos passar a um Grid ou a um Chart ?que é do que trataremos agora-.
O restante é a definição do Chart Helper em si, dando lhe suas dimensões, seu título e indicando-lhe que campo é o eixo de abscissas (eixo das X).
Finalmente clicamos sobre o nome do arquivo VendasChart.cshtml com o botão direito do mouse e selecionamos Launch in browser. Se abrirá a janela do explorador por padrão, nos mostrando oChart com os dados selecionados na consulta SQL.
Outra possibilidade é escrever a seguinte versão do código Razor:
@{
var db = Database.Open(“vendas2010”);
var data = db.Query(“SELECT Marca, Vendas FROM Primeiro_Semestre”);
var myChart = new Chart(width: 600, height: 400)
.AddTitle(“Vendas”)
.AddSeries(“Default”,
xValue: data, xField: “Marca”,
yValues: data, yFields: “Vendas”)
.Write();
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
</head>
<body>
</body>
</html>
Como vemos, muda a forma de definir o Chart Helper. Desde um ponto de vista funcional, neste caso específico, é totalmente equivalente, mas tem certas vantagens: Se pode especificar com mais precisão que representar nos eixos. Há modo de indicar que tipo de gráfico se representará, algo que veremos a seguir. Contém parâmetros para dar títulos, legendas e mais, embora para isso nos remetamos à documentação pertinente e não será tratado neste artigo. Para especificar o tipo de gráfico? Se não se faz, por padrão é um de barras, como o mostrado no caso anterior- deve-se especificar a propriedade ChartType, conforme se mostra na listagem mais adiante. Possíveis valores de ChartType são:
- Pie
- Bar
- Column
- Line
- Area
- Point
- Bubble
- Stock
- Doughnut
- Pyramid
Sugerimos que, por falta de espaço no presente artigo, se testem as diversas possibilidades. Assim, o código seguinte, nos mostrará os mesmos dados, mas em um gráfico de pizza:
var myChart = new Chart(width: 600, height: 400)
.AddTitle(“Vendas”)
.AddSeries(“Default”, chartType: “Pie”,
xValue: data, xField: “Marca”,
yValues: data, yFields: “Vendas”)