* IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. *** 
  Feb 16 2017 8:03AM     Michael Ryan
  3 Comments    24251 Views  
Here Michael provided a short tutorial with example, how to create a Chart Control in Web Application. In ASP.Net, there is already predefined control is availabe ( Chart ). Using the Chart Control we can draw Bar chart, pie Chart, line chart and Etc.

For creating a chart, First have to create a table in Microsoft SQL Server Database as shown below.

But here i have created a sample DataSet for binding the chart.

Open Visual Studio and Create New application.
Create a page Charts.aspx



HTML Code:

Copy the HTML code and paste it in your design page.

< %@ Page Title="ASP.Net Chart" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Chart.aspx.cs" Inherits="ASPDotNet_Chart._Chart" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div align="center" class="margintop20">
    <br >
    <br >
    <br >
            <asp:Chart ID="chart1" runat="server">
              & nbsp; <Series>
              & nbsp;     <asp:Series Name="Default" BorderColor="Black" BorderWidth="1">
              & nbsp;     </asp:Series>
              & nbsp; </Series>
              & nbsp; <ChartAreas>
              & nbsp;     <asp:ChartArea Name="ChartArea1" BorderWidth="0" BackColor="white">
              & nbsp;     </asp:ChartArea>
              & nbsp; </ChartAreas>
            <asp:Label ID="lblChartAlternateText" runat="server" Text="" CssClass="dashboardLabel marginright300"></asp:Label>

Here I have used chart control to draw the chart. 


C# Code:

Sample code for creating the DataTable.

      public DataTable GetData()
            DataTable dtReport = new DataTable();
            dtReport.Column s.Add("Month"typeof (string));
            dtReport.Column s.Add("Count"typeof (int));
            dtReport.Rows. Add("Jan", 74);
            dtReport.Rows. Add("Feb", 47);
            dtReport.Rows. Add("Mar", 87);
            dtReport.Rows. Add("Apr", 97);
            dtReport.Rows. Add("May", 74);
            dtReport.Rows. Add("Jun", 54);
            dtReport.Rows. Add("Jul", 71);
            dtReport.Rows. Add("Aug", 100);
            dtReport.Rows. Add("Sep", 57);
            return dtReport;

Code for creating the chart by passing the arguement as DataTable.

    public void BindChart(DataTable dtReport)
            string[] x = new string[dtReport.Rows.Count];
            double[] y = new double[dtReport.Rows.Count];
            for (int i = 0; i < dtReport.Rows.Count; i++)
                x[i] = dtReport.Rows[i][0].ToString();              
                y[i] = Convert.ToDouble(dtReport.Rows[i][1]);
            chart1.Series[0].Points.DataBindXY(x, y);

            chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;

            chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.Angle = -50;
            chart1.ChartAreas["ChartArea1"].AxisX.TitleFont = new System.Drawing.Font("Verdana", 8, System.Drawing.FontStyle.Bold);
            chart1.ChartAreas["ChartArea1"].AxisY.TitleFont = new System.Drawing.Font("Verdana", 8, System.Drawing.FontStyle.Bold);
            chart1.ChartAreas["ChartArea1"].AxisX.Minimum = 0;
            chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;
            chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = true;
            chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = ColorTranslator.FromHtml("#e5e5e5");
            chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = true;
            chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = ColorTranslator.FromHtml("#e5e5e5");
            chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.Font = new Font("Tahoma", 8, FontStyle.Bold);
            chart1.ChartAreas["ChartArea1"].AxisY.LabelStyle.Font = new Font("Tahoma", 8, FontStyle.Bold);
            chart1.Series[0].IsValueShownAsLabel = true;
            chart1.ChartAreas["ChartArea1"].AxisY.Title = "Count";
            chart1.ChartAreas["ChartArea1"].AxisX.Title = "Month";
            chart1.Width = 500;

Call the BindChart() Method in PageLoad event.

       protected void Page_Load(object sender, EventArgs e)

Different types of charts:

By changing the ChartType we can draw the different types of chart in ASP.Net. 

// Pie Chart
chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;

// Line Chart
chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Line;

//Bar Chart
chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Bar;

chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Pyramid;

Sample Result:

I hope this page will helps to create chart in ASP.Net Web Application in C#. Thanks.


Zz Lorreta
May 4 2016 7:00PM
rasteredge can provide youc# add comments to pdf reader, and download it to try it free on rasteredge page
Adam Fletcher
Nov 11 2018 9:41AM
One can try to know more about how to generate Excel files on C#.
Sep 17 2019 3:29AM
good job..

Recent Posts
Create Amazon ElasticCache Using Memcached in CSharp
Oct 29 2018 12:09PM Posted By Amose
Get Google Map Lat Lng (Geo Point) By Pincode in C#
Oct 28 2018 12:09PM Posted By Pranav
Google URL Shortener in C#
Oct 20 2018 12:09PM Posted By Sanjay
Bind Gridview from CSV file in Asp.Net C#
Oct 5 2018 12:09PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Sep 26 2018 12:09PM Posted By John
Gridview custom CSS in ASP.Net
Sep 14 2018 12:09PM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Sep 10 2018 12:09PM Posted By Micheal
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: