Using ASP.NET Chart Control In Windows Azure

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.

Try it in normal ASP.NET

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.

image_5C28A95A

4. Override the chart tag with the followings.

<h1>Chart Control in ASP.NET</h1>
<asp:Chart ID="chtNBAChampionships" runat="server">
    <Series>
        <asp:Series Name="Championships" YValueType="Int32" ChartType="Column" ChartArea="MainChartArea">
            <Points>
                <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" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="MainChartArea">
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

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.

<?xml version="1.0"?>
<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:TempImageFiles;" />
  </appSettings>
  <system.webServer>
    <handlers>
      <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=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>
  <system.web>
    <httpHandlers>
      <add 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"
       validate="false" />
    </httpHandlers>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
         assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>
    </pages>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>
  </system.web>
</configuration>

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.

image_3D1DB016

How about On Windows Azure

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…

image_2A14733A

No, it doesn’t work well.

The workaround

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.

image_77A761B7

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.

image_1AD6DD57

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

image_2AED7FAE

Change the value to the following:

storage=memory;deleteAfterServicing=true;

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…

image_61D7381A

Ahah! It works fine.

How about deploying to Windows Azure.

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.

 image_15B75208

Now, let’s try to deploy it to the real Windows Azure environment and see the result.

image_63EC0EE5

It works fine!

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Using ASP.NET Chart Control In Windows Azure

  1. D Yan says:

    Brilliant piece of advice, worked like a charm. Thank you very much!

  2. Thanks for taking the time to post this. You saved me a ton of trouble.

Leave a Reply

Your email address will not be published. Required fields are marked *

*