ASP.NET Web Pages - Chart Helper

Chart Helper - One of many useful ASP.NET Web Helpers.

Chart Helper

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

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

This chapter introduces how to use the "Chart Helper" to display data in graphical form.

"Chart Helper" can create different types of chart images with a variety of formatting options and labels. It can create standard charts like area charts, bar charts, column charts, line charts, pie charts, and 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:

@{ 
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 Create a new Chart object and set its width and height

- AddTitle method specifies the title of the chart

- AddSeries method adds data to the chart

- chartType Parameters define the type of chart

- xValue Parameters define the name of the x-axis

- yValues Parameters define the name of the y-axis

- Write() Method to display the chart

Create a chart based on the database

You can execute a Database query, then use the data from the query results to create a chart:

@{ 
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 Open the database (assign the database object to the variable db)

- var dbdata = db.Query Execute the database query and Save the results in dbdata

- new Chart Create a new chart object and set its width and height

- 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:

@{ 
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 based on XML data

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