asp.net drawing graphs (line chart) Code Detail Comments _ Practical Tips

Source: Internet
Author: User
Tags comments
Copy Code code 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 Paint 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 ();
}
}
Get 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)
{
Get the number of records
int count = dt. Rows.Count;
Count Chart width
int WD = + * (count-1);
Set minimum width of 800
if (WD <) WD = 600;
Generating bitmap pairs of image
Bitmap img = new Bitmap (WD, 400);
Generate a drawing pair like
Graphics g = Graphics.fromimage (IMG);
Define a black brush
Pen Bp = new Pen (color.black);
Define a red brush
Pen Rp = new Pen (color.red);
Define silver-gray brushes
Pen Sp = new Pen (color.silver);
Define font for large headings
Font bfont = new Font ("Arial", fontstyle.bold);
Defining generic Fonts
Font font = new Font ("Arial", 6);
Define a larger font
Font Tfont = new Font ("Arial", 9);
Define the horizontal coordinate interval (the best value is the total width-blank width [required on both sides])/(Number of records-1)
int xspace = (wd-100)/(COUNT-1);
Define ordinate intervals, can not be arbitrarily modified, with the height and axis line of the number of related, the best value = (the height of the drawing-the above blank-the following blank)
int yspace = 30;
Ordinate maximum and interval values
int ymaxvalue = 30;
Draw an undertone
G.drawrectangle (New Pen (Color.White,), 0, 0, IMG. Width, IMG. Height);
Define a black gradient brush
LinearGradientBrush brush = new LinearGradientBrush (new Rectangle (0, 0, IMG). Width, IMG. Height), Color.Black, Color.Black, 1.2F, true);
Define a blue gradient brush
LinearGradientBrush Bluebrush = new LinearGradientBrush (new Rectangle (0, 0, IMG). Width, IMG. Height), Color.Blue, Color.Blue, 1.2F, true);
Draw large headings
g.DrawString ("Test graph", Bfont, Brush, 40, 5);
Draw Information Bulletin
String info = "Graph generation time:" + DateTime.Now.ToString ();
g.DrawString (info, Tfont, Bluebrush, 40, 25);
Draw a picture border
G.drawrectangle (Bp, 0, 0, img.) Width-1, IMG. HEIGHT-1);
Draw a vertical axis
G.drawline (Bp, 40, 55, 40, 360);
Draw the horizontal axis x2 60 is the right side vacated part
G.drawline (Bp, 360, + xspace * (count-1), 360);
Draw Vertical Coordinate title
g.DrawString ("Test Values", Tfont, Brush, 5, 40);
Draw the horizontal axis title
g.DrawString ("Test Time", Tfont, Brush, 40, 385);
Draw vertical Coordinate lines
for (int i = 0; i < count; i++)
{
G.drawline (Sp, + xspace * I, p, + xspace * I, 360);
}
Draw a timeline coordinate label
for (int i = 0; i < count; i++)
{
String st = convert.todatetime (dt. rows[i]["TestDate"]). ToString ("Mm:dd");
g.DrawString (St, font, brush, + xspace * I, 370);
}
Draw the horizontal line
for (int i = 0; i < i++)
{
G.drawline (Sp, + yspace * I, + xspace * (count-1), + yspace * i);
The value interval of the horizontal axis is the maximum divided by the number of intervals
int s = ymaxvalue-i * (YMAXVALUE/10);
Draw send axis coordinates label
g.DrawString (s.tostring (), font, brush, ten, + yspace * i);
}
Define ordinate unit values = ordinate maximum/scalar maximum (300/30)
int yavevalue = 10;
Defining curve turning points
Point[] p = new Point[count];
for (int i = 0; i < count; i++)
{
P[i]. X = + + Xspace * i;
P[i]. Y = 360-convert.toint32 (dt. rows[i]["TestValue"]) * yavevalue;
}
Draw a line chart
G.drawlines (Rp, p);
Drawing graphs
G.drawcurve (Rp, p);
Draw the graph of the custom tension (0.5F is the tension value, the default is this value)
G.drawcurve (Rp, p,0.5f);
When you need to draw multiple curves in a diagram, define a point array and then draw it.
for (int i = 0; i < count; i++)
{
To draw the amount of traffic sent to a record point
g.drawstring (dt. rows[i]["TestValue"]. ToString (), Font, Bluebrush, P[i]. X, P[i]. Y-10);
Draw Send record point
G.drawrectangle (Rp, P[i]. X-1, P[i]. Y-1, 2, 2);
}
Save a drawn picture
MemoryStream stream = new MemoryStream ();
Img. Save (stream, imageformat.jpeg);
Picture output
Response.Clear ();
Response.ContentType = "Image/jpeg";
Response.BinaryWrite (stream. ToArray ());
}
}
The content of the datasheet is very simple, there are two fields: TestValue and TestDate, because the graph has the maximum ordinate, so the TestValue value can not exceed 30, of course, you can adjust the axis of the unit or height.
12 2008-12-1 0:00:00
9 2008-12-5 0:00:00
20 2008-12-10 0:00:00
18 2008-12-15 0:00:00
27 2008-12-20 0:00:00
8 2008-12-25 0:00:00
15 2008-12-30 0:00:00
25 2009-1-1 0:00:00
23 2009-1-5 0:00:00
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.