Implement a data bar graph in a asp.net page

Asp.net| Data | Page bar charts are sometimes called "bar" graphs. In my last article, "in the ASP.net implementation data graph" has already introduced in the browser to see the chart, generally is the picture file. Can you also generate these graphs in asp.net? The answer is yes, because there is a new feature in ASP.net--the drawing function, which can be plotted as the diagram to be implemented, and finally a picture in the client's browser to display the chart.

This article on the basis of the previous article, further introduced in the ASP.net page to implement the bar diagram of the specific methods. I hope this article will not only let you understand the powerful drawing function in asp.net, I'd like to make up for one drawback of the previous article, which is that the data from the previous implementation chart comes from a fixed number, and we know that charts can show a stronger advantage only after they are associated with the database. Here's how to bring up data from a database in a asp.net page and use this data to form a bar graph.

A The software environment for the design and operation of this article:

(1). Microsoft Windows 2000 Server Edition.

(2). Visual Studio. NET official edition,. NET Framework SDK version number 3705.

(3). MDAC 2.6 (Microsoft Data acess Component) version above.

Two Set up a data source

For convenience, the database type selected in this article is the local database--access 2000, and if you are using a different database type, simply modify the database connection code in the program described below. The Access database name is "Db.mdb", and only one datasheet "TABLE01" is defined in this database, and the table is structured as shown in table 01:

Description of field Name type
ID automatic numbering primary key, incrementing
YF Digital Sales Month
SL Digital Sales
Table 01:TABLE01 Data table structure

After you have defined the "TABLE01" datasheet in the "Db.mdb" database, add the records in the TABLE01 datasheet as shown in table 02:

ID YF SL
1 1 12
2 2 5
3 3 7
4 4 20
5 5 16
6 6 10
7 7 19
8 8 8
9 9 7
10 10 13
11 11 11
12 12 15
Table 02:TABLE01 Records in datasheet

After you have added these 12 records in the TABLE01 datasheet, save the "Db.mdb" database to the root directory of C disk.

Three The key steps of implementing data bar graph in asp.net page and its realization method:

Implementing the data bar diagram in the ASP.net page must first address two major issues:

(1). First of all, to solve the ASP.net page in the implementation of the database connection and read data from the database methods.

In order to realize the reading data from the database, the OleDbDataReader class is used, and the OleDbDataReader class provides a way to read the data from the database. The following code is connected to the "Db.mdb" database in the C-packing directory, reading the records in the TABLE01 datasheet, and storing the data in the defined two arrays:

String srouter = "C:\\db.mdb";
Get the absolute path of the current Access database on the server side
String Strcon = "Provider = microsoft.jet.oledb.4.0;" Data Source = "+ srouter;
Create a database connection
OleDbConnection myconn = new OleDbConnection (Strcon);
String strcom = "Select YF, SL from Table01 order by YF";
MyConn.Open ();
OleDbCommand mycommand = new OleDbCommand (strcom, myconn);
OleDbDataReader myoledbdatareader = Mycommand.executereader ();
Create a OleDbDataReader instance and use this instance to get the data from the records in the database
int [] Ixiaosh = new int [12];
Defines an array that holds sales data read from the database
string [] SMoth = new string [12];
Defines an array of sales months to read from the database
int iindex = 0;
while (Myoledbdatareader.read ())
{
Ixiaosh [Iindex] = Myoledbdatareader.getint32 (1);
SMoth [Iindex] = Myoledbdatareader.getint32 (0). ToString () + "month";
iindex++;
}
Reads the data from the TABLE01 datasheet and holds it in a previously defined two array
MyConn. Close ();
Myoledbdatareader. Close ();
Close various resources

(2). According to the obtained data, draw the picture and display it:

In the first step, the data read from the database has been stored in the "Ixiaosh" and "SMoth" arrays. Here's how to work out the bar graph based on these data? First look at the data bar graph that you want to implement in the ASP.net page. This can be as shown in Figure 01:



Figure 01: Data bar graph implemented in asp.net

In the program, the elements shown in Figure 01 are divided into five parts by region, and the five sections are implemented separately in the programs described later:

