ASP.NET Web Pages Diagram

Chart Helper - One of many useful ASP.NET web helpers.

Data can be displayed in a chart by using the Chart helper. This section explains the specific use of the Chart helper.

Chart helper

In the previous chapters, you have learned how to use ASP.NET "helpers".

We have already described how to use the "WebGrid Helper" to display data in a grid.

This chapter describes how to use the Chart Helper to display data graphically.

The "Chart Helper" can create different types of chart images with a variety of formatting options and labels. It can create standard charts such as area charts, bar charts, column charts, line charts, pie charts, etc., as well as more professional charts like stock charts.

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

Create a chart from an array

The following example shows the code required to display a chart based on array data:

Example

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

- new Chart creates a new chart object and sets its width and height

- The AddTitle method specifies the title of the chart

- AddSeries method adds data to the chart

- The chartType parameter defines the type of chart

- The xValue parameter defines the name of the x-axis

- The yValues ​​parameter defines the name of the y-axis

- Write() method displays the chart

Create a chart based on the database

You can execute a database query and then use the data from the query results to create a chart:

Example

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

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

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

- new Chart creates a new chart object and sets its width and height

- The AddTitle method specifies the title of the chart

- DataBindTable method binds the data source to the chart

- Write() method displays the chart

An alternative to using the DataBindTable method is to use AddSeries (see the previous example). DataBindTable is easier to use, but AddSeries is more flexible because you can specify the chart and data more explicitly:

Example

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

Create charts from XML data

A third way to create a chart is to use an XML file as the chart's data:

Example

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

The above is an introduction to the use of Chart helper.