Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Creating chart data programmatically

Suggested Videos
Part 1 - ASP.NET Chart Control
Part 2 - How to set chart control ChartType property dynamically

In Part 1 of this video series, we discussed specifying chart data declaratively in HTML. In this video we will discuss creating chart data programmatically. Please watch Part 1 and Part 2 before proceeding with this video. We will continue with the example we worked with in Parts 1 and 2.

Step 1 : From the Chart1 control on WebForm1.aspx, remove <Points> element and all the <asp:DataPoint> elements. The HTML of Chart1 control should now be as shown below. 
<asp:Chart ID="Chart1" runat="server" Width="350px">
        <asp:Title Text="Total marks of students">
        <asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Pie">
        <asp:ChartArea Name="ChartArea1">
            <AxisX Title="Student Name">
            <AxisY Title="Total Marks">

Step 2 : Modify the code in the code-behind file as shown below. The code is commented and self explanatory.
using System;
using System.Web.UI.DataVisualization.Charting;
using System.Web.UI.WebControls;

namespace ChartsDemo
    public partial class WebForm1 : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
                // Call Get ChartData() method in the PageLoad event

        private void GetChartData()
            // Retrieve the Series to which we want to add DataPoints
            Series series = Chart1.Series["Series1"];
            // Add X and Y values using AddXY() method
            series.Points.AddXY("Mark", 800);
            series.Points.AddXY("Steve", 900);
            series.Points.AddXY("John", 700);
            series.Points.AddXY("Mary", 900);
            series.Points.AddXY("Ben", 600);

        private void GetChartTypes()
            foreach (int chartType in Enum.GetValues(typeof(SeriesChartType)))
                ListItem li = new ListItem(
                    Enum.GetName(typeof(SeriesChartType), chartType), chartType.ToString());

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
            // Call Get ChartData() method when the user select a different chart type
            this.Chart1.Series["Series1"].ChartType =

In our next video, we will discuss how to bind database data to the chart control. chart tutorial

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.