News
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 2016 8:03AM     Michael Ryan
  1 Comments    925 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.
Database

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.


STEP: 1
Open Visual Studio and Create New application.
STEP: 2
Create a page Charts.aspx

            


STEP: 3

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>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    
    <div align="center" class="margintop20">
    <h2>
        ASP.NET CHART
    </h2>
    <br >
    <br >
    <br >
        <div>
            <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:Chart>
            <br>
            <asp:Label ID="lblChartAlternateText" runat="server" Text="" CssClass="dashboardLabel marginright300"></asp:Label>
        </div>
    </div>
</asp:Content>


Here I have used chart control to draw the chart. 

STEP: 4

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)
        {
               BindChart(GetData());
        }

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;

//Pyramid
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.



BackToTop
Comments


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 http://www.rasteredge.com/how-to/csharp-imaging/pdf-html5-feature-annotate/

 
Search
1&1 Hosting
Recent Posts
Bind Gridview from CSV file in Asp.Net C#
Jun 18 2016 11:38PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Feb 27 2016 11:51AM Posted By John
Gridview custom CSS in ASP.Net
Feb 25 2016 10:59AM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Feb 25 2016 10:20AM Posted By Micheal
Read excel file and convert to List in C#
Feb 25 2016 6:26AM Posted By Michael
Encryption and Decryption for Password in C#
Feb 17 2016 3:52AM Posted By Michael
How to create Chart in ASP.Net C#
Feb 16 2016 8:03AM Posted By Michael Ryan
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: