Webmatrix tutorial (5) (Quick data chart creation solution)

Many people know that using webmatrix, Microsoft's latest weapon, can easily help you install the most commonly used PHP in windows. Asp.net open-source network applications such as WordPress, dnn, umbraco, mojoportal, joomla.

At the same time, the razor supported by webmatrix allows you to quickly create small dynamic ones. net website, in fact, webmatrix also has a selling point: it has a helper library, familiar with these helper can really use webmatrix to build valuable websites.

Today, let's take a look at the chart Library: Chart.

 

If you have never touched webmatrix before, we recommend that you read the following article quickly:

Webmatrix tutorial (1) (Follow Microsoft's latest weapon: Create your first webmatrix website)

Webmatrix tutorial (2) (Follow Microsoft's latest weapon: Create Your webmatrix Website Based on blank projects [Part 1])

Webmatrix tutorial (3) (Follow Microsoft's latest weapon: Create Your webmatrix Website Based on blank projects [Part 2])

Webmatrix tutorial (4) (read database)

 

Supports multiple charts

Create a blank site or use the template of webmatrix to create a starter site:

 

Create a new cshtml file named mycharts. cshtml

 

Delete the automatically generated code and replace it with the following:

@{


VaR firstchart = new chart (width: 350, height: 250)
. Addtitle ("chart test ")
. Addseries (
Name: "teams", charttype: "bar ",
Xvalue: New [] {"China", "USA", "Canada", "UK "},
Yvalues: New [] {"12", "6", "4", "3 "})
. Write ();
}

Click Run. The page generated in the browser is as follows:

 

Chart helps support various forms of charts, such as pie chart, line chart, fill chart, and column chart. If you change the value of charttype, you can easily obtain charts of different types:

In the above Code

Name: "teams", charttype: "bar ",

Replace:

Name: "teams", charttype: "pie ",

You can get:

Replace:

Name: "teams", charttype: "line ":

 

Or:

Name: "teams", charttype: "area ",

 

Of course, the data source can also be a database table or XML file:

 

Read from database

Here, we create a table named supermen and define its columns as follows:

 

Enter some initial data:

 

 

Delete the original code in mycharts and replace it:

 

@{
VaR DB = database. Open ("startersite ");
VaR DATA = dB. Query ("Select name, power from supermen ");
VaR secchart = new chart (width: 350, height: 250)
. Addtitle ("Superman competition ")
. Databindtable (datasource: data, xfield: "name ")
. Write ();

}

Databindtable specifies the data source and X axis. Alternatively, you can specify the X and Y axes respectively:

VaR secchart = new chart (width: 350, height: 250)
. Addtitle ("Superman competition ")
. Addseries ("default ",
Xvalue: data, xfield: "name ",
Yvalues: data, yfields: "power"). Write ();

Generate the following charts:

 

 

Read from XML

To read data from XML, we must first create two files: XML data files and XSD structure files.

 

In the app_data directory, create a new file named data. xml. Edit and rewrite the file as follows:

 

<? XML version = "1.0" standalone = "yes"?>
<Newdataset xmlns = "http://tempuri.org/data.xsd">
<User>
<Name> Alex </Name>
<Age> 31 </age>
</User>
<User>
<Name> Adam </Name>
<Age> 30 </age>
</User>
<User>
<Name> Otto </Name>
<Age> 23 </age>
</User>
<User>
<Name> Jessica </Name>
<Age> 8 </age>
</User>
</Newdataset>

 

Generate a file named data. XSD in the following format:

 

<? XML version = "1.0"?>
<Xs: Schema
Id = "newdataset"
Targetnamespace = "http://tempuri.org/data.xsd"
Xmlns: mstns = "http://tempuri.org/data.xsd"
Xmlns = "http://tempuri.org/data.xsd"
Xmlns: xs = "http://www.w3.org/2001/XMLSchema"
Xmlns: msdata = "urn: Schemas-Microsoft-com: XML-msdata"
Attributeformdefault = "qualified"
Elementformdefault = "qualified">
<Xs: element name = "newdataset"
Msdata: isdataset = "true"
Msdata: enforceconstraints = "false">
<Xs: complextype>
<Xs: Choice maxoccurs = "unbounded">
<Xs: element name = "user">
<Xs: complextype>
<Xs: sequence>
<Xs: Element
Name = "name"
Type = "XS: string"
Minoccurs = "0"/>
<Xs: Element
Name = "Age"
Type = "XS: int"
Minoccurs = "0"/>
</Xs: sequence>
</Xs: complextype>
</Xs: Element>
</Xs: Choice>
</Xs: complextype>
</Xs: Element>
</Xs: schema>

 

Finally, create a file named users. cshtml and edit the file content as follows:

 

@ Using system. Data;
@{
VaR dataset = new dataset ();
Dataset. readxmlschema (server. mappath ("~ /App_data/data. XSD "));
Dataset. readxml (server. mappath ("~ /App_data/data. xml "));
VaR dataview = new dataview (Dataset. Tables [0]);

VaR MyChart = new chart (width: 350, height: 300)
. Addtitle ("user age ")
. Addseries ("chart ",
Xvalue: dataview, xfield: "name ",
Yvalues: dataview, yfields: "Age ")
. Write ();
}

 

The above code using system. data indicates that the system. Data class library will be referenced.

Dataset. readxmlschema reads the structure of the data to be used. readxml reads the data source.

 

Dataview obtains the first table from dataset, that is, the data to be used:

Click Run to generate the following page:

 

 

This article is from ASP. NET (Alex song) of joy. Please indicate the source