How to create charts in ASP.NET 4.0 using built-in Chart control

Introduction
In this article I will explain how to create charts in ASP.NET 4.0 using the Chart control introduced in ASP.NET 4.0

Description
ASP.NET 4.0 introduced a new data control “Chart” with Visual Studio 2010. Chart control can be used to create around 35 types of interactive charts. Data in the chart control can be added declaratively or from the database. Chart data can be manipulated using its built-in methods.

Step 1: Create a new ASP.NET Application

ASPNET Chart Control Example

Step 2: Drag a Chart Control on Default.aspx page from the Toolbox under the Data section. Following markups are added in the HTML source of the page for the Chart control

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

The Chart control contains two collections, Series and ChartAreas. Series collection contains different Series object. A Series object is a collection of DataPoints which represents data in the chart. Different Series can be added for different type of ChartArea.

ChartAreas collection contains different ChartArea objects. A ChartArea object defines appearance of a Chart where data is plotted.

Step 3: After adding the Chart control on the page, some configuration is automatically added to the application to handle the charts. So please ensure that following tags are added in your web.config file

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

Step 4: Edit the Chart control in the HTML source as following to add some sample data to show in the chart

<asp:Chart
    ID="chartProducts"
    runat="server"
    Width="800"
    Height="500">
    <Series>
        <asp:Series ChartArea="ProductChartArea" Name="ProductSeries" ChartType="Column">
            <points>
                <asp:DataPoint AxisLabel="Rhönbräu Klosterbier" YValues="360" />
                <asp:DataPoint AxisLabel="Boston Crab Meat" YValues="220" />
                <asp:DataPoint AxisLabel="Boysenberry Spread" YValues="240" />
                <asp:DataPoint AxisLabel="Pâté chinois" YValues="350" />
                <asp:DataPoint AxisLabel="Röd Kaviar" YValues="150" />
            </points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ProductChartArea">
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

Here, first we have set the ChartType of the Series object “ProductSeries” to “Column” to create a Column chart. We also set ChartArea property to the ChartArea object “ProductChartArea”, which specifies that “ProductSeries” series is associated with “ProductChartArea” ChartArea.

Then we added some DataPoint objects inside the “ProductSeries” to plot the data. YValues is the value used to generate the chart and AxisLabel is the label for that value.

Output:

Column Chart

ASPNET Column Chart

Pie Chart (When ChartType of the Series “ProductSeries” is changed to “Pie”)

ASPNET Pie Chart Example

One thought on “How to create charts in ASP.NET 4.0 using built-in Chart control

  1. Pingback: Creating 3D (Three-Dimensional) charts in ASP.NET | DEEPAK SHARMA

Leave a Reply

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