Microsoft Chart Controls

In our daily busy lives we all get very little time to consume all the information that is flying all over the place these days. Picture worth thousand words saying comes true and works every time in all situations, no matter if its advertisements or graphs.

Graphs/Charts, that is the topic here today.

Microsoft chart controls provides a new look to your data presentation style. You can do almost everything using their class libraries.

 

We will start with some basic introduction about the chart control then will go over what are the different components that make it up to create a chart complete. Next we will look into more details of  different kinds of charts in the Microsoft chart control class.

Lets get started:

Step 1) You need Visual Studio 2008 service pack 1 so if you don’t have one download it from here:http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en

Step 2) Download .msi of Microsoft chart controls from http://www.microsoft.com/downloadS/details.aspx?familyid=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en

 

Step 3) Fire up the the Visual Studio 2008 after the installation, create a new asp.net website and then locate Chart under data tab of your VS toolbox; Icon like this:

Now its time to rock and roll:

Basic introduction about charts:

A chart contains many components in it like:

Legends, Series, Title of the chart, Chart Area, X-Axis, Y-Axis (Shown in the picture below):

 

 

Types of charts:

There are various kinds of charts exists and can fit for all needs:

1) Bar and Column Charts

2) Line Charts

3) Area Charts

4) Pie and Doughnut Charts

5) Point Charts

6) Range Charts

etc…

Lets get started with some examples for each of the chart types above:

Drag a chart control on your workspace and set chart’s properties to:

Palette=”BrightPastel”, BackColor=”230, 220, 193″, Width=”400px”, Height=”300px”

BorderlineDashStyle=”Solid”, BackGradientStyle=”TopBottom”, BorderlineWidth=”2″,

BorderlineColor=”BlueViolet”, BorderSkin-SkinStyle=”Emboss”

After setting  all the properties your graph should look like this:

Lets add title to our chart:

Create a new “Titles” tag and add a title to it then set following properties to it:

<Titles>
<asp:Title ShadowColor=”Crimson” Font=”Arial, 14.25, style=Bold”
ShadowOffset=”3″ Text=”Column Chart” Name=”Title1″ ForeColor=”26,60,110″></asp:Title>
</Titles>

Add legends for your chart:

<Legends>
<asp:Legend TitleFont=”Arial, 8.25pt, style=bold” BackColor=”Transparent”
Font=”Arial, 7pt, style=Bold” IsTextAutoFit=”false” Enabled=”true”
Name=”Default”></asp:Legend>
</Legends>

Series: Chart series is the plotted area of your graph there are two axis on which control draw chart, X-Axis and Y-Axis, where X-Axis determine the location of your chart area and Y- Axis determine the height of the plotted area or in other words, these values determine x and y points on your chart. Series represent data points for your chart.

Lets add two series on our chart:

<Series>
<asp:Series Name=”Series1″ Legend=”Default”
XValueType=”DateTime” BorderColor=”BlanchedAlmond” LabelAngle=”90″>
<Points>
<asp:DataPoint XValue=”40156″ YValues=”32″ />
<asp:DataPoint XValue=”40157″ YValues=”56″ />
<asp:DataPoint XValue=”40158″ YValues=”12″ />
<asp:DataPoint XValue=”40159″ YValues=”26″ />
<asp:DataPoint XValue=”40160″ YValues=”78″ />
<asp:DataPoint XValue=”40161″ YValues=”96″ />
</Points>
</asp:Series>
</Series>

<Series>
<asp:Series Name=”Series2″ Legend=”Default”
XValueType=”DateTime” BorderColor=”BurlyWood”>
<Points>
<asp:DataPoint XValue=”40156″ YValues=”23″ />
<asp:DataPoint XValue=”40157″ YValues=”12″ />
<asp:DataPoint XValue=”40158″ YValues=”56″ />
<asp:DataPoint XValue=”40159″ YValues=”98″ />
<asp:DataPoint XValue=”40160″ YValues=”54″ />
<asp:DataPoint XValue=”40161″ YValues=”11″ />
</Points>

</asp:Series>
</Series>

After adding series your chart will look something like this:

 

 

Chart area is the background part of your graph on which all series are plotted.

We already have chart area in our column chart …lets add little more to our Chart Area to:

<asp:ChartArea Name=”ChartArea1″ BorderColor=”AliceBlue”
BackSecondaryColor=”White” BackColor=”BlanchedAlmond”
ShadowColor=”Transparent” BackGradientStyle=”TopBottom”
>

To give 3D look to your chart you will have to add 3D style to your chart area so to do that add following code inside your chart area tag.

