ASP.NET Chart Control Explored

In previous article we have seen how to setup chart control on html mark up. Today we are going to explore little more around the subject.

We will connect our chart control using code behind file and set some properties to see how it can change the chart just by setting few properties.

Let's get started by adding chart control to the page.

Note: When you drop chart control on ASP.NET 4.0 website Visual Studio 2010 will add <%@ Register %> tag right after <%@ Page %> directive and this is because Microsoft has tried to keep web.config file as clean as possible and by default Visual Studio will not add bunch of stuff that you are not going to use so when you need it open the web.config and add your settings which help you maintain easy and clean code. Along with this you will have to add an HTTP Handler that will process chart image requests, following code will go under <system.web> in web.config file:

<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35" validate="false"/>

 

When you drop chart control on the page your code should look like this:

<asp:Chart ID="Chart1" runat="server">

<Series>

<asp:Series Name="Series1">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

 

Now let's generate some data for chart control. In order to keep things simple, I am using Random class to generate some random data and running loop to generate dates but in real life this code can be data coming from web service or from database.

Dictionary<string, int> xyValue = new Dictionary<string, int>();

Random rnd=new Random(50);

for (int i = 0; i < 11; i++)

{

xyValue.Add(DateTime.Now.AddDays(i).ToShortDateString(), Convert.ToInt32(rnd.Next(1000)));

}

Chart1.Series[0].Points.DataBindXY(xyValue.Keys, xyValue.Values);

Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;

Chart1.ChartAreas[0].AxisX.MinorGrid.Enabled = false;

Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

Chart1.Series[0].BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.Center;

Chart1.Width = new Unit(800);

As you can see in the code, we are generating data and storing it in a Dictionary collection. Once data is added, we will add this data on Series of zero(0) index using DataBindXY.

Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;

Above line set type of chart we are going to display on the page, you can choose from following choices just by selecting chart type from SeriesChartType enumeration:

SeriesChartType.Area

SeriesChartType.Bar

SeriesChartType.BoxPlot

SeriesChartType.Bubble

SeriesChartType.Candlestick

SeriesChartType.Doughnut

SeriesChartType.ErrorBar

SeriesChartType.FastLine

SeriesChartType.FastPoint

SeriesChartType.Funnel

SeriesChartType.Kagi

SeriesChartType.Line

SeriesChartType.Pie

SeriesChartType.Point

SeriesChartType.PointAndFigure

SeriesChartType.Polar

SeriesChartType.Pyramid

SeriesChartType.Radar

SeriesChartType.Range

SeriesChartType.RangeBar

SeriesChartType.RangeColumn

SeriesChartType.Renko

SeriesChartType.Spline

SeriesChartType.SplineArea

SeriesChartType.SplineRange

SeriesChartType.StackedArea

SeriesChartType.StackedArea100

SeriesChartType.StackedBar

SeriesChartType.StackedBar100

SeriesChartType.StackedColumn

SeriesChartType.StackedColumn100

SeriesChartType.StepLine

SeriesChartType.Stock

SeriesChartType.ThreeLineBreak

 

There are more than 30 different types of chart types available for you to choose from so go ahead and poke around a little bit to find out what these different types are and I am sure you will get one that you are going to need for your data visualization.

Chart1.ChartAreas[0].AxisX.MinorGrid.Enabled = false;

Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

 

In above lines of code we are disabling major and minor grid of chart area on which our series is present.

Chart1.Series[0].BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.Center;

 

This line takes the series of zero index and apply gradient style as center on it.

Finally your code behind and chart should look like this:

protected void Page_Load(object sender, EventArgs e)

{

Dictionary<string, int> xyValue = new Dictionary<string, int>();

Random rnd=new Random(50);

for (int i = 0; i < 11; i++)

{

xyValue.Add(DateTime.Now.AddDays(i).ToShortDateString(), Convert.ToInt32(rnd.Next(1000)));

}

Chart1.Series[0].Points.DataBindXY(xyValue.Keys, xyValue.Values);

Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.ThreeLineBreak;

Chart1.ChartAreas[0].AxisX.MinorGrid.Enabled = false;

Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;

Chart1.Series[0].BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.Center;

Chart1.Width = new Unit(800);

 

}

 

Thank you.

Tags: ,

ASP.NET | MS Chart