Share the ASP. NET Learning Note (9) Webpages chart

Figure Helper-One of the many useful ASP. NET Web Helper.

Figure Helper

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

The previous section describes how to use the WebGrid helper to display data in a grid.

This chapter describes how to use the diagram helper to visualize data graphically.

The diagram helper can create different types of chart images with multiple formatting options and labels. It can create standard charts such as area charts, bar charts, column charts, line charts, pie charts, or even more professional charts like stock charts.

Create a chart based on an array

The following example shows the code required to display the chart based on the array data:

Instance

@{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 diagram creates a new chart object and sets its width and height

-the AddTitle method specifies the title of the chart

-Addseries method to add data to the chart

-ChartType parameter defines the type of chart

-Xvalue parameter defines the name of the x-axis

-yvalues parameter defines the name of the y-axis

-Write () method to display the chart

Create a chart based on a database

You can execute a database query and then use the data in the query results to create a chart:

Instance

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

-var dbdata = db. Query executes database queries and saves results in Dbdata

-New diagram creates a new chart object and sets its width and height

-the AddTitle method specifies the title of the chart

-Databindtable method to bind a data source to a chart

-Write () method to display the chart

In addition to using the Databindtable method, an alternative approach is to use addseries (see previous instance). Databindtable is easier to use, but addseries is more flexible because you can specify charts and data more explicitly:

Instance

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

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

Instance

@using System.data;@{var DataSet = new DataSet ();d Ataset.readxmlschema (Server.MapPath ("data.xsd"));d Ataset.readxml ( Server.MapPath ("Data.xml")), var dataView = new DataView (dataset.tables[0]); var mychart = new Chart (width:600, height:40 0). AddTitle ("Sales Per Employee"). Addseries ("Default", ChartType: "Pie", Xvalue:dataview, Xfield: "Name", Yvalues:dataview, YFields: "Sales"). Write ();}}

"Recommended"

1. ASP. NET free Video Tutorials

2. Share the ASP. NET Learning Notes (1)--webpages Razor

3. Share the ASP. NET Learning Notes (2)--webpages Introduction

4. Share the ASP. NET Learning Notes (3) Webpages layout

5. Share the ASP. NET Learning Notes (4) folder

6. Share the ASP. NET Learning Notes (5) global page AppStart and Pagestart

7. Share the ASP. NET Learning Note (8) Webpages Helper