Asp. NET Paint all introduction (ON)

Asp.net| Introduction This code is based on BETA2 development

More and more Web applications need to use charts for data display and analysis. For example: The poll results show that the company's production statistics chart shows the analysis and so on. The use of graphs to display data, with intuitive, clear and other advantages.
Traditional ASP technology does not support the drawing of graphs, then you have to use Active X or Java applets to achieve this function. The recent asp.net solves this problem by drawing a rich, dynamic chart (Figure 1) using ASP.net's class on graphic display. This article will describe how to use asp.net technology to draw bars and pie charts with Ado.net technology.
Figure 1

First, create a C # class library.
Open Vs.net and set up a insight_cs named. Webcharts the new Class library project, change the name of the solution to insight, and change the Class.cs file name to Insight_cs. WebCharts.cs, finally open Insight_cs. WebCharts.cs files. Where the code is as follows:
/* Custom class, by entering different parameters, these classes can draw different graphics.

Using System;
Using system.io;//for file access
Using system.data;//for data access
Using system.drawing;//provides basic functionality for drawing GDI + graphics
Using system.drawing.text;//provides advanced functionality for drawing GDI + graphics
Using system.drawing.drawing2d;//provides picture advanced two-dimensional, vector graphics function
Using system.drawing.imaging;//provides advanced functionality for drawing GDI + graphics
Namespace Insight_cs. Webcharts
{
public class Piechart
{
Public Piechart ()
{
}
public void Render (string title, string subtitle, int width, int height, DataSet chartData, Stream target)
{
const int side_length = 400;
const int pie_diameter = 200;
DataTable dt = chartdata.tables[0];

Get the total cardinality in the pie chart by inputting parameters
float sumdata = 0;
foreach (DataRow dr in Dt. Rows)
{
Sumdata + + convert.tosingle (dr[1]);
}
Produces an image object, and thus produces a graphics object
Bitmap BM = new Bitmap (width,height);
Graphics g = graphics.fromimage (BM);
Set properties of Object G
G.scaletransform ((Convert.tosingle (width))/side_length, (convert.tosingle (height))/side_length);
G.smoothingmode = Smoothingmode.default;
G.textrenderinghint = Textrenderinghint.antialias;

setting of canvas and Edge
G.clear (Color.White);
G.drawrectangle (pens.black,0,0,side_length-1,side_length-1);
Gao Chart Title
g.DrawString (title,new Font ("Tahoma"), Brushes.black,new PointF (5,5));
The legend of the Gao graph
g.DrawString (subtitle,new Font ("Tahoma"), Brushes.black,new PointF (7,35));
Gao Map
float Curangle = 0;
float Totalangle = 0;
for (int i=0;i<dt. rows.count;i++)
{
Curangle = convert.tosingle (dt. ROWS[I][1])/sumdata * 360;

G.fillpie (New SolidBrush (Chartutil.getchartitemcolor (i)), 100,65,pie_diameter,pie_diameter,totalangle,curangle);
G.drawpie (Pens.black,100,65,pie_diameter,pie_diameter,totalangle,curangle);
Totalangle + = Curangle;
}
Paint Case box and its text
G.drawrectangle (pens.black,200,300,199,99);
g.DrawString ("Legend", New Font ("Tahoma", 12,fontstyle.bold), Brushes.black,new PointF (200,300));

Drawing example Items
PointF boxorigin = new PointF (210,330);
PointF textorigin = new PointF (235,326);
float percent = 0;
for (int i=0;i<dt. rows.count;i++)
{
G.fillrectangle (New SolidBrush (Chartutil.getchartitemcolor (i)), boxorigin.x,boxorigin.y,20,10);
G.drawrectangle (pens.black,boxorigin.x,boxorigin.y,20,10);
Percent = convert.tosingle (dt. ROWS[I][1])/sumdata * 100;
g.drawstring (dt. Rows[i][0]. ToString () + "-" + dt. ROWS[I][1]. ToString () + "(" + percent.) ToString ("0") + "%", new Font ("Tahoma", "Brushes.black,textorigin");
BOXORIGIN.Y + 15;
TEXTORIGIN.Y + 15;
}
By Response.outputstream, the contents of the graphic are sent to the browser
Bm. Save (target, imageformat.gif);
Recycle resources
Bm. Dispose ();
G.dispose ();
}
}

Draw a bar chart
public class Barchart
{
Public Barchart ()
{
}
public void Render (string title, string subtitle, int width, int height, DataSet chartData, Stream target)
{
const int side_length = 400;
const int chart_top = 75;
const int chart_height = 200;
const int chart_left = 50;
const int chart_width = 300;
DataTable dt = chartdata.tables[0];

Calculate the highest point
float Highpoint = 0;
foreach (DataRow dr in Dt. Rows)
{
if (Highpoint<convert.tosingle (dr[1]))
{
Highpoint = Convert.tosingle (dr[1]);
}
}
Create a Graphics object instance
Bitmap BM = new Bitmap (width,height);
Graphics g = graphics.fromimage (BM);
Set bar graph and Text properties
G.scaletransform ((Convert.tosingle (width))/side_length, (convert.tosingle (height))/side_length);
G.smoothingmode = Smoothingmode.default;
G.textrenderinghint = Textrenderinghint.antialias;

Set Canvas and Edge
G.clear (Color.White);
G.drawrectangle (pens.black,0,0,side_length-1,side_length-1);
Draw a big headline
g.DrawString (title,new Font ("Tahoma"), Brushes.black,new PointF (5,5));
Draw a small title
g.DrawString (subtitle,new Font ("Tahoma"), Brushes.black,new PointF (7,35));
Draw a bar chart
float barwidth = chart_width/(dt. Rows.Count * 2);
PointF barorigin = new PointF (Chart_left + (BARWIDTH/2), 0);
float barheight = dt. Rows.Count;
for (int i=0;i<dt. rows.count;i++)
{
Barheight = convert.tosingle (dt. ROWS[I][1]) * 200/HIGHPOINT;
BARORIGIN.Y = Chart_top + chart_height-barheight;
G.fillrectangle (New SolidBrush (Chartutil.getchartitemcolor (i)), barorigin.x,barorigin.y,barwidth,barheight);
barorigin.x = barorigin.x + (BarWidth * 2);
}
Set Edge
G.drawline (New Pen (color.black,2), new Point (Chart_left,chart_top), new Point (Chart_left,chart_top + chart_height));
G.drawline (New Pen (color.black,2), new Point (Chart_left,chart_top + chart_height), new Point (Chart_left + chart_width, Chart_top + chart_height));
Paint example Boxes and text
G.drawrectangle (New Pen (color.black,1), 200,300,199,99);
g.DrawString ("Legend", New Font ("Tahoma", 12,fontstyle.bold), Brushes.black,new PointF (200,300));

Drawing example
PointF boxorigin = new PointF (210,330);
PointF textorigin = new PointF (235,326);
for (int i=0;i<dt. rows.count;i++)
{
G.fillrectangle (New SolidBrush (Chartutil.getchartitemcolor (i)), boxorigin.x,boxorigin.y,20,10);
G.drawrectangle (pens.black,boxorigin.x,boxorigin.y,20,10);
g.drawstring (dt. Rows[i][0]. ToString () + "-" + dt. ROWS[I][1]. ToString (), New Font ("Tahoma", "Brushes.black,textorigin");
BOXORIGIN.Y + 15;
TEXTORIGIN.Y + 15;
}
Output graphics
Bm. Save (target, imageformat.gif);

Resource Recycling
Bm. Dispose ();
G.dispose ();
}
}
public class Chartutil
{
Public Chartutil ()
{
}
public static Color getchartitemcolor (int itemindex)
{
Color Selectedcolor;
Switch (itemindex)
{
Case 0:
Selectedcolor = Color.Blue;
Break
Case 1:
Selectedcolor = color.red;
Break
Case 2:
Selectedcolor = Color.yellow;
Break
Case 3:
Selectedcolor = Color.purple;
Break
Default
Selectedcolor = Color.green;
Break
}
return selectedcolor;
}
}
}

Code Analysis:
1. Introduction of some namespace
Using System;
Using system.io;//for file access
Using system.data;//for data access
Using system.drawing;//provides basic functionality for drawing GDI + graphics
Using system.drawing.text;//provides advanced functionality for drawing GDI + graphics
Using system.drawing.drawing2d;//provides picture advanced two-dimensional, vector graphics function
Using system.drawing.imaging;//provides advanced functionality for drawing GDI + graphics
These namespace will be applied later.
2. Customize a namespace for Insight_cs. Webcharts, which includes two classes of Piechart and Barchart, is clear that class Piechart is built for Gao diagrams, and class Barchart is for drawing bar charts. Because class Piechart is similar to class Barchar, let's take a pie chart as an example for code analysis.
3. Class Piechart establish a method render, this method can contain some parameters. The brief description is as follows:
The argument title, which represents the large caption text above the pie chart.
Parameter subtitle that represents the small caption text above the pie chart.
Parameter Width,height, representing the size of the entire graphic.
Parameter Chardata is a DataSet object instance that is used for paint use.
The parameter target is an instance of the stream object used for graphics output.
4. To increase readability, define some constants:
const int side_length = 400;//Canvas side length
const int pie_diameter = 200;//pie chart diameter
5. Define a DataTable, which is a data table in the dataset. Each of these data is stored in a pie chart.
6. The total radix sumdata in the pie chart is obtained by calculation.
7. A Bitmap object has been created that provides memory space for the graphics to be created. And this creates a graphics object that encapsulates the GDI + drawing interface.
8. The method to invoke the Graphics object ScaleTransform (), which is used to set the graph scale.
9. Invoke method SmoothingMode (), TextRenderingHint (), etc. to set the related properties of text and graphics.
9. Set the canvas and edges.
10. Set text title, legend, Gao figure itself.
11. Through the stream, the content of the graphic is sent to the browser.
12. Final recovery of resources.

The class for this Gao diagram is complete. The method of drawing a bar chart is the same as that of a Gao diagram, which is not discussed here.
In general, the class that constructs the drawing is not as difficult as we think, and there is no sophisticated algorithm. In fact, the whole idea, as if we use a pen on paper on the same touch. The key is the use of each method and the parameter setting.