asp.net Generate Data pie chart implementation code

Before you implement the data pie chart, make sure that you have a "db.mdb" database in the root directory of disk C, that the database is already set up, and that you have the data in the article "Implementing the Data bar diagram in the asp.net page." Here's a concrete step in asp.net to implement the data pie chart, which uses visual Studio. Net with the C # language.

1. Start visual Studio. Net.

2. Select Menu "File" | "new" | "Project", pop-up the "New Project" dialog box.

3. Set the project type to Visual C # project.

4. Set "template" to "asp.net Web application".

5. In the "Position" text box, enter "Http://localhost/Pie". Then click the OK button so that you are in visual Studio. NET creates a named "Pie" folder in the directory where the current project file resides, it holds the project file for this project, and the other files in the project are located in a new folder named "Pie" in the directory of the default Web site of the computer Internet Information Service. As shown in Figure 05:

Figure 05: Create a new asp.net Project dialog box

6. Take visual Studio. NET switch to the WebForm Code editing window, which is the edit window for the WebForm1.aspx.cs file.

7. In the WebForm1.aspx.cs file header, replace the code for importing namespaces in WebForm1.aspx.cs with the following code:

The code is as follows

Copy 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 in which the ImageFormat class is used in the following program Using System. Data. OLE DB; The namespaces that are used in the following programs for classes on databases

8. The following code is added to the Page_Load event handling code in the WebForm1.aspx.cs file, which is to open the database, read the data, and form a pie chart with this data:

The code is as follows

Copy Code

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 (); Bitmap BM = new Bitmap (600, 300); Create a bitmap instance with a length of 600 and a broadband of 300 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 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.
The following code is the implementation of the right upper region of Figure 01
The above is to draw the positioning below in Figure 01

The code is as follows

Copy Code

Point Myrec = new Point (515, 30); Point mydec = new Point (540, 30); Point mytxt = new Point (565, 30); G. DrawString ("Unit: Million Sets", New Font ("Song Body", 9), brushes. Black, new Point (515, 12)); for (int i = 0; i < smoth.length; i++) { G. FillRectangle (New SolidBrush (GetColor (i)), Myrec. X, Myrec. Y, 20, 10); Fill Small Squares G. DrawRectangle (Pens.black, Myrec. X, Myrec. Y, 20, 10); Draw 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 G. DrawString (Ixiaosh[i]. ToString (), New Font ("Song Body", 9), brushes. Black, mytxt); Myrec. Y + 15; MyDec. Y + 15; Mytxt. Y + 15; } The following code draws the fan type based on the numeric size obtained from the database, fills the fan type with the appropriate color, and/or makes up the pie chart in Figure 01 int itatal = 0; float Fcurrentangle = 0; float Fstartangle = 0; for (int i = 0; i < Ixiaosh. Length; i++) { Itatal = itatal + ixiaosh [i]; } for (int i = 0; i < Ixiaosh. Length; i++) { The following code gets the starting angle of the fan type to be drawn if (i = = Ixiaosh. LENGTH-1) { Fcurrentangle = 360-fstartangle; } Else { int itemp = Ixiaosh [i]; Fcurrentangle = (ITEMP * 360)/itatal; } Draw a fan type from a parameter G.drawpie (pens.black, MB, fstartangle, fcurrentangle); Fills a drawn fan type with the specified color G.fillpie (New SolidBrush (GetColor (i)), M, Fstartangle, Fcurrentangle); Fstartangle + = Fcurrentangle; } Draw the border of a picture Pen p = new Pen (color.black, 2); G. DrawRectangle (P, 1, 1, 598, 298); Output the data stream to the client and form a JPEG picture with this data stream Bm. Save (Response. OutputStream, ImageFormat. JPEG); 9. After the InitializeComponent process in the WebForm1.aspx.cs file, add the following code, which is the function of defining a name called the GetColor function, which gets 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; } }

At this point, all of the work on the ASP.net page to implement the data pie chart is complete after all of the above steps are executed correctly. Click on the shortcut key F5 to get the pie chart as shown in Figure 01.

Let's look at a comprehensive example

The code is as follows

The code is as follows

Copy Code

Using System; Using System.Collections; Using System.Configuration; Using System.Data; Using System.Linq; Using System.Web; Using System.Web.Security; Using System.Web.UI; Using System.Web.UI.HtmlControls; Using System.Web.UI.WebControls; Using System.Web.UI.WebControls.WebParts; Using System.Xml.Linq; Using System.Drawing; Namespace WebApplication1 { public partial class _default:system.web.ui.page { Private string[,] data = new string[6, 2]; protected void Page_Load (object sender, EventArgs e) { Drawingapic (); } private void Drawingapic () { int i; Instantiating a Bitmap object Bitmap Objbitmap; Objbitmap = new Bitmap (400, 300); Graphics Objgraphics; Instantiate the Graphics class Objgraphics = Graphics.fromimage (Objbitmap); Fill background color Objgraphics.clear (Color.White); Draw a Circle Objgraphics.drawrectangle (Pens.black, 1, 1, 398, 298); Write title Objgraphics.drawstring ("The first half of the company turnover statistics Chart", New Font ("XXFarEastFont-Arial", FontStyle.Bold), Brushes.black, New PointF (60, 5)); Get data, here simulate 6 months of company business data, the actual application can read from the database GetData (); PointF Monthcolor = new PointF (260, 40); PointF fontinfor = new PointF (285, 36); for (i = 0; i < = 5; i++) { Draw a filled rectangle Objgraphics.fillrectangle (New SolidBrush (GetColor (i)), Monthcolor. X, Monthcolor. Y, 20, 10); Draw a rectangular border. Objgraphics.drawrectangle (Pens.black, Monthcolor. X, Monthcolor. Y, 20, 10); Draw the Legend Description text--data (i, 0) Objgraphics.drawstring (data[i, 0], new Font ("XXFarEastFont-Arial,"), Brushes.black, fontinfor); Move the coordinate position and move only the Y-direction value. Monthcolor. Y + 15; Fontinfor. Y + 15; } Traverses each data source and draws a rectangular chart (that is, a column of columns) based on the size of the data. for (i = 0; I <= 5; i++) { Draw the fill rectangle. Objgraphics.fillrectangle (New SolidBrush (GetColor (i)), (I *) +, 270-system.convert.toint32 (Data[i, 1]), System . Convert.ToInt32 (Data[i, 1])); ' Draw a rectangular border line. Objgraphics.drawrectangle (Pens.black, (i *) +, 270-system.convert.toint32 (Data[i, 1]), System.Convert.ToInt32 (Data[i, 1])); } Draw the schematic coordinates Objgraphics.drawline (New Pen (Color.Blue, 1), 10, 0, 10, 320); Objgraphics.drawline (New Pen (Color.Blue, 1), 10, 270, 200, 270); Add a numeric marker to the schematic coordinates and pay attention to the calculation of the coordinates for (i = 0; I <= 5; i++) { Objgraphics.drawline (New Pen (Color.Blue, 1), I * +, I * 50 + 20); Objgraphics.drawstring ((250-i * 50). ToString (), New Font ("XXFarEastFont-Arial"), Brushes.black, I * 50 + 8); } Total statistics Sales float Scount = 0; for (i = 0; I <= 5; i++) { Scount + = float. Parse ((data[i, 1]); } Define a pie angle variable float SCG = 0; float STG = 0; for (i = 0; I <= 5; i++) { Calculates the current angle value: The month sales/Total sales * 360, the size of the month in the pie chart. float num = float. Parse (Data[i, 1]); SCG = (num/scount) * 360; Draw a filled arc. Objgraphics.fillpie (GetColor (i)), SolidBrush, STG, SCG); Draw the arc line. Objgraphics.drawpie (Pens.black, STG, SCG); Add the current arc angle to the general angle. STG + = SCG; } Draw a descriptive text Objgraphics.drawstring ("Histogram", New Font ("XXFarEastFont-Arial", FontStyle.Bold), Brushes.blue, 50, 272); Objgraphics.drawstring ("Pie chart", New Font ("Song Body", "fontstyle.bold"), Brushes.blue, 250, 272); Output to Client Objbitmap. Save (Response.outputstream, System.Drawing.Imaging.ImageFormat.Gif); } assigning values to arrays That is, generating simulated business data private void GetData () { Data[0, 0] = "January"; data[1, 0] = "February"; data[2, 0] = "March"; Data[3, 0] = "April"; Data[4, 0] = "May"; Data[5, 0] = "June"; Data[0, 1] = "85"; Data[1, 1] = "135"; Data[2, 1] = "85"; Data[3, 1] = "110"; Data[4, 1] = "130"; Data[5, 1] = "200"; } Produces color values for easy display of differences Private Color getcolor (int i) { Color Newcolor; i + 1; if (i = = 1) { Newcolor = Color.Blue; } else if (i = = 2) { Newcolor = Color.forestgreen; } else if (i = = 3) { Newcolor = Color.gainsboro; } else if (i = = 4) { Newcolor = Color.moccasin; } else if (i = = 5) { Newcolor = Color.indigo; } else if (i = = 6) { Newcolor = Color.burlywood; } Else Newcolor = Color.goldenrod; return newcolor; } } }