Charting Controls Now Built-into .NET 4

Introduction

With .NET 3.5 we had to separately download the chart controls and add them into your application.

You could only use the Chart Controls if you are developing an ASP.NET website on the .NET Framework 3.5 SP1 or above version. Moreover, in order to use the Chart Controls you must first download and install those, as they are not included as part of Visual Studio 2008 SP1.

Chart control built-into .NET ASP.NET 4.0

With .NET 4 these controls are now built-into ASP.NET 4 and Windows Forms 4 – which means you can immediately take advantage of them out of the box (no separate download or registration required). 

The control includes the following features:

• 35 distinct chart types.
• An unlimited number of chart areas, titles, legends, and annotations.
• A wide variety of appearance settings for all chart elements.
• 3-D support for most chart types.
• Smart data labels that can automatically fit around data points.
• Strip lines, scale breaks, and logarithmic scaling.
• More than 50 financial and statistical formulas for data analysis and transformation.
• Simple binding and manipulation of chart data.
• Support for common data formats such as dates, times, and currency.
• Support for interactivity and event-driven customization, including client click events using Ajax.
• State management.
• Binary streaming.
• The following figures show examples of  charts that are produced by the ASP.NET Chart control

The Following features can be used in ASP.NET Application

1. All supported chart types.
2. Data series, chart areas, axes, legends, labels, titles, and more.
3. Data Binding
4. Data manipulation, such as copying, splitting, merging, alignment, grouping, sorting, searching, filtering, and more.
5. Statistical formulas and financial formulas.
6. Advanced chart appearance, such as 3D, anti-aliasing, lighting, perspective, and more.
7. Chart rendering.
8. Events and Customizations.
9. Interactivity and AJAX.

We can render the chart as a stream, image or image map. Also the image format/type is either  jpeg, png, gif etc.

Here I am creating two simple Applications

1. Creating Column chart (2D and 3D) from  XML file.
2. Create  Line chart(2D and 3D)  by configuring ‘ChartArea’ section of the control from the source page .

Some Terminology

Below picture shows some of the terminology used while drawing the chart.

Lets create some real time chart now.

Steps to create Column Chart Control

1. Create empty web Application project.
2. Add XML file to the project. Add the following data to XML File.

<?xml version="1.0" encoding="utf-8" ?>
<root>
<City>
<name>Delhi</name>
<temperaturemax>47</temperaturemax>
<temperaturemin>4</temperaturemin>
</City>
<City>
<name>Bombay</name>
<temperaturemax>32</temperaturemax>
<temperaturemin>16</temperaturemin>
</City>
<City>
<name>Calcutta</name>
<temperaturemax>40</temperaturemax>
<temperaturemin>20</temperaturemin>
</City>
<City>
<name>Chennai</name>
<temperaturemax>45</temperaturemax>
<temperaturemin>19</temperaturemin>
</City>
<City>
<name> Lucknow</name>
<temperaturemax>47</temperaturemax>
<temperaturemin>4</temperaturemin>
</City> 
</root>

3.Add new web form to the Project as ChartFromXML .Drag Chart Control to the form. By default it takes Chart type as Column. Select Chart Type from the available 35 types of Chart Control.

4.Add the following code in Page_Load method in the code behind.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
System.Data.DataSet ds = new System.Data.DataSet();
string path = Server.MapPath("~/TempFile.xml");
ds.ReadXml(path);
Chart1.DataSource = ds;
Chart1.Height = 400;
Chart1.Width = 600;
Chart1.Series[0].XValueMember = ds.Tables[0].Columns[0].ToString();
Chart1.Series[0].YValueMembers = ds.Tables[0].Columns[1].ToString();
Chart1.Series.Add("Series2");
Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;
 
Chart1.Series["Series2"].XValueMember = ds.Tables[0].Columns[0].ToString();
Chart1.Series["Series2"].YValueMembers = ds.Tables[0].Columns[2].ToString();
Chart1.Titles.Add("Title1");
Chart1.Titles["Title1"].Text = "Temperature Month Table";
Chart1.ChartAreas["ChartArea1"].AxisX.Title = "City";
Chart1.ChartAreas["ChartArea1"].AxisY.Title = "Temperature";
}
}

Lets discuss the above code

The Dataset reads the XML  Document. Chart DataSource is set to Dataset.

We add Series[0] and set the ‘Name’ and ‘temperaturemax’ of each month as X and Y axis value. After that we add another series (‘Series2’) within the same chart and set ‘Name’ and ‘temperaturemin’ of each month as X and Y axis value.

Here we show max and min temperature of city.

Bind First Series

  Chart1.Series[0].XValueMember = ds.Tables[0].Columns[0].ToString();
  Chart1.Series[0].YValueMembers = ds.Tables[0].Columns[1].ToString();

Bind Second Series

   Chart1.Series.Add("Series2");
   Chart1.Series["Series2"].XValueMember =  ds.Tables[0].Columns[0].ToString();
   Chart1.Series["Series2"].YValueMembers =  ds.Tables[0].Columns[2].ToString();

   
To Add Title

   Chart1.Titles.Add("Title1");
   Chart1.Titles["Title1"].Text = "Temperature Month Table";
   Chart1.ChartAreas["ChartArea1"].AxisX.Title = "City";
   Chart1.ChartAreas["ChartArea1"].AxisY.Title = "Temperature";

Output—2D Column Chart

Output-3D Column Chart

The same Chart can be converted to 3D by simply making Enable3D=”true”  in Chartarea portion in ChartFromXML.aspx.

<chartareas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="true" />
</asp:ChartArea>
</chartareas>

As you can see 3D Charts are visually appealing. Yellow column shows Min. temperature of different cities and Blue Column shows Max temperature of different cities.

Steps to create Line Chart Control 

 1. Add new web form to the Project as DesignTimeLineChart .
 2 .Drag Chart Control to the form. By default it takes Chart type as Column.
 3. Right click on Chart smart tag and make Chart Type as Line.
 4. In DesignTimeLineChart.aspx Copy Paste the entire below code in ‘ChartArea’ section of the control from the source page.

<asp:Chart ID="Chart2" runat="server" BackColor="Aqua" Height="400px" Width="600px">
<Titles>
<asp:Title Text="Temperature Chart of Cities" ForeColor="Red" />
</Titles>
<Legends>
<asp:Legend Name="DefaultLegend" Docking="Top" />
</Legends>
<ChartAreas>
<asp:ChartArea Name="MainChart">
<Area3DStyle Enable3D="FALSE" WallWidth="10" />
<InnerPlotPosition X="10" Y="10" Height="80" Width="80" />
<AxisX Title="Month" Interval="1">
<LabelStyle Enabled="true" />
<MajorGrid LineWidth="1" />
<CustomLabels>
<asp:CustomLabel FromPosition="0.5" ToPosition="1.5" Text="Delhi" />
<asp:CustomLabel FromPosition="1.5" ToPosition="2.5" Text="Bombay" />
<asp:CustomLabel FromPosition="2.5" ToPosition="3.5" Text="Calcutta" />
<asp:CustomLabel FromPosition="3.5" ToPosition="4.5" Text="Chennai" />
<asp:CustomLabel FromPosition="4.5" ToPosition="5.5" Text="Lucknow" />
</CustomLabels>
</AxisX>
<AxisY Title="Temperature in Deg. Celcius">
<LabelStyle Enabled="true" />
<MajorGrid LineWidth="1" />
<CustomLabels>
<asp:CustomLabel FromPosition="0.5" ToPosition="10.5" Text="10" />
<asp:CustomLabel FromPosition="10.5" ToPosition="20.5" Text="20" />
<asp:CustomLabel FromPosition="20.5" ToPosition="30.5" Text="30" />
<asp:CustomLabel FromPosition="30.5" ToPosition="40.5" Text="40" />
<asp:CustomLabel FromPosition="40.5" ToPosition="50.5" Text="50" />
</CustomLabels>
</AxisY>
</asp:ChartArea>
</ChartAreas>
<Series>
<asp:Series Name="Maximum Temperature" ChartArea="MainChart" ChartType="Line">
<Points>
<asp:DataPoint XValue="1" YValues="22" />
<asp:DataPoint XValue="2" YValues="33" />
<asp:DataPoint XValue="3" YValues="44" />
<asp:DataPoint XValue="4" YValues="55" />
<asp:DataPoint XValue="5" YValues="66" />
</Points>
</asp:Series>
<asp:Series Name="Minimum Temperature" Legend="DefaultLegend" ChartType="Line" ChartArea="MainChart">
<Points>
<asp:DataPoint XValue="1" YValues="11"></asp:DataPoint>
<asp:DataPoint XValue="2" YValues="15"></asp:DataPoint>
<asp:DataPoint XValue="3" YValues="25"></asp:DataPoint>
<asp:DataPoint XValue="4" YValues="35"></asp:DataPoint>
<asp:DataPoint XValue="5" YValues="65"></asp:DataPoint>
</Points>
</asp:Series>
</Series>
</asp:Chart>

Lets discuss the above code

1. AxisX and AxisY custom labels have been defined.
2. Series “Maximum Temperature” and “Minimum Temperature” have  been defined.
Now simple run the application.

Output—2D Chart Line Chart

Conclusion