Recently, I am researching on how to use chart control, dashboard gadgets, and reporting tools in Windows Azure. Since the architecture of Windows Azure works quite different with traditional ASP.NET application, there’re also some issues around.
First thing that I am looking to explore is about chart control in ASP.NET 4.0. Let’s start diving into the detail how it works in ASP.NET and Windows Azure.
1. Let’s create a empty ASP.NET Website.
2. Add an ASP.NET Webpage and name it Default.aspx.
3. Drag a chart control on your web page.
4. Override the chart tag with the followings.
<h1>Chart Control in ASP.NET</h1>
<asp:Chart ID="chtNBAChampionships" runat="server">
<asp:Series Name="Championships" YValueType="Int32" ChartType="Column" ChartArea="MainChartArea">
<asp:DataPoint AxisLabel="Celtics" YValues="17" />
<asp:DataPoint AxisLabel="Lakers" YValues="15" />
<asp:DataPoint AxisLabel="Bulls" YValues="6" />
<asp:DataPoint AxisLabel="Spurs" YValues="4" />
<asp:DataPoint AxisLabel="76ers" YValues="3" />
<asp:DataPoint AxisLabel="Pistons" YValues="3" />
<asp:DataPoint AxisLabel="Warriors" YValues="3" />
5. When you drag a chart control in the toolbox to your webpage, Visual Studio actually generates some configuration for you in web.config file as following.
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
<remove name="ChartImageHandler" />
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=22.214.171.124, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=126.96.36.199, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
assembly="System.Web.DataVisualization, Version=188.8.131.52, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<compilation debug="true" targetFramework="4.0">
<add assembly="System.Web.DataVisualization, Version=184.108.40.206, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
These configurations include handler to handling chart generation, application setting for chart generation, as well as simply tag prefix used in our web page.
6. Simply run the application and you will see a chart showing on the page.
1. Now I am creating a new Windows Azure Cloud Service with one webrole.
2. I’ll do the same thing that I’ve done in step 3 and 4.
3. Let’s run the application to see whether it works…
No, it doesn’t work well.
There’s always a workaround that we can do. Let me show you how to do it step by step.
1. The error you are getting is actually with regard to Integrated Managed Pipeline Mode that Windows Azure applies.
If we take a look at the web.config file, there is a section of http handler exits inside the <system.web> tag, which is the way traditional classic pipeline style.
Remove those section since the Integrated Managed Pipeline Mode only requires to place those setting in the <system.webServer> section.
2. Run the application again and see whether it works.
No, it doesn’t work. Why? The way ASP.NET Chart control work is dynamically generate the chart before displaying it to the web page.
By default, it would be stored in file system specifically in “C:\TempImageFiles\” folder.
Since Windows Azure, we do not have control over the specific drive and folder, something must be done.
3. Go to the web.config file and locate to <appSettings>.
Change the value to the following:
The “storage=memory” means that we are not storing the temporary image in specific folder, but it will be kept in webserver’s memory.
The “deleteAfterServicing=true” ensure that the temporary image must be deleted after servicing.
4. Now, let’s run the application again and see whether it works…
Ahah! It works fine.
Don’t be too happy soon. All of my works in the section above are done in local development fabric. Working fine in development fabric doesn’t mean also work fine in real Window Azure environment.
One thing that requires to deploy it to Windows Azure is to ensure that set the “Copy Local” of System.Web.DataVisualization assembly to True.
Now, let’s try to deploy it to the real Windows Azure environment and see the result.
It works fine!
Pingback from Azure & Chart Controls « Bernie Cook's Blog