1. Build the whole picture

The first is to create a bitmap instance, and to build a graphics instance, graphics the instance provides various rendering methods, so that various graphics can be plotted on the bitmap instance as required by the data. The following code is a concrete way to create a bitmap instance in ASP.net and build a graphics instance with this instance:

Bitmap BM = new Bitmap (600, 250);
Create a bitmap instance with a length of 600 and a broadband of 250
Graphics G;
g = graphics.fromimage (BM);
Create graphic instance from this bitmap instance
G. Clear (Color. Snow);
Fill the drawing surface with snow color background color

2. The title section in Figure 01 is:

This is the DrawString method provided in the graphics instance to draw the specified string in the specified font, color, and at the specified location. The following code works by drawing the caption in Figure 01:

G. DrawString ("xx company XX device 2002 Sales Situation List", New Font ("XXFarEastFont-Arial"), Brushes. Black, new Point (5, 5));
Draws the specified string in the specified font, in the specified color, at the specified position in the painting surface. That's the chart title.

3. The tip area in Figure 01, which is displayed in the upper-right corner of Figure 01:

To make this part of the content first to position, you can put this part of the content to be drawn into three small parts:

First, is figure 01 in the "Unit: Million Sets" text, this part of the process is relatively simple, when selected to be in the picture output in the text coordinates, call the graphics instance provided in the DrawString method can be;

The second is to draw the small square in Figure 01, first to invoke the DrawRectangle method in the graphics instance to draw the specified size of the box at the specified position in the specified color, Then the fillrectangle of the Treaty graphics instance fills this small square to complete;

The third is to draw the text on the right side of the small square. Also use the DrawString method provided in the graphics instance, except that the position coordinates and the font are changed accordingly. The following code function is to draw what is shown in Figure 01 in the upper-right corner:

Point Myrec = new Point (535, 30);
Point mydec = new Point (560, 26);
The above is to draw the positioning below in Figure 01
G. DrawString ("Unit: Million Sets", New Font ("Song Body", 9), brushes. Black, new Point (525, 12));
for (int i = 0; i < smoth.length; i++)
{
G. DrawRectangle (Pens.black, Myrec. X, Myrec. Y, 20, 10);
Draw Small Squares
G. FillRectangle (New SolidBrush (GetColor (i)), Myrec. X, Myrec. Y, 20, 10);
Fill Small Squares
G. DrawString (SMoth [i]. ToString (), New Font ("Song Body", 9), brushes. Black, MYDEC);
Draw the text on the right side of the small square
Myrec. Y + 15;
MyDec. Y + 15;
}

4. Draw the data bar chart based on the data read from the database:

This section is similar to the third section, and the main difference is that the drawing is not in the same position, the following code is to draw the bar graph in Figure 01 and to indicate the number represented by the bar graph:

int ibarwidth = 40;
int scale = 10;
for (int i = 0; i < Ixiaosh. Length; i++)
{
G. DrawRectangle (Pens.black, (i * ibarwidth) +-(Ixiaosh [i] * scale), (Ixiaosh [i] * scale) + 5 ) ;
Draw bar Graph
G. FillRectangle (New SolidBrush (GetColor (i)), (i * ibarwidth) +, (Ixiaosh [i] * scale), (IXia OSH [i] * scale) + 5);
Fills the bar graph with the specified color
G. DrawString (Ixiaosh [i]. ToString (), New Font ("Song Body", 9), brushes. Black, (i * ibarwidth) +, 235-(Ixiaosh [i] * scale));
Show data represented by bar graph
}

5. Draw a picture border, and form a JPEG file format on the client display:

Draws a picture border, using the DrawRectangle method in the graphics instance. As for the use of JPEG file in the client display, because the JPEG file occupies a small space, conducive to network transmission. The following code draws the border in Figure 01 and forms a JPEG file:

Pen p = new Pen (color.black, 2);
G. DrawRectangle (P, 1, 1, 598, 248);
Bm. Save (Response. OutputStream, ImageFormat. JPEG);

[1] [2] Next page