Charts For Asp.Net Application
Introduction:
In this article we will learn how to create a chart for our ASP.NET application.
Background:
Here we will see how to draw chart for our data in Asp.Net. Here we are using some third party control to draw our chart. This is one .dll file somewhere I found it on Google search. It’s not my .dll. This .dll file provide various type of chart ex. LineChart, PieChart, CircleChart etc…
To prepare chart using this .dll file follow the steps given following.
Step 1:
Start new web-site give the name as ChartInAsp.Net. It will give you one Default.aspx and .cs file.
Step 2:
Download source code and copy the Webchart.dll file from bin directory to some location. Now add reference to this WebChart.dll file.
Step 3:
Now Register this dll in your Page directory of like given bellow. And get the Chart control from this dll.
<%@ Register TagPrefix="Web" Namespace="WebChart" Assembly="WebChart" %>
<Web:ChartControl ID="ChartControl1" runat="Server" Height="366px"
Width="500px" />
Step 4:
Now move to Design view and see the Chart control is created. Like bellow. Whenever we are creating this control the chart is default LineChart you can change it other type by setting it’s type property in property window/ in .cs file. We will see how to change it again in.cs file.
Step 5:
Now move to .cs file and Import the WebChart namespace like bellow.
using WebChart;
Step 6:
Now get your Data from database or prepare onfly Dataset or DataTable.
// Preparing Data Source For Chart Control
DataTable dt = new DataTable("Chart");
DataColumn dc = new DataColumn("Year", typeof(int));
DataColumn dc1 = new DataColumn("Aveg", typeof(double));
dt.Columns.Add(dc);
dt.Columns.Add(dc1);
DataRow dr = dt.NewRow();
dr[0] = 1995;
dr[1] = 10.5;
dt.Rows.Add(dr);
DataRow dr1 = dt.NewRow();
dr1[0] = 2000;
dr1[1] = 11.5;
dt.Rows.Add(dr1);
Step 7:
Now bind this data to chart control. Here you can choose your choice chart ex. LineChart,CircleChart or PieChart etc… Here we will bind the data to our LineChart and coloring this chart as follows.
//Chart type you can change chart type here ex. pie chart,circle chart
LineChart chart = new LineChart();//Class instance for LineChart
chart.Fill.Color = Color.FromArgb(50, Color.SteelBlue);
chart.Line.Color = Color.SteelBlue;
chart.Line.Width = 2;
chart.Legend = "X Axis: Year.\nY Axis: Average";
//looping through datatable and adding to chart control
foreach (DataRow dr2 in dt.Rows)
{
chart.Data.Add(new ChartPoint(dr2["Year"].ToString(), (float)System.Convert.ToSingle(dr2["Aveg"])));
}
ConfigureColors();
ChartControl1.Charts.Add(chart);
ChartControl1.RedrawChart();
Step 8:
The ConfigureColors Method to coloring our chart.
private void ConfigureColors()
{
ChartControl1.Background.Color = Color.FromArgb(75, Color.SteelBlue);
ChartControl1.Background.Type = InteriorType.LinearGradient;
ChartControl1.Background.ForeColor = Color.SteelBlue;
ChartControl1.Background.EndPoint = new Point(500, 350);
ChartControl1.Legend.Position = LegendPosition.Bottom;
ChartControl1.Legend.Width = 40;
ChartControl1.YAxisFont.ForeColor = Color.SteelBlue;
ChartControl1.XAxisFont.ForeColor = Color.SteelBlue;
ChartControl1.ChartTitle.Text = "GRAPH EXAMPLE IN ASP.NET";
ChartControl1.ChartTitle.ForeColor = Color.White;
ChartControl1.Border.Color = Color.SteelBlue;
ChartControl1.BorderStyle = BorderStyle.Ridge;
}
Step 9:
Now run your application it will show nice chart Control to you. This dll will create on WebCharts folder in your application Directory for storing chart Images.
Conclusion:
In this way you can prepare different type of chart for you Asp.Net application.
