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

Creating asp.net chart data programmatically

Suggested Videos
Part 1 - ASP.NET Chart Control
Part 2 - How to set asp.net 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">
    <Titles>
        <asp:Title Text="Total marks of students">
        </asp:Title>
    </Titles>
    <Series>
        <asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Pie">
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
            <AxisX Title="Student Name">
            </AxisX>
            <AxisY Title="Total Marks">
            </AxisY>
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

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
                GetChartData();
                GetChartTypes();
            }
        }

        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());
                DropDownList1.Items.Add(li);
            }
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Call Get ChartData() method when the user select a different chart type
            GetChartData();
            this.Chart1.Series["Series1"].ChartType =
                (SeriesChartType)Enum.Parse(typeof(SeriesChartType), 
                           DropDownList1.SelectedValue);
        }
    }
}

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

asp.net 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.