This is the second part of .Net chart control and this is going to cover some advanced topic. Please go thorugh Microsoft Chart Control Tutorial before you continue this.

Introduction

In this tutorial we will discuss some advanced features on .Net chart control. As our previous tutorial covers the basics of chart control, we will not discuss those same things over here. Here we focus on the advanced features primarily based on two examples:
1. Creating .Net chart from the data of an XML file
2. Creating .Net chart only by configuring ‘ChartArea’ sectionof the control from the source page
Both of these two examples also show you different features of .Net chart .

Displaying XML data using .Net chart

We are going to mention the steps one by one to create the same things in your machine for practice:

a. First we will add an XML file in our existing project. Right click on the ‘ChartExample’ (the same project created in the last example) in the solution explorer and click ‘Add New Item’ and select ‘XML File’ like Figure-1:

Figure-1: Adding ‘XMLFile.XML’ in the project

b. Add the following data as shown in the snapshot in the XML file:

Figure-2: Data for the XML file

Here we have added the maximum and minimum temperature for a region from the month January to June. Don’t forget to add the ‘’ element otherwise you will encounter an XML exception later.

c. Add another web page in the project and rename it as ‘FromXML.aspx’
d. In the design section drag and drop a Microsoft Chart control from the toolbox.
e. In the code behind page (FromXML.aspx.cs) add the following code within the ‘Page_Load()’ event:

Figure-3: Code within the ‘Page_Load()’ event

Let’s discuss few things about the code mentioned above:
The Dataset gets the XML document using ReadXML() function. You just need to specify the location correctly. Here we will show the maximum and minimum temperature of a region as bar chart. So we need two series with same X axis value within a chart.

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. Please have a look on Figure-4 and Figure-5 for more clarification.

Figure-4: Binding the first series

Figure-5: Binding the second series

Although data is required for a chart but ‘Title’ is also necessary for better understanding. They can be added in design time as well as at run time. Here we have added title to the chart and the axes (Figure-6 )

Figure-6: Setting the title of the chart and axes

f. Now run the application by setting this as start page you will find the output as shown in Figure-7.

Figure-7: Output with axes and chart title added

g. Sometimes in order to better execution of the details and to reduce the chart size it may be necessary to change the maximum and minimum for the axes. For example the graph shown in Figure-7 has used the default 0 and 50 as minimum and maximum for Y axis. This could be changed by using the maximum and minimum properties of Y axis as shown in Figure-8:

Figure-8: Changing the maximum and minimum for Y axis

Now we will get the chart like Figure-9 on run time

Figure-9: Output with changed minimum and maximum for Y axis

Creating .Net chart by configuring ‘ChartArea’ section

In this example we are going to plot another temperature –month graph but it will be a line graph. Here we will design it totally at design time. Please follow the mentioned steps again to recreate the application

a. Add a new web page in our existing project and rename it as ‘FromChartArea.aspx’
b. In the design section drag and drop a Microsoft Chart control from the toolbox.
c. Here we will build the chart totally at design time.
d. First we will change the default backcolor and height, width of the chart. Change the first line of the chart control from the ‘Source’ window like the following:

<asp:Chart ID=”TempChartData” runat=”server”  BackColor=”Aqua” Height=”400px” Width=”400px”>

e. Now we will add the title and default legend for the graph with the following lines:

<Titles>

<asp:Title Text=”Monthwise Temperature Chart” ForeColor=”Red” />

</Titles>

<Legends>

<asp:Legend Name=”DefaultLegend” Docking=”Top” />

</Legends>

We can add multiple ‘Title’ and ‘Legend’ for our graph. We will show how the ‘Legend’ appears in a graph later in this example.

f. Now we will add the ‘ChartArea’ object which set up the charting area. This area contains the name of the charting region which is important because a chart can have multiple charting areas and series object.

<ChartAreas><asp:ChartArea Name=”MainChart”>

<InnerPlotPosition X=”10″ Y=”10″ Height=”80″ Width=”80″ />

The ‘InnerPlotPosition’ specifies the region of the charting area to render the chart itself in.

g. In this step we will configure the X and Y axes according to our preference and then close our ‘ChartArea’. Add the following lines now. We will explain the meaning for each line below:

<AxisX Title=”Month”>

<LabelStyle Enabled=”true”  />

<MajorGrid LineWidth=”1″ />

<CustomLabels>

<asp:CustomLabel FromPosition=”0.5″ ToPosition=”1.5″ Text=”Jan” />

<asp:CustomLabel FromPosition=”1.5″ ToPosition=”2.5″ Text=”Feb” />

<asp:CustomLabel FromPosition=”2.5″ ToPosition=”3.5″ Text=”Mar” />

<asp:CustomLabel FromPosition=”3.5″ ToPosition=”4.5″ Text=”Apr” />

<asp:CustomLabel FromPosition=”4.5″ ToPosition=”5.5″ Text=”May” />

</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>

The ‘Title’ beside AxisX and AxisY sets the title for these two axes. We can also set the line color and other properties over here. The ‘LabelStyle’ object specifies settings to use for labels that will be appeared within the chart. The ‘MajorGrid’ specifies whether to draw a line for the major X or Y value and ‘LineWidth’ specifies the width of that line. The chart control automatically determine the major values to draw the grid lines. However we can override this feature to include those lines we prefer.

The .Net chart control provides the control to create custom labels along X and Y axes. We have taken decimal values because the X and Y values are double. So if we specify a value 25 , it may be either 24.9999999999 or 25.0000000001 and both of these is not perfect. That’s why it is good to use a decimal value.

After that we have closed the ‘ChartAreas’ for our chart control

h. Next we will add the ‘Series’ and ‘DataPoints’ in our chart. ‘ Series ‘ refers the reference object and ‘DataPoints’ represent actual data range. Here again we show the maximum and minimum temperature of a region in ‘Line Chart’ format. So we need to add two series (one for maximum and another for minimum)
So just add the mentioned lines to complete the example:

<Series>

<asp:Series Name=”Maximum Temperature” ChartArea=”MainChart” ChartType=”Line”>

<Points>

<asp:DataPoint XValue=”1″ Yvalues=”28″  />

<asp:DataPoint XValue=”2″ Yvalues=”33″ />

<asp:DataPoint XValue=”3″ Yvalues=”35″ />

<asp:DataPoint XValue=”4″ Yvalues=”40″ />

<asp:DataPoint XValue=”5″ Yvalues=”43″ />

</Points>

</asp:Series>

</Series>

<Series>

<asp:Series Name=”Minimum Temperature” ChartArea=”MainChart” ChartType=”Line”>

<Points>

<asp:DataPoint XValue=”1″ Yvalues=”12″  />

<asp:DataPoint XValue=”2″ Yvalues=”15″ />

<asp:DataPoint XValue=”3″ Yvalues=”23″ />

<asp:DataPoint XValue=”4″ Yvalues=”25″ />

<asp:DataPoint XValue=”5″ Yvalues=”28″ />

</Points>

</asp:Series>

</Series>

Please note that each series contains the ‘ChartArea’ name in which it will be included. Here we only have one ‘ChartArea’ and the two ‘Series’ point that charting area. Below we are adding the total source code again for your reference:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”FromChartArea.aspx.cs” Inherits=”FromChartArea” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>

<title>Untitled Page</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:Chart ID=”TempChartData” runat=”server”  BackColor=”Aqua” Height=”400px” Width=”400px”>

<Titles>

<asp:Title Text=”Monthwise Temperature Chart” ForeColor=”Red”  />

</Titles>

<Legends>

<asp:Legend Name=”DefaultLegend” Docking=”Top” />

</Legends>

<ChartAreas>

<asp:ChartArea Name=”MainChart”>

<InnerPlotPosition X=”10″ Y=”10″ Height=”80″ Width=”80″ />

<AxisX Title=”Month”>

<LabelStyle Enabled=”true”  />

<MajorGrid LineWidth=”1″ />

<CustomLabels>

<asp:CustomLabel FromPosition=”0.5″ ToPosition=”1.5″ Text=”Jan” />

<asp:CustomLabel FromPosition=”1.5″ ToPosition=”2.5″ Text=”Feb” />

<asp:CustomLabel FromPosition=”2.5″ ToPosition=”3.5″ Text=”Mar” />

<asp:CustomLabel FromPosition=”3.5″ ToPosition=”4.5″ Text=”Apr” />

<asp:CustomLabel FromPosition=”4.5″ ToPosition=”5.5″ Text=”May” />

</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=”28″  />

<asp:DataPoint XValue=”2″ Yvalues=”33″ />

<asp:DataPoint XValue=”3″ Yvalues=”35″ />

<asp:DataPoint XValue=”4″ Yvalues=”40″ />

<asp:DataPoint XValue=”5″ Yvalues=”43″ />

</Points>

</asp:Series>

</Series>

<Series>

<asp:Series Name=”Minimum Temperature” ChartArea=”MainChart” ChartType=”Line”>

<Points>

<asp:DataPoint XValue=”1″ Yvalues=”12″  />

<asp:DataPoint XValue=”2″ Yvalues=”15″ />

<asp:DataPoint XValue=”3″ Yvalues=”23″ />

<asp:DataPoint XValue=”4″ Yvalues=”25″ />

<asp:DataPoint XValue=”5″ Yvalues=”28″ />

</Points>

</asp:Series>

</Series>

</asp:Chart>

</div>

</form>

</body>

</html>

i. Now run the application by setting ‘FromChartArea.aspx’ as start page and you will find the following output (Figure-10)

Figure-10: Desired output for the Monthwise Temperature Chart

Please have a look in Figure-11 for explanation on the output

Figure-11: Output with proper explanation

Summary

So in the first example we have shown the binding of .Net chart control to XML data. At the same time we have also explored the other chart properties. Chart title and the range of Y axis values are also explored in this example.

In the second example we have shown how the chart control uses ‘Series’ and ‘DataPoints’ to render a chart within a chart region controlled by a ‘ChartArea’ object. This example clearly shows how much control a developer can have over the colors, borders, lines, rendering regions and other styling of the chart.