Friday, January 7, 2011

A step by step guide to use Asp.Net 4.0 Chart control with IIS 7

Asp.Net 4.0 has built-in chart control. You can drag it from the ToolBox and drop it onto any markup page. It is supposed to work if you bind data with the chart control’s data source. However, it doesn’t work. Let’s see the steps which are required to use chart control properly.

1> You will find the Chart control inside the Data section of the toolbox. Do drag and drop the control in any markup page.

2> Set the XValueMember and YValueMembers property of “Series” element with the properties of your object you want to bind with the chart control.

3> Set the Datasource of the chart control.

4> Open the web.config file.

5> Add the following element inside the handlers section.

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

6> Add the following element inside the appSettings section:

<add key="ChartImageHandler" value="storage=file;timeout=20;Url=~/tempImages/;" />

Point out the Url of the value. Instead of Url, you can set absolute path.

7> Create a folder named “tempImages” in your root virtual folder.

8> Let the write privilege of “tempImages” folder to the IIS user (IIS_IUSRS).

Now, if you run you web application, you will see the chart control. You can download a small demo  from here.

Hope this help!