How To Use And Bind Chart Control In ASP.NET With XML Data

We will use XML to provide the data for binding in Chart control and the approach is simple. We will take the XML file, where we store some specific student course resulta in a cumulative manner with Pie chart and then on the button click, we will display each student's individual result from another XML data source. For simplicity, I had normalized the whole data in an XML, so that it would be a simple tutorial for me as well as for others, who are still in the learning process.

INITIAL CHAMBER

Step 1

Open your Visual Studio 2010 and create an empty Website. Give a suitable name [data_demo].

Step 2

In Solution Explorer, you get your empty Website, Add a Web form and XML file by going, as shown below.

For Web Form

data_demo (Your Empty Website) -> Right click Add New Item -> Web Form. Name it as data_demo.aspx.

For XML

data_demo (Your Empty Website) -> Right click Add New Item -> XML. Name it as studentdetails.xml

Studentdetails.xml 

<?xml version="1.0" encoding="utf-8" ?>
    <persondetails>
        <person>
            <id>01</id>
            <name>Nilesh</name>
            <per>85</per>
        </person>
        <person>
            <id>02</id>
            <name>Purnima</name>
            <per>90</per>
        </person>
        <person>
            <id>03</id>
            <name>Chandni</name>
            <per>89</per>
        </person>
        <person>
            <id>04</id>
            <name>Rinku</name>
            <per>78</per>
        </person>
        <person>
            <id>05</id>
            <name>Nilu</name>
            <per>60</per>
        </person>
    </persondetails>

IndividualStudentdetails.xml 

<?xml version="1.0" encoding="utf-8" ?>
    <StudentDetailsMarks>
        <subjects>

          <subject>JAVA</subject>
          <marks>82</marks>

        </subjects>

      <subjects>
        <subject>Asp.Net</subject>
        <marks>85</marks>
      </subjects>


      <subjects>
        <subject>Php</subject>
        <marks>78</marks>
      </subjects>


      <subjects>
          <subject>Android</subject>
            <marks>70</marks>
        </subjects>


    </StudentDetailsMarks>

DESIGN CHAMBER

Step 4

Open your data_demo.aspx file to create the design. We will create an HTML table and place our chartcontrol there. Afterwards, we will drag the button and 5 other chartcontrols. Your design will look, as shown below.

CODE CHAMBER

Step 5

Open data_demo.aspx.cs file to write the code for binding our chart control with XML data source. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.UI.DataVisualization.Charting;

public partial class chart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        DataSet ds = new DataSet();

        ds.ReadXml(Server.MapPath("~/XMLFile.xml"));
        Chart1.Titles.Add("Computer Result Analysis");


        Chart1.Series["Series1"].XValueMember = "name";
        Chart1.Series["Series1"].YValueMembers = "per";

        Chart1.DataSource = ds;
        Chart1.DataBind();

        Chart1.Series[0].IsValueShownAsLabel = true;
        Chart1.Series[0].Label = "#PERCENT";
        Chart1.Series[0].LegendText = "#AXISLABEL";

        this.Chart1.Legends.Add("Legend1");
        this.Chart1.Legends[0].Enabled = true;
        this.Chart1.Legends[0].Docking = Docking.Bottom;
        this.Chart1.Legends[0].Alignment = System.Drawing.StringAlignment.Center;
        this.Chart1.Series[0].LegendText = "#VALX (#PERCENT)";



    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        DataSet ds1 = new DataSet();
        ds1.ReadXml(Server.MapPath("~/Nilesh.xml"));
        Chart2.Titles.Add("Nilesh Result");
        Chart2.Series["Series1"].XValueMember = "subject";
        Chart2.Series["Series1"].YValueMembers = "marks";
        Chart2.DataSource = ds1;
        Chart2.DataBind();


        DataSet ds2 = new DataSet();
        ds2.ReadXml(Server.MapPath("~/Purnima.xml"));
        Chart3.Titles.Add("Purnima Result");
        Chart3.Series["Series2"].XValueMember = "subject";
        Chart3.Series["Series2"].YValueMembers = "marks";
        Chart3.DataSource = ds2;
        Chart3.DataBind();


        DataSet ds3 = new DataSet();
        ds3.ReadXml(Server.MapPath("~/Rinku.xml"));
        Chart4.Titles.Add("Rinku Result");
        Chart4.Series["Series1"].XValueMember = "subject";
        Chart4.Series["Series1"].YValueMembers = "marks";
        Chart4.DataSource = ds3;
        Chart4.DataBind();


        DataSet ds4 = new DataSet();
        ds4.ReadXml(Server.MapPath("~/Nilu.xml"));
        Chart5.Titles.Add("Nilu Result");
        Chart5.Series["Series1"].XValueMember = "subject";
        Chart5.Series["Series1"].YValueMembers = "marks";
        Chart5.DataSource = ds4;
        Chart5.DataBind();


        DataSet ds5 = new DataSet();
        ds5.ReadXml(Server.MapPath("~/Chandni.xml"));
        Chart6.Titles.Add("Chandni Result");
        Chart6.Series["Series1"].XValueMember = "subject";
        Chart6.Series["Series1"].YValueMembers = "marks";
        Chart6.DataSource = ds5;
        Chart6.DataBind();

    }
}

We are not going for hardcore coding in an XML, as the code for xmldata source will be messy for the new comers. We will see that part too in our next tutorials, but for the beginners, this is a way. Here, we had taken too much of XML due to which I had said that I had taken a bit normalized data.

There might be a problem with Pie chart to show the percentage and the label. For this, you can apply the code given below.

this.Chart1.Legends.Add("Legend1");
this.Chart1.Legends[0].Enabled = true;
this.Chart1.Legends[0].Docking = Docking.Bottom;
this.Chart1.Legends[0].Alignment = System.Drawing.StringAlignment.Center;
this.Chart1.Series[0].LegendText = "#VALX (#PERCENT)";

OUTPUT CHAMBER

This is the overall result for the branch, where you can see the percentage of each student. Now, we will see those student results individually by pressing the button.

Hope, you like it. Have a good Day. Thank you for reading.