Latest web development tutorials

ASP.NET Web Pages Chart

Chart helper - one of the many useful ASP.NET Web Helper.


Chart Helper

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

As already described how to use the "WebGrid helper" to display data in a grid.

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

"Chart Helper" can create different types of labels with a variety of formatting options and the chart image. It can create area charts, bar charts, column charts, line charts, pie charts and other standards, it can create more professional chart like stock charts.

chartchart

Data can be displayed in the chart from an array, data is a database or a file.


Create a chart based on an array

The following example shows the code required to chart data from the array:

Examples

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

Running instance »

- New Chart creates a new chart object and set its width and height

- AddTitle method specifies the chart title

- AddSeries method of increasing the data to a chart

- ChartType parameter defines the type of chart

- NamexValue parameter defines the x-axis

- NameyValues parameter defines the y-axis

- Write () method to display a chart


Create a chart based on database

You can perform a database query, and then use the data query results to create a chart:

Examples

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

Running instance »

- Var db = Database.Open open the database (the database object assigned to the variable db)

- Var dbdata = db.Query perform a database query and save the results in the dbdata

- New Chart creates a new chart object and set its width and height

- AddTitle method specifies the chart title

- DataBindTable method to bind the data source to the chart

- Write () method to display a chart

In addition to using outside DataBindTable method, another method is to use AddSeries (see previous example). DataBindTable easier to use, but AddSeries more flexible, because you can more clearly specify the charts and data:

Examples

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

Running instance »


Create charts based on XML data

A third method is to create a chart using XML files as the chart data:

Examples

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

Running instance »