Bernie Cook's Blog

Azure, C#, .NET, Architecture & Related Tech News

Azure & Chart Controls: Step-By-Step Integration Guide

1 Comment

I recently integrated the ASP.NET 4 Chart Controls into a Windows Azure Web role. Integrating the charts was easy but getting it up and running in Azure required a few extra steps.

If you know much about the chart controls you know they create the chart image on the fly, and you can very easily configure the control to store the chart image to the server’s disk or to memory temporarily. With Azure the image may be generated by a different Web role instance than the one that has to serve it up so what you end up with, if you use the default setup, is a broken image placeholder instead of your fancy looking chart image. To accommodate this you have to create a custom handler for your Web role which stores, retrieves and deletes the chart image as a blob to your Azure storage container.

Below is a step-by-step guide on what you need to do to get the charts up and running in Azure.

I’m assuming you’re using Visual Studio 2010 and have the .NET 4 framework installed. If not then expect variation in the steps below. Also over time these steps may change depending on upgrades made to the chart controls and/or Azure. I have a feeling that integrating the chart controls into Web roles will be a lot easier sometime very soon.

Step-by-Step Guide

The step-by-step guide assumes you have VS2010 up and running with the .Net 4 framework installed, and a Web role ready to integrate the chart control.

  1. Go to the Web role’s References and add the System.Web.DataVisualization assembly – ensure it’s version
  2. Ensure the Copy Local reference property is set to True for this assembly
  3. Open up your web.config and add the following entries:
    1. Add the following code to the node – note the key/values, the ones marked in blue must match the handler you create in the third web.config step below. Add this entry now and come back later to edit it:
          <add key="ChartImageHandler" value="handler=AzureChartControl.Web.Helpers.ChartImageHandler, AzureChartControl.Web;"/>
    2. Add this to the node, no changes required:
          <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=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    3. Add this to the node, no changes required:
             <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  4. Create a new handler class within your Web role. You can call it whatever you like, i.e. “ChartImageHandler” as long as you configure the values (class and namespace) in step 1 to reflect it.
  5. Go to Karsten’s article: Using the ASP.NET Chart Control With Multiple Web Roles In Windows Azure. In this article you’ll find an example of a chart image handler written specifically to work in Azure. I purposefully didn’t include the code here as how you implement this handler into your webrole is up to you. After creating my own handler class, and taking a copy of Karsten’s code, I change quite a bit of it to suit my solution’s architecture (abstraction, cloud storage integration, etc.). You can also download a sample solution of Karsten’s which integrates the handler as well.
  6. Add a chart control to an ASPX page
  7. Run the project

To ensure the chart is being generated correctly place some breakpoints in your handler during each major step, you’ll see the image created as a blog in your specified container, then deleted afterwards. In addition, I’d recommend increasing the number of instances in your webrole during testing to ensure each instance is creating the chart image and returning it to the calling browser successfully.

» Important!

If you haven’t hardcoded your blob storage endpoint into your solution, like me as my storage connection string is all I need, then you’ll probably find when you use your CloudBlobClient instance to retrieve your chart image by accessing the Uri (i.e. cloudBlobClient.BaseUri.AbsoluteUri) that this exception will be raised “The requested URI does not represent any resource on the server.“. This didn’t appear in my development environment but did appear when I deployed to Windows Azure.  The reason behind this is that this particular property (.BaseUri.AbsoluteUri) in development returns no trailing forward slash, however in Windows Azure it does. So be prepared to append a forward slash where necessary so the handler can locate your chart image for download and deletion. Not as elegant as one would like but it saves having to add another setting name/value to your Azure solution which stores the actual endpoint.


I’d strongly recommend you download the chart samples project from MSDN as it’s packed with loads samples and does a great job of showing off how flexible the chart controls are. I’d personally like to thank the team who worked on the chart controls as they have done an amazing job on the API and the flexibility provided.


I consulted the following sources during the course of the integration. I wanted to express a huge thank you to Karsten Januszewski as his article saved me a LOT of time.

Author: Bernie

I currently live and work in the UK, just outside of London. I've been working in IT for 15+ years and in that time have solved many technical problems via blogs, forums, tutorials etc. and feel like I should be giving something back. This blog post is my way of contributing and I hope it proves just as useful to others as their contributions have to me.

One thought on “Azure & Chart Controls: Step-By-Step Integration Guide

  1. Hi! If you have AppFabric Cache configured to share your sessions, I think you can also just change the ChartImageHandler’s storage value to “session” in the web.config:

    Works for me and I think it should also be faster…
    Best regards!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s