ASP.NET Web Pages - Chart Helper

Chart - one of the many useful ASP.NET Web helpers.

Chart Helper

In the previous chapter, you learned how to use an ASP.NET "helper".

You have learned how to display data in a grid using the "WebGrid Helper".

This chapter explains how to display data in charts using the "Chart Helper".

"Chart Helper" can create different types of chart images through various formats and tags. It can create standard charts such as area charts, bar charts, column charts, line charts, and pie charts, as well as more professional charts (such as stock trend charts).

The data displayed in the chart can be from an array, database, or file.

Chart from array

The following example shows the code that uses data from an array to display a chart:

Beispiel

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

Ausführungsbeispiel

new Chart Creates a new chart object and sets its width and height.

AddTitle specifies the title of the chart.

AddSeries method adds data to the chart.

chartType Parameters define the type of the chart.

xValue Parameters define the values on the x-axis.

yValues Parameters define the values on the y-axis.

Write() displays the chart.

Chart from database

You can first run a database query and then use the data in the results to create a chart:

Beispiel

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

Ausführungsbeispiel

var db = Database.Open opens the database (and assigns the database object to the variable db).

var dbdata = db.Query runs a database query and saves the results in dbdata.

new Chart Creates a new chart object and sets its width and height.

AddTitle specifies the title of the chart.

DataBindTable binds the data source to the chart.

Write() displays the chart.

Alternative to using the DataBindTable method is to use AddSeries (see the previous example). DataBindTable is easier to use, but AddSeries has greater scalability because it can more precisely specify the chart and data:

Beispiel

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

Ausführungsbeispiel

Diagramme aus XML-Daten

Die dritte Option zur Erstellung von Diagrammen ist die Verwendung einer XML-Datei als Datenquelle für das Diagramm:

Beispiel

@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("Verkäufe pro Mitarbeiter")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Ausführungsbeispiel