Adding a Chart to an ASP.NET Web Form Page

Adding a chart to a Web page is surprisingly tricky. There are several ways to add a chart to an ASP.NET Web page. You can buy and use a commercial package such as the one from Telerik. You can use an open source client side JavaScript library such as Flot (which also works with non-ASP.NET pages).

For ASP.NET Web Form pages (aka .aspx pages) you can use the server side Chart control from the System-Web-UI-DataVisualization-Charting namespace. For ASP.NET Razor pages (aka MVC or plain Razor pages) you can use the server side Chart control from the System-Web-Helpers namespace.

There are many pros and cons to each approach. I found that the documentation for adding a chart to an ASP.NET Web Form page was horrible. Here’s a quick walk-through to add a chart to an ASP.NET Web Form, describing some of the problems I ran into and what I did to fix them.

First, launch Visual Studio in administrator mode. Go File | New | New Web Site | Templates C# | ASP.NET Empty Web Site. This approach will create raw text file Web content that can be easily manipulated (good news) with limited Intellisense (bad news). The alternative of File | New | Project | Visual C# | Web | ASP.NET Web Application creates complex binary Assemblies that must be managed by VS and deployed later (bad) with full Intellisense support (good).

Now specify HTTP and http: //localhost /ASPWebFormChart for the location. This will create an almost empty Web site, giving you just Web.config and Web.Debug.config files. Note that this creates a root directory named ASPWebFormChart at C:\inetpub\wwwroot.

ASPWebFormCreate

In the Solution Explorer window, right-click on the bolded Web site name and click Add | Add New Item | Visual C# | Web Form and name it ChartDemo.aspx and optionally uncheck the ‘Place code in separate file’ if you want to keep things simple with all your code in one place.

At this point the Web page has this (I’ve replaced all less-than and greater-than characters with ‘{‘ and ‘}’ so my blog software doesn’t blow up):

{%@ Page Language="C#" %}
{!DOCTYPE html}
{script runat="server"}
{/script}

{html xmlns="http://www.w3.org/1999/xhtml"}
{head runat="server"}
    {title}{/title}
{/head}
{body}
    {form id="form1" runat="server"}
    {div}
    
    {/div}
    {/form}
{/body}
{/html}

The Web.config file is:

{?xml version="1.0"?}
{configuration}

    {system.web}
      {compilation debug="true"
       targetFramework="4.5" /}
      {httpRuntime targetFramework="4.5" /}
    {/system.web}

{/configuration}

So far so good. But here’s where things started going bad for me. From the VS Toolbox, I doubled-clicked on the Chart control from the Data items. This added the following code to the Web page:

{%@ Page Language="C#" %}
{%@ Register Assembly="System.Web.DataVisualization,
 Version=4.0.0.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI.DataVisualization.Charting"
 TagPrefix="asp" %}
{!DOCTYPE html}
{script runat="server"}
{/script}

{html xmlns="http://www.w3.org/1999/xhtml"}
{head runat="server"}
    {title}{/title}
{/head}
{body}
    {form id="form1" runat="server"}
    {div}
    
    {/div}
    {/form}

  {asp:Chart ID="Chart1" runat="server"}
    {Series}
      {asp:Series Name="Series1"}{/asp:Series}
    {/Series}
    {ChartAreas}
      {asp:ChartArea Name="ChartArea1"}
      {/asp:ChartArea}
    {/ChartAreas}
  {/asp:Chart}

{/body}
{/html}

The Web.config file was modified automatically by VS to:

{?xml version="1.0"?}
{configuration}

  {system.web}
    {compilation debug="true"
     targetFramework="4.5"}
      
      {assemblies} {!-- added --}
        {add assembly="System.Web.DataVisualization,
 Version=4.0.0.0, Culture=neutral,
 PublicKeyToken=31BF3856AD364E35"/}
      {/assemblies}

    {/compilation}
    
    {httpRuntime targetFramework="4.5"/}
  {/system.web}
  
{/configuration}

This looked good according to the documentation I’d been looking at. However when I hit F5 to test the page all heck broke loose with a progression of one error message after another.

To resolve the errors I first had to manually edit the Web.config file to add two new sections:

{?xml version="1.0"?}
{configuration}

  {appSettings} {!-- had to manually add --}
    {add key="ChartImageHandler"
     value="storage=file;timeout=20;" /}
  {/appSettings}


  {system.web}
    {compilation debug="true" targetFramework="4.5"}
      
      {assemblies} 
        {add assembly="System.Web.DataVisualization,
 Version=4.0.0.0, Culture=neutral,
 PublicKeyToken=31BF3856AD364E35"/}
      {/assemblies}

    {/compilation}
    
    
    {httpRuntime targetFramework="4.5"/}
  {/system.web}

  {system.webServer} {!-- had to manually add --}
    {handlers}
      {add name="ChartImg" verb="*"
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}
  
{/configuration}

I found this required config setting information after a lengthy and painful search on the Internet. I don’t know why the XML wasn’t added by VS as it should have.

I was still getting errors trying to run the Web page. Next, I had to edit the security permissions on the top level ASPWebFormChart directory. I gave Write permissions to the NETWORK SERVICE account and the IIS_USRS account. I think what was happening is that the Chart control writes an image of the chart, or data that can be used to generate an image, on the Server, so Write permissions are needed.

Anyway, I got an empty chart to display. Next, I edited the ASP code by adding some dummy hard-coded data points so I could see something:

{asp:Chart ID="Chart1" runat="server"}
  {Series}

    {asp:Series Name="FirstSeries"
 XValueType="Int64"
 YValueType="Double"
 ChartType="Line"
 ChartArea="ChartArea1"} 
      {Points} 
         {asp:DataPoint XValue="0"
 YValues="3" /} 
         {asp:DataPoint XValue="1"
 YValues="5" /} 
         {asp:DataPoint XValue="2"
 YValues="9" /} 
      {/Points} 
   {/asp:Series} 

    {/Series}

    {ChartAreas}
      {asp:ChartArea Name="ChartArea1"}
      {/asp:ChartArea}
    {/ChartAreas}
  {/asp:Chart}

At last the minimal chart displayed.

ASPWebFormChart

The Chart control has a huge number of customization points (colors, titles, and so on), and can use data from a text file or a SQL database. These are non-trivial tasks.

From a larger perspective, this example points out a huge problem with Web development. Things are just too complicated, and documentation is often non-existent or out of date or just incorrect. This chaos isn’t helped by the constant creation of new frameworks for Web applications. I love Microsoft technologies, but ASP.NET has a long, long, long way to go to become what I’d consider a truly mature professional technology

This entry was posted in Miscellaneous. Bookmark the permalink.