Asp.net graph (line chart) code detailed comment

Copy codeThe Code is as follows:
Using System;
Using System. Collections;
Using System. Configuration;
Using System. Data;
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;
// Add a drawing class
Using System. Drawing. Drawing2D;
Using System. Drawing. Imaging;
Using System. Drawing;
Using System. IO;
Using System. Data. SqlClient;
Public partial class Curve_Default: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
If (! IsPostBack)
{
Get_CurveData ();
}
}
// Obtain data
Public void Get_CurveData ()
{
SqlConnection conn = null;
Try
{
Conn = CommonFunction. CreateDBTest ();
Conn. Open ();
SqlCommand cmd = conn. CreateCommand ();
String sqlStr = "SELECT * from curve order by testdate ";
DataTable dt = CommonFunction. ExecuteDatable (conn, cmd, CommandType. Text, sqlStr, null );
Draw (dt );
}
Catch (Exception exp)
{
Response. Write (exp. Message );
}
Finally
{
If (conn! = Null)
Conn. Close ();
}
}
Public void draw (DataTable dt)
{
// Obtain the number of records
Int count = dt. Rows. Count;
// Calculate the chart width
Int wd = 80 + 20*(count-1 );
// Set the minimum width to 800
If (wd <600) wd = 600;
// Generate a Bitmap object
Bitmap img = new bitmaps (wd, 400 );
// Generate a Drawing Object
Graphics g = Graphics. FromImage (img );
// Define the black paint brush
Pen Bp = new Pen (Color. Black );
// Define the red paint brush
Pen Rp = new Pen (Color. Red );
// Defines the silver-gray paint brush
Pen Sp = new Pen (Color. Silver );
// Define the title Font
Font Bfont = new Font ("Arial", 12, FontStyle. Bold );
// Define a general font
Font font = new Font ("Arial", 6 );
// Define the font of the big point
Font Tfont = new Font ("Arial", 9 );
// Define the abscissa interval (the best value is the total width-left blank width [required on the left and right])/(number of records-1)
Int xSpace = (wd-100)/(count-1 );
// Define the ordinate interval, which cannot be modified at will. It is related to the height and the number of the horizontal coordinate lines. The best value is = (leave the height above-leave it blank below)
Int ySpace = 30;
// Maximum ordinate value and interval value
Int yMaxValue = 30;
// Draw the background color
G. DrawRectangle (new Pen (Color. White, 400), 0, 0, img. Width, img. Height );
// Define the black transition paint brush
LinearGradientBrush brush = new LinearGradientBrush (new Rectangle (0, 0, img. Width, img. Height), Color. Black, Color. Black, 1.2F, true );
// Define the blue transition paint brush
LinearGradientBrush Bluebrush = new LinearGradientBrush (new Rectangle (0, 0, img. Width, img. Height), Color. Blue, Color. Blue, 1.2F, true );
// Draw a large title
G. DrawString ("test curve chart", Bfont, brush, 40, 5 );
// Create an information briefing
String info = "curve generation time:" + DateTime. Now. ToString ();
G. DrawString (info, Tfont, Bluebrush, 40, 25 );
// Draw the image border
G. DrawRectangle (Bp, 0, 0, img. Width-1, img. Height-1 );
// Draw the vertical axis
G. DrawLine (Bp, 40, 55, 40,360 );
// Draw 60 of the x-axis x2, which is the left-side empty part.
G. DrawLine (Bp, 40,360, 60 + xSpace * (count-1), 360 );
// Draw the vertical coordinate title
G. DrawString ("test value", Tfont, brush, 5, 40 );
// Draw the abscissa title
G. DrawString ("test time", Tfont, brush, 40,385 );
// Draw the vertical coordinate line
For (int I = 0; I <count; I ++)
{
G. DrawLine (Sp, 40 + xSpace * I, 60, 40 + xSpace * I, 360 );
}
// Draw the timeline coordinate tag
For (int I = 0; I <count; I ++)
{
String st = Convert. ToDateTime (dt. Rows [I] ["testdate"]). ToString ("MM: dd ");
G. DrawString (st, font, brush, 30 + xSpace * I, 370 );
}
// Draw the abscissa line
For (int I = 0; I <10; I ++)
{
G. DrawLine (Sp, 40, 60 + ySpace * I, 40 + xSpace * (count-1), 60 + ySpace * I );
// The value interval of the x-axis is the maximum value divided by the number of intervals.
Int s = yMaxValue-I * (yMaxValue/10 );
// Draw the dispatch axis coordinate label
G. DrawString (s. ToString (), font, brush, 10, 60 + ySpace * I );
}
// Define the ordinate unit value = the maximum ordinate value/the maximum scalar value (300/30)
Int yAveValue = 10;
// Define the curve turning point
Point [] p = new Point [count];
For (int I = 0; I <count; I ++)
{
P [I]. X = 40 + xSpace * I;
P [I]. Y = 360-Convert. ToInt32 (dt. Rows [I] ["testvalue"]) * yAveValue;
}
// Draw a line chart
// G. DrawLines (Rp, p );
// Draw a graph
// G. DrawCurve (Rp, p );
// Draw a custom tension curve (0.5F is the tension value, which is the default value)
G. DrawCurve (Rp, p, 0.5F );
// When you need to draw multiple curves in one worker, define multiple point arrays and draw them out.
For (int I = 0; I <count; I ++)
{
// Draw the number of sending records
G. drawString (dt. rows [I] ["testvalue"]. toString (), font, Bluebrush, p [I]. x, p [I]. y-10 );
// Draw the sending Record Point
G. DrawRectangle (Rp, p [I]. X-1, p [I]. Y-1, 2, 2 );
}
// Save the drawn Image
MemoryStream stream = new MemoryStream ();
Img. Save (stream, ImageFormat. Jpeg );
// Image output
Response. Clear ();
Response. ContentType = "image/jpeg ";
Response. BinaryWrite (stream. ToArray ());
}
}
The data table content is very simple. There are two fields: testValue and testDate. Because the ordinate values of the graph have the maximum value, the value of testValue cannot exceed 30. Of course, you can adjust the unit or height of the coordinate axis.
12 0:00:00
9 0:00:00
20 0:00:00
18 0:00:00
27 0:00:00
8 0:00:00
15 0:00:00
25 0:00:00
23 2009-1-5 0:00:00