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
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1663
14
1420
52
1315
25
1266
29
1239
24
How to add labels to legend in Google Sheet
Feb 19, 2024 am 11:03 AM
This article will demonstrate how to add labels to legends in Google Sheet that focus on a single thing, providing a name or identity. A legend explains a system or group of things, giving you relevant contextual information. How to Add Labels to a Legend in GoogleSheet Sometimes, when working with charts, we want to make them easier to understand. This can be achieved by adding appropriate labels and legends. Next, we’ll show you how to add labels to legends in Google Sheets to make your data clearer. Create the chart Edit the text of the legend label Let's get started. 1] Create a chart To label the legend, first, we have to create a chart: First, enter in the columns or rows of GoogleSheets
How to use PHP arrays to generate and display charts and statistical graphs
Jul 15, 2023 pm 12:24 PM
How to use PHP arrays to generate and display charts and statistical graphs. PHP is a widely used server-side scripting language with powerful data processing and graphic generation capabilities. In web development, we often need to display charts and statistical graphs of data. Through PHP arrays, we can easily implement these functions. This article will introduce how to use PHP arrays to generate and display charts and statistical graphs, and provide relevant code examples. Introducing the necessary library files and style sheets Before starting, we need to introduce some necessary library files into the PHP file
Implementation of linear and pie chart functions in Vue statistical charts
Aug 19, 2023 pm 06:13 PM
The linear and pie chart functions of Vue statistical charts are implemented in the field of data analysis and visualization. Statistical charts are a very commonly used tool. As a popular JavaScript framework, Vue provides convenient methods to implement various functions, including the display and interaction of statistical charts. This article will introduce how to use Vue to implement linear and pie chart functions, and provide corresponding code examples. Linear graph function implementation A linear graph is a type of chart used to display trends and changes in data. In Vue, we can use some excellent
How to quickly build a statistical chart system under the Vue framework
Aug 21, 2023 pm 05:48 PM
How to quickly build a statistical chart system under the Vue framework. In modern web applications, statistical charts are an essential component. As a popular front-end framework, Vue.js provides many convenient tools and components that can help us quickly build a statistical chart system. This article will introduce how to use the Vue framework and some plug-ins to build a simple statistical chart system. First, we need to prepare a Vue.js development environment, including installing Vue scaffolding and some related plug-ins. Execute the following command in the command line
How to use PHP and Vue.js to implement data filtering and sorting functions on charts
Aug 27, 2023 am 11:51 AM
How to use PHP and Vue.js to implement data filtering and sorting functions on charts. In web development, charts are a very common way of displaying data. Using PHP and Vue.js, you can easily implement data filtering and sorting functions on charts, allowing users to customize the viewing of data on charts, improving data visualization and user experience. First, we need to prepare a set of data for the chart to use. Suppose we have a data table that contains three columns: name, age, and grades. The data is as follows: Name, Age, Grades Zhang San 1890 Li
Learning Excel Charts: How to Make Charts Move Like Web Pages
Aug 16, 2022 am 10:30 AM
In the previous article "Excel chart learning through cases, let's talk about how to draw a graduated cylinder column chart", we learned about the method of drawing a graduated cylinder column chart. Today we will share another Excel chart tutorial and talk about a method to make Excel charts move like a web page. As long as you enter keywords, the table data and charts will automatically change. Especially when the company's data needs to be divided into departments, it is simply too confusing. Convenient!
How to insert a chart in word
Mar 20, 2024 pm 03:41 PM
Sometimes in order to display the data more intuitively, we need to use charts to display it. But when it comes to charts, many people think that they can only be operated on Excel. In fact, this is not the case. Word can also directly insert charts. How to do it? Just take a look and you'll find out. 1. First we open a word document. 2. Next we find the "Chart" tool button in the "Insert" menu and click it. 3. Click the "Chart" button and select a suitable chart. Here we can select a chart type at will and click "OK". 4. After selecting the chart, the system will automatically open the excel chart, and inside The data has been entered, we just need to change the data. If you have already prepared the form here,
How to make good-looking excel charts
Mar 20, 2024 pm 04:06 PM
When there is a lot of table data, sometimes the comparison cannot be clearly seen at a glance. If you want to create a contrast or make the icons clearer, how do you make a good-looking excel chart? The editor will share with you an atmospheric bar chart today. Everyone, please pay attention and watch carefully! With all data selected, insert a Percent Stacked Column Chart. Next, copy the data in the "Complete" column, select the entire chart, and paste it into the corresponding location. After selecting the entire series in the chart, go to "Chart Tools" - "Design" - "Change Chart Type" - "Combination". Here, we can change the first and second items to "Percent Stacked Column Chart", change the third item to "Line Chart with Data Markers", and check the "Secondary Axis" after the third item options. This allows
