Post New Resource

Create charts, plot in asp.net using Microsoft .NET Charting control

Posted By:Pankaj Mishra Posted Date: January 10, 2010 Points: 25 Category: ASP.NET URL: http://www.dotnetspark.com

In this article we will see how to Create Pie, Bar chart, Area, Column, Line plot in asp.net step by step method using Microsoft .NET Charting control 3.5

Create Pie, Bar chart, Area, Column, Line plot in asp.net using Microsoft .NET Charting control 3.5

In this article we will create PIE, Barchart, Area, Column, Line chart using Microsoft .NET Charting control 3.5. In some application we need

to display chart as a part of report or to display use in asp.net web page and using Microsoft Charting control its very easy to plot various chart in our asp.net website or asp.net web application, and more over this .NET Charting control is free to use and distribute, SO you dont have to user 3rd party charting control.

Lets see how to use Microsoft .NET Charting control 3.5 step by step

Step 1: First Download the .NET Charting control from here.

Setp 2: Add the reference to your project by right click on the solution explorer of your project.

Setp 3: Write the below code in which event you want to draw Chart in your web page in any event you can use Page Load event or Button click event.

You can also refer my other 2 articles on Microsoft .NET Charting control here and here for Installation of charting control and for PIE chart example respectively

Dont forget to add namespace in you .cs or .vb page to use charting control

using System.Web.UI.DataVisualization.Charting;

Now I have create one function in that it create sample data which is going to the input of the charting control to plot chart based on thse input data. If you want you can display the data from database to the chart control.

In C# Code sample

private void CreateChart()
{
    //Create some dummy Data
    Random random = new Random();
    for (int pointIndex = 0; pointIndex < 10; pointIndex++)
    {
        Chart1.Series["Series1"].Points.AddY(random.Next(20, 100));
    }
    //Uncomment this line if you want to show bar chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;

    //Uncomment this line if you want to display Line chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Line;

    //Uncomment this line if you want to display area chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Area;

    //uncomment this line if you want to display column chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Column;

    //uncomment this line if you want to show radar chart
    Chart1.Series["Series1"].ChartType = SeriesChartType.Radar;

    // Set the bar width
    Chart1.Series["Series1"]["PointWidth"] = "0.5";

    // Show data points labels
    Chart1.Series["Series1"].IsValueShownAsLabel = true;

    // Set data points label style
    Chart1.Series["Series1"]["BarLabelStyle"] = "Center";

    // Set data points label style
    Chart1.Series["Series1"]["BarLabelStyle"] = "Center";

    // Show chart as 3D. Uncomment this line if you want to display your barchart as 3D
    //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

    // Draw chart as 3D Cylinder
    Chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";
}

In Vb.Net sample method

Private Sub CreateChart()
    'Create some dummy Data
    Dim random As New Random()
    For pointIndex As Integer = 0 To 9
        Chart1.Series("Series1").Points.AddY(random.[Next](20, 100))
    Next
    'Uncomment this line if you want to show bar chart
    'Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;
    
    'Uncomment this line if you want to display Line chart
    'Chart1.Series["Series1"].ChartType = SeriesChartType.Line;
    
    'Uncomment this line if you want to display area chart
    'Chart1.Series["Series1"].ChartType = SeriesChartType.Area;
    
    'uncomment this line if you want to display column chart
    'Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
    
    'uncomment this line if you want to show radar chart
    Chart1.Series("Series1").ChartType = SeriesChartType.Radar
    
    ' Set the bar width
    Chart1.Series("Series1")("PointWidth") = "0.5"
    
    ' Show data points labels
    Chart1.Series("Series1").IsValueShownAsLabel = True
    
    ' Set data points label style
    Chart1.Series("Series1")("BarLabelStyle") = "Center"
    
    ' Set data points label style
    Chart1.Series("Series1")("BarLabelStyle") = "Center"
    
    ' Show chart as 3D. Uncomment this line if you want to display your barchart as 3D
    'Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
    
    ' Draw chart as 3D Cylinder
    Chart1.Series("Series1")("DrawingStyle") = "Cylinder"
End Sub

