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

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

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

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

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

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

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

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 image

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

image

It works fine!

Share this post: | | | |
Published Monday, November 8, 2010 8:48 PM by Wely

Comments

# Azure &amp; Chart Controls &laquo; Bernie Cook&#039;s Blog

Sunday, November 27, 2011 3:38 AM by Azure & Chart Controls « Bernie Cook's Blog

Pingback from  Azure &amp; Chart Controls &laquo; Bernie Cook&#039;s Blog

Powered by Community Server (Commercial Edition), by Telligent Systems