ASP.NET Web Pages - Chart Helper
- Previous Page WebPages WebGrid
- Next Page WebPages Email
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 by 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 demonstrates code that displays a chart using data from an array:
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();
}
Run Instance
new Chart Create a new chart object and set its width and height.
AddTitle The method specifies the title of the chart.
AddSeries The method adds data to the chart.
chartType The parameter defines the type of the chart.
xValue The parameter defines the values on the x-axis.
yValues The parameter defines the values on the y-axis.
Write() The method 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:
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();
}
Run Instance
var db = Database.Open Open the database (and assign the database object to the variable db).
var dbdata = db.Query Run a database query and save the results to dbdata.
new Chart Create a new chart object and set its width and height.
AddTitle The method specifies the title of the chart.
DataBindTable The method binds the data source to the chart.
Write() The 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 has greater scalability because it can more precisely define the chart and data:
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();
}
Run Instance
Chart from XML Data
The third option to generate a chart is to use an XML file as the chart 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();}
}
Run Instance
- Previous Page WebPages WebGrid
- Next Page WebPages Email