Now if you want to display Line chart you have to uncommant this lines from the above code

Chart1.Series["Series1"].ChartType = SeriesChartType.Line;

and your line chart will look like this

If you want to display bar chart Uncomment this line

Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;

and your Bar chart will look like this

If you want to Show Area chart Uncomment this line

Chart1.Series["Series1"].ChartType = SeriesChartType.Area;

and your Area chart will look like this

If you want to Show Column Plot Uncomment this line

Chart1.Series["Series1"].ChartType = SeriesChartType.Column;

and your Column chart will look like this picture

and if you want Radar Plot Uncomment this line

Chart1.Series["Series1"].ChartType = SeriesChartType.Radar;

and your Radar Plot will look like this image

Full Code of your .cs file using C# Example. In the below example we have calling the method in the page load event.

In C# code

using System;
using System.Web.UI.DataVisualization.Charting;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            CreateChart();
        }

    }

private void CreateChart()
{
    //Create some dummy Data
    Random random = new Random();
    for (int pointIndex = 0; pointIndex < 10; pointIndex++)
    {
        Chart1.Series["Series1"].Points.AddY(random.Next(20, 100));
    }
    //Uncomment this line if you want to show bar chart
    Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;

    //Uncomment this line if you want to display Line chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Line;

    //Uncomment this line if you want to display area chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Area;

    //uncomment this line if you want to display column chart
   //Chart1.Series["Series1"].ChartType = SeriesChartType.Column;

    //uncomment this line if you want to show radar chart
    //Chart1.Series["Series1"].ChartType = SeriesChartType.Radar;

    // Set the bar width
    Chart1.Series["Series1"]["PointWidth"] = "0.5";

    // Show data points labels
    Chart1.Series["Series1"].IsValueShownAsLabel = true;

    // Set data points label style
    Chart1.Series["Series1"]["BarLabelStyle"] = "Center";

    // Set data points label style
    Chart1.Series["Series1"]["BarLabelStyle"] = "Center";

    // Show chart as 3D. Uncomment this line if you want to display your barchart as 3D
    //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

    // Draw chart as 3D Cylinder
    Chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";
}
}

Full sample code In Vb.Net

Imports System
Imports System.Web.UI.DataVisualization.Charting

Public Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            CreateChart()
            
        End If
    End Sub
    
    Private Sub CreateChart()
        'Create some dummy Data
        Dim random As New Random()
        For pointIndex As Integer = 0 To 9
            Chart1.Series("Series1").Points.AddY(random.[Next](20, 100))
        Next
        'Uncomment this line if you want to show bar chart
        Chart1.Series("Series1").ChartType = SeriesChartType.Bar
        
        'Uncomment this line if you want to display Line chart
        'Chart1.Series["Series1"].ChartType = SeriesChartType.Line;
        
        'Uncomment this line if you want to display area chart
        'Chart1.Series["Series1"].ChartType = SeriesChartType.Area;
        
        'uncomment this line if you want to display column chart
        'Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
        
        'uncomment this line if you want to show radar chart
        'Chart1.Series["Series1"].ChartType = SeriesChartType.Radar;
        
        ' Set the bar width
        Chart1.Series("Series1")("PointWidth") = "0.5"
        
        ' Show data points labels
        Chart1.Series("Series1").IsValueShownAsLabel = True
        
        ' Set data points label style
        Chart1.Series("Series1")("BarLabelStyle") = "Center"
        
        ' Set data points label style
        Chart1.Series("Series1")("BarLabelStyle") = "Center"
        
        ' Show chart as 3D. Uncomment this line if you want to display your barchart as 3D
        'Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
        
        ' Draw chart as 3D Cylinder
        Chart1.Series("Series1")("DrawingStyle") = "Cylinder"
    End Sub
End Class

You can change the data source to any mode. you can also get the data from Database and set its chart series property.

You can also download the sample project from below link

Cheers!!!

pankaj

Download
pankaj_633987180126987023_ASP.NETChartControl.zip

Subscribe to Articles

Create charts, plot in asp.net using Microsoft .NET Charting control

Further Readings:

Read also another Resources from the same Author

Related Resource From The Same Category