ASP.NET Web Pages - Chart Helper

Chart - um dos muitos úteis helpers ASP.NET Web.

Chart Helper

No capítulo anterior, você já aprendeu como usar um "Helper" ASP.NET.

Você já aprendeu como exibir dados na grade usando o "WebGrid Helper".

Este capítulo ensina como exibir dados no gráfico, usando o "Chart Helper".

"Chart Helper" pode criar diferentes tipos de imagens de gráficos através de vários formatos e tags. Ele pode criar gráficos padrão, como gráficos de área, gráficos de barras, gráficos de coluna, gráficos de linha e gráficos de pizza, bem como gráficos mais profissionais (como gráficos de tendências de ações).

Os dados exibidos no gráfico podem ser dados de array, banco de dados ou arquivo.

Gráfico do array

O exemplo a seguir mostra o código que usa dados de array para exibir o gráfico:

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();
}

Executar Exemplo

new Chart Cria um novo objeto de gráfico e define sua largura e altura.

AddTitle O método especifica o título do gráfico.

AddSeries O método adiciona dados ao gráfico.

chartType O parâmetro define o tipo do gráfico.

xValue O parâmetro define o valor do eixo X.

yValues O parâmetro define o valor do eixo Y.

Write() O método exibe o gráfico.

Gráfico do banco de dados

Você pode executar uma consulta de banco de dados uma vez e usar os dados do resultado para criar o 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("Vendas de Produtos") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Executar Exemplo

var db = Database.Open Abra o banco de dados (e atribua o objeto de banco de dados à variável db).

var dbdata = db.Query Execute uma consulta de banco de dados e salve os resultados em dbdata.

new Chart Cria um novo objeto de gráfico e define sua largura e altura.

AddTitle O método especifica o título do gráfico.

DataBindTable O método liga a fonte de dados ao gráfico.

Write() O método exibe o gráfico.

A alternativa para o método DataBindTable é usar AddSeries (veja o exemplo anterior). O DataBindTable é mais fácil de usar, mas o AddSeries é mais flexível, pois pode especificar mais exatamente o gráfico e os dados:

Exemplo

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Vendas de Produtos") 
   .AddSeries(chartType: "Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Executar Exemplo

Gráfico de dados XML

A terceira opção para gerar gráficos é usar um arquivo XML como dados do 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("Vendas por Funcionário")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Executar Exemplo