ASP.NET Web Pages - Chart Helper

Chart - l'un des nombreux helpers ASP.NET Web utiles.

Chart Helper

Dans le chapitre précédent, vous avez appris à utiliser un "helper" ASP.NET.

Vous avez appris à afficher des données dans un grille en utilisant le "WebGrid Helper".

Ce chapitre explique comment afficher des données dans un graphique en utilisant le "Chart Helper".

Le "Chart Helper" peut créer différents types d'images de graphiques à l'aide de multiples formats et balises. Il peut créer des graphiques standard, tels que les graphiques en surface, en barres, en colonnes, en lignes et en secteurs, ainsi que des graphiques plus professionnels (comme les graphiques de tendance des actions).

Les données affichées dans le graphique peuvent provenir d'un tableau, d'une base de données ou d'un fichier.

Graphique provenant de tableau

L'exemple suivant montre le code qui utilise des données provenant d'un tableau pour afficher un graphique :

Exemple

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

Exécuter l'exemple

new Chart Créez un nouvel objet de graphique et définissez sa largeur et sa hauteur.

AddTitle La méthode spécifie le titre du graphique.

AddSeries La méthode ajoute des données au graphique.

chartType Le paramètre définit le type de graphique.

xValue Le paramètre définit les valeurs de l'axe des x.

yValues Le paramètre définit les valeurs de l'axe des y.

Write() La méthode affiche le graphique.

Graphique provenant de la base de données

Vous pouvez d'abord exécuter une requête de base de données, puis utiliser les données du résultat pour créer un graphique :

Exemple

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

Exécuter l'exemple

var db = Database.Open Ouvrez la base de données (et assignez l'objet de base de données à la variable db).

var dbdata = db.Query Exécutez une requête de base de données et enregistrez les résultats dans dbdata.

new Chart Créez un nouvel objet de graphique et définissez sa largeur et sa hauteur.

AddTitle La méthode spécifie le titre du graphique.

DataBindTable La méthode lie la source de données au graphique.

Write() La méthode affiche le graphique.

L'alternative à la méthode DataBindTable est l'utilisation de AddSeries (voir l'exemple précédent). DataBindTable est plus facile à utiliser, mais AddSeries est plus flexible, car il permet de spécifier plus précisément le graphique et les données :

Exemple

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

Exécuter l'exemple

Graphique à partir de données XML

La troisième option pour générer un graphique est d'utiliser un fichier XML comme données du graphique :

Exemple

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

Exécuter l'exemple