More and more Web applications require charts for data display and analysis.
For example, the voting result is displayed, and the company's production Statistical Chart is displayed and analyzed. Charts are used to display data, which is intuitive and clear.
Traditional ASP technology does not support drawing charts, so you have to use Active X or Java applets to implement this function. ASP. NET solves this problem. As long as you use ASP. NET's Graph Display classes, you can draw a wide range of dynamic charts (1 ). This article describes how to use ASP. NET technology and ADO. NET technology to draw bar charts and pie charts.
Figure 1
First, create a c # class library.
Open vs.net, create a new Class library project named Insight_cs.WebCharts, change the solution name to Insight, change the Class. cs file name to Insight_cs.WebCharts.cs, and finally open the Insight_cs.WebCharts.cs file. The Code is as follows:
/* Custom classes. By entering different parameters, these classes can draw different images */
Using System;
Using System. IO; // used for File Access
Using System. Data; // used for Data access
Using System. Drawing; // provides basic functions for Drawing GDI + graphics.
Using System. Drawing. Text; // provides advanced functions for Drawing GDI + graphics.
Using System. Drawing. Drawing2D; // provides advanced 2D and vector graphics Functions.
Using System. Drawing. Imaging; // provides advanced functions 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];
// Input parameters to obtain the total base in the pie chart
Float sumData = 0;
Foreach (DataRow dr in dt. Rows)
{
SumData + = Convert. ToSingle (dr [1]);
}
// Generate an image object and generate a Graphics object
Bitmap bm = new Bitmap (width, height );
Graphics g = Graphics. FromImage (bm );
// Set the properties of object g
G. ScaleTransform (Convert. ToSingle (width)/SIDE_LENGTH, (Convert. ToSingle (height)/SIDE_LENGTH );
G. SmoothingMode = SmoothingMode. Default;
G. TextRenderingHint = TextRenderingHint. AntiAlias;
// Canvas and edge settings
G. Clear (Color. White );
G. DrawRectangle (Pens. Black, SIDE_LENGTH-1, SIDE_LENGTH-1 );
// Pie chart title
G. DrawString (title, new Font ("Tahoma", 24), Brushes. Black, new PointF (5, 5 ));
// Pie chart legend
G. DrawString (subTitle, new Font ("Tahoma", 14), Brushes. Black, new PointF (7,35 ));
// Pie chart
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;
}
// Draw the legend box and text
G. DrawRectangle (Pens. Black, 200,300,199, 99 );
G. DrawString ("Legend", new Font ("Tahoma", 12, FontStyle. Bold), Brushes. Black, new PointF (200,300 ));
// Draw legend 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])/consumer data * 100;
G. drawString (dt. rows [I] [0]. toString () + "-" + dt. rows [I] [1]. toString () + "(" + percent. toString ("0") + "%)", new Font ("Tahoma", 10), Brushes. black, textOrigin );
BoxOrigin. Y + = 15;
TextOrigin. Y + = 15;
}
// Send the image content to the browser through Response. OutputStream
Bm. Save (target, ImageFormat. Gif );
// Reclaim 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 character height = 200;
Const int CHART_LEFT = 50;
Const int CHART_WIDTH = 300;
DataTable dt = chartData. Tables [0];
// Calculate the highest Vertex
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 graph and text attributes
G. ScaleTransform (Convert. ToSingle (width)/SIDE_LENGTH, (Convert. ToSingle (height)/SIDE_LENGTH );
G. SmoothingMode = SmoothingMode. Default;
G. TextRenderingHint = TextRenderingHint. AntiAlias;
// Set the canvas and edge
G. Clear (Color. White );
G. DrawRectangle (Pens. Black, SIDE_LENGTH-1, SIDE_LENGTH-1 );
// Draw a large title
G. DrawString (title, new Font ("Tahoma", 24), Brushes. Black, new PointF (5, 5 ));
// Draw a title
G. DrawString (subTitle, new Font ("Tahoma", 14), 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 the 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 ));
// Draw a legend box and text
G. Draw