ASP.NET Web Pages chart
May 12, 2021 ASP.NET
Table of contents
1. ASP.NET Web Pages - Chart Helper
3. Create a chart from an array
ASP.NET Web Pages - Chart Helper
Chart Helper - One of ASP.NET many useful web helpers.
By using the Chart Helper to display data in a chart, this section explains the specific use of the Chart Helper.
Chart helper
In the previous sections, you learned how to use ASP.NET helper for the using .
Earlier, you described how to use the WebGrid Helper to display data in the grid.
This chapter describes how to use the Chart Helper to display data graphically.
The Chart Helper creates different types of chart images with multiple formatting options and labels. It can create standard charts such as area charts, bar charts, bars, line charts, pie charts, or more professional charts such as stock charts.
The data displayed in the chart can be data from an array, a database, or a file.
Create a chart from an array
The following example shows the code required for the chart based on the 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();
}
Run an instance . . .
- New Chart creates a new chart object and sets its width and height
- The AddTitle method specifies the title of the chart
- The 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
- The Write() method displays the chart
Create a chart from the database
You can execute a database query and 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();
}
Run an instance . . .
- var db - Database.Open Open Open database (assigning database objects to variable db)
- var dbdata = db. Query executes the 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
- The DataBindTable method binds the data source to the chart
- The Write() method displays the chart
In addition to using the DataBindTable method, another approach is to use AddSeries (see the previous example). DataBindTable is easier to use, but AddSeries is more flexible because you can specify charts 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();
}
Run an instance . . .
Create a chart based on XML data
A third way to create a chart is to use an XML file as the chart's 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 an instance . . .
These are the introductions to the use of chart helpers.