O ajudante Gráfico - Um dos muitos ajudantes Web ASP.NET úteis.
O ajudante Gráfico
Nos capítulos anteriores, você aprendeu a usar um ASP.NET "Helper" .
Você aprendeu a exibir dados em uma grade usando o "WebGrid Helper" .
Este capítulo explica como exibir dados em forma gráfica, utilizando o "Chart Helper" .
O "Chart Helper" pode criar imagens de gráficos de diferentes tipos, com muitas opções de formatação e etiquetas. Ele pode criar gráficos padrão, como gráficos de área, gráficos de barras, gráficos de colunas, gráficos de linha e gráficos de pizza, juntamente com gráficos mais especializadas, como gráficos de ações.
Os dados que você exibir em um gráfico pode ser de uma matriz, a partir de um banco de dados, ou a partir de dados em um arquivo.
Gráfico de uma matriz
O exemplo a seguir mostra o código necessário para exibir um gráfico de uma matriz de valores:
Exemplo
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
} Exemplo executar » - new Chart cria um novo objeto de gráfico e define sua largura e altura
- o AddTitle método especifica o título do gráfico
- o AddSeries método adiciona dados ao gráfico
- o chartType parâmetro define o tipo de gráfico
- o xValue parâmetro define nomes de eixo-x
- o yValues parâmetro define os valores do eixo y
- a Write() método apresenta o gráfico
Gráfico A partir de dados de banco de dados
Você pode executar uma consulta de banco de dados e, em seguida, usar os dados a partir dos resultados para criar um gráfico:
Exemplo
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
} Exemplo executar » - var db = Database.Open abre a base de dados (e atribui o objecto da base de dados para o banco de dados variável)
- var dbdata = db.Query executa uma consulta de banco de dados e armazena o resultado em dbdata
- new Chart cria um novo objeto de gráfico e define sua largura e altura
- o AddTitle método especifica o título do gráfico
- o DataBindTable método liga-se a fonte de dados para o gráfico
- a Write() método apresenta o gráfico
Uma alternativa à utilização do método DataBindTable é usar AddSeries (ver exemplo anterior). DataBindTable é mais fácil de usar, mas AddSeries é mais flexível porque você pode especificar o gráfico e os dados de forma mais explícita:
Exemplo
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.AddSeries(chartType:"Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
} Exemplo executar » Gráfico A partir de dados XML
A terceira opção para mapeamento é usar um arquivo XML como os dados para o gráfico:
Exemplo
@using System.Data;
@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("data.xml"));
var dataView = new DataView(dataSet.Tables[0]);
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
} Exemplo executar »