ASP.NET 4.0 Chart control – XML file Binding

Posted by: Suprotim Agarwal , on 2/10/2012, in Category ASP.NET
Views: 135559
Abstract: The Microsoft Chart Controls for .NET Framework allows you create simple, feature rich and attractive 2D and 3D charts for web (ASP.NET) and windows applications (WinForms).
The Microsoft Chart Controls for .NET Framework allows you create simple, feature rich and attractive 2D and 3D charts for web (ASP.NET) and windows applications (WinForms). In this article, we will explore ASP.NET Chart Controls. The ASP.NET chart controls enables you to create visually compelling charts for web applications and supports almost all major 2D/3D chart series types. You can download the samples here to check them out.
The ASP.NET Chart control is a part of the .NET Framework 4.0 release. If you are using ASP.NET 4.0, the Chart control is included in the ToolBox and you can drag and drop the chart control from the Data Tab to use it.

 

DataTab
If you are using .NET 3.5 SP1, the chart control has to be separately downloaded over here.
Let us get started:
Step 1: Create an ASP.NET 4.0 website and drag and drop a chart control and a Button control from the toolbox to the Default.aspx webpage. Set up the chart control to use Area3DStyle to implement 3D for all series in chart area, as shown below:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:Button ID="btnBind" runat="server" Text="Bind Chart to XML"
        onclick="btnBind_Click" />
    <asp:Chart ID="chartBooks" runat="server" Width="700" Height="450"
         BackColor="LightBlue" BackSecondaryColor="AliceBlue"
         BackGradientStyle="TopBottom" BorderColor="DarkBlue">
        <Series>
            <asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Column"
                Color="Wheat">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true" 
            BackColor="#0066cc" BorderColor="DarkBlue">
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
</asp:Content>
Step 2: We be plotting the chart based on the XML Data. I have used a sample books.xml available in the source code of this article. Here’s a sample structure of the XML file
Step 3: On the button click event, write the following code to populate the chart, with the data read from the XML File
C#
protected void btnBind_Click(object sender, EventArgs e)
{
    string dataPath = MapPath(".") + "\\books.xml";
 
    DataSet ds = new DataSet();
    ds.ReadXml(dataPath);
    DataTable dt = ds.Tables[0];
    DataView dataView = new DataView(dt);
    // Bind XML
    chartBooks.Series[0].Points.DataBindXY(dataView, "title", dataView, "price");       
}
 
VB.NET (Converted Code)
Protected Sub btnBind_Click(ByVal sender As Object, ByVal e As EventArgs)
      Dim dataPath As String = MapPath(".") & "\books.xml"
 
      Dim ds As New DataSet()
      ds.ReadXml(dataPath)
      Dim dt As DataTable = ds.Tables(0)
      Dim dataView As New DataView(dt)
      ' Bind XML
      chartBooks.Series(0).Points.DataBindXY(dataView, "title", dataView, "price")
End Sub
In the code shown above, we are using the DataSet.ReadXML to read the XML data into a DataSet. We then create a DataView using the DataTable (obtained from the DataSet) and then use ‘DataBindXY’ to bind the X and Y values of the collection to the specified column of the DataView, in our case ‘title’ on the X-Axis and ‘price’ on the Y-Axis.
That’s it. The resultant output is as shown below:
OutPut

The entire source code of this article can be downloaded over here

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by pradip on Friday, February 17, 2012 7:56 PM
its very good work. persanally thanks rimal di n ur group.i think it will be success to devlop new programm .  Best of luck.
Comment posted by hhhhhhhhhhhhhhh on Tuesday, May 29, 2012 7:42 AM
hyfhhhhhhhhhhhh
Comment posted by radhika on Friday, January 11, 2013 3:21 AM
Good article
Comment posted by Mayur on Sunday, December 1, 2013 11:03 PM
Good Article its Very good work Thanks

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook