Use of amchart graphical controls in Asp.net

The amchart control is a set of graphics controls based on JS + falsh. After two days of tossing and tossing, The amchart control can be basically used based on the methods summarized by our predecessors on the Internet. By the way, the document on the official website is really inconvenient, and there is no API description.

First of all, add a reference to AM. charts. dll. You can add it to the toolbox and drag the five commonly used images to the Web as needed.

One way to add data is to write it in a CVS or XML file, but it is not easy to operate images in the dynamic ecosystem. Generally, data is added in the background. This time, the ID of the queried data is determined by using dropdownlist to obtain the dataset, and then added to amchart. The linechart is used as an example. The Code is as follows:

1 // clear the original image
2 linechart1.graphs. Clear ();
3 // prepare data
4 // response. Write (dropdownlist1.selectedvalue + "," + dropdownlist1.selecteditem );
5 string SQL = "select stcd, datename (year, Tm) + datename (month, Tm) as date, sum (dyp) as dyp from st_pptn_r where stcd = '" +
6 dropdownlist1.selectedvalue +
7 "'group by stcd, datename (year, Tm) + datename (month, Tm) order by stcd, Date ";
8 dataset =
9 sqlhelper. executedataset (
10 configurationmanager. connectionstrings ["rwdb"]. connectionstring, commandtype. Text,
11. SQL );
12 // Add a data line Object
13 linechartgraph = new linechartgraph ();
14 // The vertex shape is square
15 linechartgraph. Bullet = linechartbullettypes. Square;
16 // vertex color
17 // linechartgraph. bulletcolor = color. Yellow;
18 // the color of the downward Area Chart
19 linechartgraph. fillcolor = color. Yellow;
20 // transparency of the downward Area Chart
21 linechartgraph. fillalpha = convert. tobyte (40 );
22 // Add data
23 // the Y axis value is on the right (default value: on the left)
24 // linechartgraph. axis = linechartaxes. Right;
25
26 linechartgraph. datasource = dataset; // Data Source
27 linechartgraph. dataseriesitemidfield = "date"; // Id field
28 linechartgraph. datavaluefield = "dyp"; // Value Field
29 linechartgraph. Title = dropdownlist1.selecteditem. Text. Trim (); // data series title
30 // Add a line to a graph
31 linechart1.graphs. Add (linechartgraph );
32
33 // Add an average line
34 double averagepre = 0;
35 int COUNT = 0;
36 foreach (datarow in dataset. Tables [0]. Rows)
37 {
38 If (datarow ["dyp"]! = Dbnull. value)
39 {
40 averagepre + = convert. todouble (datarow ["dyp"]);
41 count ++;
42}
43}
44 // response. Write ("average =" + averagepre. tostring () + ", Count =" + count. tostring ());
45 averagepre/= count;
46 averagepre = math. Round (averagepre, 2); // retain two decimal places
47 datacolumn dc_v = new datacolumn ("average"); // Add the average data column to the original dataset
48 dataset. Tables [0]. Columns. Add (dc_v );
49 for (INT I = 0; I <dataset. Tables [0]. Rows. Count; I ++)
50 {
51 dataset. Tables [0]. Rows [I] [dc_v] = averagepre;
52}
53 linechartgraph lCG = new linechartgraph ();
54 LCG. datasource = dataset;
55 LCG. dataseriesitemidfield = "date ";
56 LCG. datavaluefield = "average ";
57 LCG. Title = "average ";
58 linechart1.graphs. Add (LCG );
59 // Add Y axis unit description
60 linechart1.labels. Add (New chartlabel ("mm", new unit (30), new unit (30); // The unit is mm.
61 linechart1.datasource = dataset;
62 linechart1.dataseriesidfield = "date ";
63 linechart1.databind ();

Several notes:

1. Set the image size

// Set the width and height of the image
Linechart1.width = new unit (600 );
Linechart1.height = new unit (400 );

2. If you do not use dynamic data generation such as dropdownlist, the web page is relatively simple. When no repeated images are generated, you do not need linechart1.graphs. Clear (); To clear the source image. For example, if you click dropdownlist to display different data, you need to add linechart1.graphs. clear () to clear the source image, and set the enableviewstate attribute of linechart1 to false. Otherwise, the original data is displayed when you click dropdownlist, And the displayed data is incomplete. It took me half a day to discover this problem.

3. Data Binding

You must set the datasource, dataseriesidfield, and datavaluefield parameters in the linechartgraph object. However, after the parameter is set, you still need to set the datasource and dataseriesidfield in linechart1. Otherwise, no image is displayed. Databind () is required for both objects ().
4. Dual Axis

You can use linechartgraph. axis = linechartaxes. Right; to change the coordinate axis position, which is usually left by default. When you add another line, you can design its coordinate axis on the right to display it separately.

Qq screenshot, the display is not clear, in fact, flash image display is much better.