Microsoft Charting Controls:- How to setup and start building your first chart application

If you need charting support in your asp.net application then you don’t need to look for any other 3rd party charting controls.Microsoft with its release of .net framework 3.5SP1 and Visual Studio 2008 SP1 provided the facility of charting within the development environment. You just have to download and install the right packages and then configure your configuration files correctly to setup your charts to see them up and running. Here in this article i will tell you where to download and install the required things for working with Microsoft Charts and how to configure you web.config in order to setup your charting controls. First of all these are the links to download the prerequisite to start playing with Microsoft Chart Controls

  1. Download Free Microsoft Chart Controls
  2. Download Visual Studio Tools Support For Chart Controls
  3. Download Microsoft Chart Control Samples
  4. Download Microsoft Chart Controls Documentation
  5. Microsoft Chart Control Forum

Now the second thing is adding the chart control to your toolbox.

  1. Just right click on your toolbox’s data tab and select Choose Item from the menu.
  2. In the dialogue box opened select the two dll’s marked in the image below, after adding these you are good to go with Microsoft Charting.

After adding these controls to the toolbox just drag and drop the control on to your page.It will automatically create a Register directive entry on your page if it does not create then you can do it manually, just add the below lines to your page in a Register directive.

<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

After dropping the chart control on to your page you will have the markup 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 the third thing is configuring your web.config file in order to make chart controls work properly,otherwise you will receive errors complaining about the http get request and other similar errors.

<appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:TempImageFiles;" />
</appSettings>

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

<handlers>
...
    <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
...
</handlers>

These three web.config entries are sufficient to make your chart control work.

If for the first setting you don’t want to use the drive location which is currently configured as c:TempImageFiles you can replace it with web location of your website as instead of dir use url=”~tempImages”,this will use the tempimages folder created inside your website root.

Stay tuned for more articles on Microsoft Charting Controls

Happy Programming!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

by Aashish Kumar