Bar graphs are sometimes called "Bar" graphs. In my last article "Achieving Data Charts in ASP.NET", I have introduced the charts seen in the browser, which are generally image files. So can these charts be generated in ASP.NET? The answer is yes, because there is a new function in ASP.NET-the drawing function, through this function can be drawn according to the appearance of the chart to be realized, and finally a picture is formed in the browser of the client to display The chart comes.
On the basis of the previous article, this article further introduces the specific method of implementing Bar diagram in ASP.NET page. I hope that this article will not only let you understand the powerful drawing functions in ASP.NET, but also hope to make up for a shortcoming of the previous article, that is, the data of the chart implemented in the previous article comes from a fixed value, and we know that the chart is only in Only after it is associated with the database can it show a more powerful advantage. The following will introduce the specific implementation method of lifting data from the database in the ASP.NET page and forming the Bar graph from the data.
One. The software environment for the design and operation of this article:
(1). Microsoft Windows 2000 Server Edition.
(2). The official version of Visual Studio .Net, the version number of .Net FrameWork SDK is 3705.
(3). MDAC 2.6 (Microsoft Data Acess Component) and above.
two. Establish a data source
For the sake of convenience, the database type selected in this article is the local database--Access 2000. If you are using other database types, you only need to modify the database connection code in the program described below. The name of the Access database is "db.mdb". Only one data table "Table01" is defined in this database. The structure of this table is shown in Table 01:
Field name type Description
ID Automatic numbering Primary key, increment
YF number Sales month
SL number Sales
Table 01: The structure of the Table01 data table
After defining the "Table01" data table in the "db.mdb" database, add records in the Table01 data table 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: Records in the data table of Table01
After adding these 12 records in the Table01 data table, save the "db.mdb" database to the root directory of the C drive.
three. The key steps and implementation methods of the data Bar diagram in the ASP.NET page:
There are two major problems that must be solved first to realize the data Bar diagram in the ASP.NET page:
(1). First, we must solve the method of realizing database connection and reading data from the database in the ASP.NET page.
The program needs to use the OleDbDataReader class to read data one by one from the database. The OleDbDataReader class provides a method to read data one by one from the database. The following code connects to the "db.mdb" database in the root directory of Disk C, reads the records in the Table01 data table one by one, and stores the data in two defined 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.
/ Reader () /Create an instance of OleDbDataReader, and use this instance to obtain each record data in the database
int [] iXiaoSH = new int [12];
//Define an array to store the sales data read from the database
string [] sMoth = new string [12];
//Define an array to store the sales month read from the database
int iIndex = 0;
while (myOleDbDataReader.Read ())
{
iXiaoSH [iIndex] = myOleDbDataReader.GetInt32 (1);
sMoth [iIndex] = myOleDbDataReader.GetInt32 (0). ToString () + "month";
iIndex++;
}
//Read each data in the Table01 data table and store it In the two arrays previously defined
myConn. Close ();
myOleDbDataReader. Close ();
//Close various resources
(2). According to the obtained data, draw a picture and display it:
Through the first step, the data read from the database has been stored in the "iXiaoSH" and "sMoth" arrays. The following is the solution to draw a Bar chart based on these data? First of all, let's first understand the appearance of the data Bar graph that will be implemented in the ASP.NET page. The details can be shown in Figure 01:
Figure 01: Data Bar diagram implemented in ASP.NET
The program divides the elements shown in Figure 01 into five parts according to the area, and these five parts will be implemented in the program described later:
1. Build the whole picture
First, create a Bitmap instance, and use it to build a Graphics instance. The Graphics instance provides various drawing methods, so that various graphics can be drawn on the Bitmap instance according to the data requirements. The following code is a specific method to create a Bitmap instance in ASP.NET and use this instance to build a Graphics instance:
Bitmap bm = new Bitmap (600, 250) ;//Create a Bitmap instance Graphics g with a length of 600 and a bandwidth of 250; g = Graphics.FromImage (bm) ;//This Bitmap instance creates a Graphic instance g. Clear ( Color. Snow) ;//Fill the painting surface with Snow color as the background color
2. The title part of the text in Figure 01:
This is through the DrawString method provided in the Graphics instance to draw the specified string in the specified font, color, and location. The function of the following code is to draw the title in Figure 01:
g. DrawString ("The list of sales of XX company XX devices in 2002", new Font ("Song Ti", 16), Brushes. Black, new Point (5, 5)) ;//At the designated position on the drawing surface , To draw the specified character string in the specified font and color. Is the chart title
3. The prompt area in Figure 01, that is, the content displayed in the upper right corner of Figure 01:
To draw this part of the content, you must first locate it. You can divide the content to be drawn into three small parts:
One is the 01 "unit: million units," the text, this part of the process is relatively simple, when the values of the selected text to be output in the picture, call the method of the Graphics instance DrawString provided on it;
Second , Is to draw the small square in Figure 01, first call the DrawRectangle method in the Graphics instance to draw the specified size square with the specified color at the specified position, and then fill the small square with FillRectangle in the Graphics instance;
The third is to draw the text on the right side of the small square. The DrawString method provided in the Graphics instance should also be used, but the position coordinates and font should be changed accordingly. The following code function is to draw the content displayed in the upper right corner of Figure 01:
Point myRec = new Point (535, 30); Point myDec = new Point (560, 26) ;//The above is in Figure 01 for the following drawing positioning g. DrawString ("Unit: ten thousand sets", new Font ("Song Ti ", 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 a small square g. FillRectangle (new SolidBrush (GetColor (i)), myRec. X, myRec. Y, 20, 10) ;//Fill a small square g. DrawString (sMoth [i]. ToString (), new Font ("Song Ti", 9), Brushes. Black, myDec) ;//Draw the text on the right side of the small square myRec. Y += 15 ;myDec. Y += 15 ;}
4. According to the data read from the database, draw the data Bar chart:
This part is similar to the third part. The main difference is that the drawing position is not the same. The following code draws the data Bar graph in Figure 01 and prompts 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) + 15, 250-(iXiaoSH [i] * scale), 20, (iXiaoSH [i] * scale) + 5) ;//Draw Bar graph g. FillRectangle (new SolidBrush (GetColor (i)), (i * iBarWidth) + 15, 250-(iXiaoSH [i] * scale), 20, (iXiaoSH [i] * scale) + 5) ;//Fill the Bar graph g with the specified color. DrawString (iXiaoSH [i]. ToString (), new Font ("宋体", 9), Brushes. Black, (i * iBarWidth) + 20, 235-(iXiaoSH [i] * scale)) ;//Display the data represented by the Bar graph}
5. Draw the picture frame and form a Jpeg file format to display on the client:
To draw the picture frame, use the DrawRectangle method in the Graphics instance. As for using Jpeg format files to be displayed on the client side, it is because the Jpeg file occupies a small space, which is conducive to network transmission. The following code is to draw the border in Figure 01 and form a Jpeg file:
Pen p = new Pen ( Color.Black , 2 ) ;g . DrawRectangle ( p , 1 , 1 , 598 , 248 ) ;bm.Save ( Response . OutputStream , ImageFormat . Jpeg ) ;
four. Steps to implement data Bar diagram in ASP.NET page:
After mastering the above key steps and their solutions, it is relatively easy to implement a data bar in ASP.NET. The following are the specific steps to implement a data bar diagram in an ASP.NET page. Visual Stuido is selected as the development tool. .Net Enterprise Construction Edition, the development language adopted is C#.
1. Start Visual Studio .Net
2. After selecting the menu [File]|[New]|[Project], the [New Project] dialog box pops up
3. Set [Project Type] to [Visual C# Project]
4. Set [Template] to [ASP.NET Web Application]
5. Enter " http://localhost/Bar " in the text box of [Location] . Then click the [OK] button, so that in Visual Studio .Net, a folder named "Bar" will be created in the directory where the current project file is located, where the project files of this project are stored, and the location of other files in the project are stored It is a new folder named "Bar" in the directory where the default Web site of the computer Internet Information Service is located. The details are shown in Figure 02:
Figure 02: Create a new ASP.NET project dialog
6. Switch the current window of Visual Studio .Net to the code editing window of WebForm, namely: the editing window of the WebForm1.aspx.cs file.
7. In the header of the WebForm1.aspx.cs file, replace the code of the namespace import in WebForm1.aspx.cs with the following code:
using System ;using System. Collections ;using System. ComponentModel ;using System. Data ;using System. Drawing ;using System. Web ;using System. Web. SessionState ;using System. Web. UI ;using System. Web. UI. WebControls ;using System. Web. UI. HtmlControls; using System. Drawing. Imaging ;//The namespace where the ImageFormat class used in the following program is located using System. Data. OleDb ;//The database-related classes used in the following program are located Namespace
8. Add the following code to the Page_Load event processing code in the WebForm1.aspx.cs file. The following code is used to open the database, read the data, and use the data to form a data bar graph:
myOleDbDataReader. Close () ;//Close various resources Bitmap bm = new Bitmap (600, 250) ;//Create a Bitmap instance with a length of 600 and a bandwidth of 250 Graphics g ;g = Graphics.FromImage (bm) ;/ /This Bitmap instance creates a Graphic instance g. Clear (Color. Snow) ;//Fill the drawing surface with the Snow color as the background color g. DrawString ("××Company××Devices 2002 Sales List", new Font ("Song Ti", 16), Brushes. Black, new Point (5, 5)) ;//Draw the specified character string in the specified font and color at the specified position on the drawing surface. It is the title of the chart. // The following code is to realize the upper right part of Figure 01. Point myRec = new Point (535, 30); Point myDec = new Point (560, 26) ;//The above is drawn below in Figure 01 Positioning g. DrawString ("Unit: Ten Thousand Sets", new Font ("Song Ti", 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 a small square g. FillRectangle (new SolidBrush (GetColor (i)), myRec. X, myRec. Y, 20, 10) ;//Fill the small square g.
9. After the InitializeComponent process in the WebForm1.aspx.cs file, add the following code. The function of the following code is to define a function named GetColor. The function of this function can get the corresponding system color according to the index number:
private Color GetColor ( int itemIndex ) { Color MyColor ; int i = itemIndex ; switch ( i ) { case 0 : MyColor = Color . Cornsilk ; return MyColor ; case 1 : MyColor = Color . Red ; return MyColor ; case 2 : MyColor = Color . Yellow ; return MyColor ; case 3 : MyColor = Color . Peru ; return MyColor ; case 4 : MyColor = Color . Orange ; return MyColor ; case 5 : MyColor = Color . Coral ; return MyColor ; case 6: MyColor = Color . Gray ; return MyColor ; case 7: MyColor = Color . Maroon ; return MyColor ; case 8: MyColor = Color . Azure ; return MyColor ; case 9: MyColor = Color.AliceBlue ; return MyColor ; case 10: MyColor = Color . Bisque ; return MyColor ; case 11: MyColor = Color . BurlyWood ; return MyColor ; case 12: MyColor = Color . Chartreuse ; return MyColor ; default: MyColor = Color . Green ; return MyColor ; }}
10. At this point, after the above steps are executed correctly, all the work of implementing the data Bar diagram in the ASP.NET page is completed. After confirming that the Access database "db.mdb" created above is located in the root directory of the C drive, click the shortcut key F5, and you can get the data Bar chart as shown in Figure 01.
Fives. to sum up:
To implement various charts in ASP.NET pages, what is used is the drawing function of ASP.NET, and this function is not available in the previous version of ASP.NET. The above introduction not only introduced the method of drawing various pictures in ASP.NET, but also introduced the method of connecting to the database and reading the records one by one from the database. These methods are very useful for you to understand and master the operation of the database in ASP.NET. In the next article, I will introduce another type of chart that is often seen in browsers-pie chart, how to implement it in ASP.NET pages. If you are interested, let us see you in the next lecture!