<Area3DStyle Enable3D=”true” Inclination=”15″
LightStyle=”Realistic” Perspective=”10″ Rotation=”10″ />

We can also set properties for our x-axis and y-axis. in order to do that add following code inside the chart area:

<AxisY LineColor=”BurlyWood” LabelAutoFitMaxFontSize=”8″>
<MajorGrid Enabled=”true” LineColor=”BurlyWood” />
<LabelStyle Font=”Arial, 8.25 ” />
</AxisY>
<AxisX LineColor=”BurlyWood” LabelAutoFitMaxFontSize=”8″>
<MajorGrid LineColor=”BurlyWood” Enabled=”true” />
<LabelStyle Angle=”45″ Font=”Arial, 8″ Format= “MM-dd”/>
</AxisX>

After all the formatting your chart tag and final chart should look like this:

<asp:Chart ID=”Chart1″ runat=”server” Palette=”BrightPastel”
BackColor=”230, 220, 193″ Width=”400px” Height=”300px” BorderlineDashStyle=”Solid”
BackGradientStyle=”TopBottom” BorderlineWidth=”2″ BorderlineColor=”BlueViolet”
BorderSkin-SkinStyle=”Emboss”>

<BorderSkin SkinStyle=”Emboss”></BorderSkin>
<Titles>
<asp:Title ShadowColor=”Crimson” Font=”Arial, 14.25, style=Bold”
ShadowOffset=”3″ Text=”Column Chart” Name=”Title1″ ForeColor=”26,60,110″></asp:Title>
</Titles>

<Legends>
<asp:Legend TitleFont=”Arial, 8.25pt, style=bold” BackColor=”Transparent”
Font=”Arial, 7pt, style=Bold” IsTextAutoFit=”false” Enabled=”true”
Name=”Default”></asp:Legend>
</Legends>

<Series>
<asp:Series Name=”Series1″ Legend=”Default”
XValueType=”DateTime” BorderColor=”BlanchedAlmond”>
<Points>
<asp:DataPoint XValue=”40156″ YValues=”32″ />
<asp:DataPoint XValue=”40157″ YValues=”56″ />
<asp:DataPoint XValue=”40158″ YValues=”12″ />
<asp:DataPoint XValue=”40159″ YValues=”26″ />
<asp:DataPoint XValue=”40160″ YValues=”78″ />
<asp:DataPoint XValue=”40161″ YValues=”96″ />
</Points>
</asp:Series>
</Series>

<Series>
<asp:Series Name=”Series2″ Legend=”Default”
XValueType=”DateTime” BorderColor=”BurlyWood”>
<Points>
<asp:DataPoint XValue=”40156″ YValues=”23″ />
<asp:DataPoint XValue=”40157″ YValues=”12″ />
<asp:DataPoint XValue=”40158″ YValues=”56″ />
<asp:DataPoint XValue=”40159″ YValues=”98″ />
<asp:DataPoint XValue=”40160″ YValues=”54″ />
<asp:DataPoint XValue=”40161″ YValues=”11″ />
</Points>

</asp:Series>
</Series>

<ChartAreas>
<asp:ChartArea Name=”ChartArea1″ BorderColor=”AliceBlue”
BackSecondaryColor=”White” BackColor=”BlanchedAlmond”
ShadowColor=”Transparent” BackGradientStyle=”TopBottom”
>
<Area3DStyle Enable3D=”true” Inclination=”15″
LightStyle=”Realistic” Perspective=”10″ Rotation=”10″ />
<AxisY LineColor=”BurlyWood” LabelAutoFitMaxFontSize=”8″>
<MajorGrid Enabled=”true” LineColor=”BurlyWood” />
<LabelStyle Font=”Arial, 8.25 ” />
</AxisY>
<AxisX LineColor=”BurlyWood” LabelAutoFitMaxFontSize=”8″>
<MajorGrid LineColor=”BurlyWood” Enabled=”true” />
<LabelStyle Angle=”45″ Font=”Arial, 8″ Format= “MM-dd”/>
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

Congratulations!!! you have just completed your first chart.

In the next article we will cover more different kind of charts and their properties. After that we will add more dynamic behavior to our charts and graphs. Although this chart had static series, but as we progress we will look into more details of how to connect chart to the database and fetch computed values from database tables, procedures, views etc. Then we will work on getting chart data from XML files.

Till that time, keep exploring your chart properties and what all you can do with it.

 

 

Happy Coding!!!

Tags: , ,

ASP.NET | MS Chart