Share ASP.NET study notes (9) WebPages chart

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

Diagram Helper

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

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

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

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.

Create a chart based on 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 set its width and height

-AddTitle method specifies the title of the chart

-AddSeries method adds data to the chart

-chartType parameter defines the chart Type

- 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

according to the database Create a chart

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.OpenOpen the database (Assign the database object to the 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, an alternative is to use AddSeries (see 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 a chart based on XML data

The third way to create a chart is to use an XML file as the data for the chart:

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

【 Related recommendations】

1. ASP.NET free video tutorial

2. Share ASP.NET study notes (1)--WebPages Razor

3. Share ASP.NET study notes (2)--WebPages introduction

4. Share ASP.NET study notes (3) WebPages layout

5. Share ASP.NET study notes (4) folder

6. Share ASP.NET study notes (5) Global page AppStart Share ASP.NET study notes with PageStart

7. (8) WebPages Helper

The above is the detailed content of Share ASP.NET study notes (9) WebPages chart. For more information, please follow other related articles on the PHP Chinese website!