ASP.NET Web Pages - Chart Helper

Chart - uno dei tanti utili helper ASP.NET Web.

Chart Helper

Nel capitolo precedente, hai imparato come utilizzare un "helper" ASP.NET.

Hai imparato come visualizzare dati nella griglia utilizzando il "WebGrid Helper".

Questo capitolo spiega come visualizzare dati nei grafici utilizzando il "Chart Helper".

Il "Chart Helper" può creare diversi tipi di immagini di grafici attraverso vari formati e tag. Può creare grafici standard come grafici a superficie, grafici a barre, grafici a colonne, grafici a linee e grafici a torta, nonché grafici più professionali (come grafici di andamento azionario).

I dati visualizzati nel grafico possono provenire da array, database o file.

Grafico proveniente da array

L'esempio seguente mostra il codice che utilizza dati da array per visualizzare il grafico:

Esempio

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

Esegui esempio

new Chart Crea un nuovo oggetto grafico e imposta la sua larghezza e altezza.

AddTitle Il metodo specifica il titolo del grafico.

AddSeries Il metodo aggiunge dati al grafico.

chartType Il parametro definisce il tipo di grafico.

xValue Il parametro definisce i valori dell'asse x.

yValues Il parametro definisce i valori dell'asse y.

Write() Il metodo mostra il grafico.

Grafico proveniente dal database

Puoi eseguire una query del database una volta, quindi utilizzare i dati del risultato per creare il grafico:

Esempio

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Vendite di prodotto") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Esegui esempio

var db = Database.Open Apri il database (e assegna l'oggetto database alla variabile db).

var dbdata = db.Query Esegui una query del database e salva i risultati in dbdata.

new Chart Crea un nuovo oggetto grafico e imposta la sua larghezza e altezza.

AddTitle Il metodo specifica il titolo del grafico.

DataBindTable Il metodo vincola la sorgente dati al grafico.

Write() Il metodo mostra il grafico.

L'alternativa all'uso del metodo DataBindTable è l'uso di AddSeries (vedi l'esempio precedente). DataBindTable è più facile da usare, ma AddSeries è più flessibile perché può specificare più esattamente grafici e dati:

Esempio

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

Esegui esempio

Grafico proveniente dai dati XML

La terza opzione per generare un grafico è utilizzare un file XML come dati del grafico:

Esempio

@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("Vendite per dipendente")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Esegui esempio