Click here to Skip to main content
Click here to Skip to main content

Generate Graph by WebChart

, 16 Sep 2012
Rate this:
Please Sign up or sign in to vote.
How to create a Line, Bar, and Pie chart for your ASP.NET application
Sample Image

Introduction

In this tip, I would like to show you how to create a Line, Bar, and Pie chart for your ASP.NET application.

Background

I assume you have basic knowledge of ASP.NET and C#.NET, and so on. Recently I discovered a free .NET charting tool from Microsoft employee Carlos Aguilar Mares called WebChart. This tip provides a quick overview of WebChart, demonstrating how to use it in an ASP.NET Web application. This .dll file provides various types of charts such as LineChart, PieChart, BarChart, etc. To prepare for a chart using this DLL file, follow the steps given below.

How to Configure

Step 1

Start a new web-site; give the name as WebChartGraph.Net. It will give you one Default.aspx and .cs file.

Step 2

Download source code and copy the Webchart.dll file from the bin directory to some location. Now add a reference to this WebChart.dll file.

Step 3

Now register this DLL in your Page directory such as shown below. And get the Chart control from this DLL.

<%@ Register TagPrefix="Web" Namespace="WebChart" Assembly="WebChart" %>

Using the Code

Load Initial Data

DataTable dt = new DataTable("Chart");

private void LoadGraphData()
{
    // Preparing Data Source For Chart Control
    
    DataColumn dc = new DataColumn("Month", typeof(string ));
    DataColumn dc1 = new DataColumn("Qnty", typeof(int ));
    dt.Columns.Add(dc);
    dt.Columns.Add(dc1);
    DataRow dr1 = dt.NewRow();
    dr1[0] = "January";
    dr1[1] = 8465;
    dt.Rows.Add(dr1);
    DataRow dr2 = dt.NewRow();
    dr2[0] = "February";
    dr2[1] = 9113;
    dt.Rows.Add(dr2);
    DataRow dr3 = dt.NewRow();
    dr3[0] = "March";
    dr3[1] = 18305;
    dt.Rows.Add(dr3);
    DataRow dr4 = dt.NewRow();
    dr4[0] = "April";
    dr4[1] = 23839;
    dt.Rows.Add(dr4);
    DataRow dr5 = dt.NewRow();
    dr5[0] = "May";
    dr5[1] = 11167;
    dt.Rows.Add(dr5);
    DataRow dr6 = dt.NewRow();
    dr6[0] = "June";
    dr6[1] = 8838;
    dt.Rows.Add(dr6);
    DataRow dr7 = dt.NewRow();
    dr7[0] = "July";
    dr7[1] = 10800;
    dt.Rows.Add(dr7);
    DataRow dr8 = dt.NewRow();
    dr8[0] = "August";
    dr8[1] = 12115;
    dt.Rows.Add(dr8);
    DataRow dr9 = dt.NewRow();
    dr9[0] = "September";
    dr9[1] = 7298;
    dt.Rows.Add(dr9);
    DataRow dr10 = dt.NewRow();
    dr10[0] = "October";
    dr10[1] = 13186;
    dt.Rows.Add(dr10);
    DataRow dr11 = dt.NewRow();
    dr11[0] = "November";
    dr11[1] = 10460;
    dt.Rows.Add(dr11);
    DataRow dr12 = dt.NewRow();
    dr12[0] = "December";
    dr12[1] = 9964;
    dt.Rows.Add(dr12);
}

Default Visual Configuration

private void ConfigureColors()
{
    ChartControl1.Legend.Position = LegendPosition.Bottom;
    ChartControl1.Legend.Width = 80;
    ChartControl1.YAxisFont.ForeColor = Color.Black;
    ChartControl1.XAxisFont.ForeColor = Color.Black;
    ChartControl1.ChartTitle.Text = "Month wise Product Distribution";
    ChartControl1.ChartTitle.ForeColor = Color.White;
    ChartControl1.XTitle.Text = "Month";
    ChartControl1.YTitle.Text = "Product";
}

Generate Pie Graph

protected void btnPie_Click(object sender, EventArgs e)
{
    PieChart chart = new PieChart();

    chart.Fill.Color = Color.FromArgb(50, Color.SteelBlue);
    chart.Line.Color = Color.SteelBlue;
    chart.Line.Width = 1;
    chart.ShowLineMarkers = true;
    chart.DataLabels.Visible = true;

    X = "Month";
    Y = "Patient No.";

    chart.DataXValueField = X;
    chart.DataYValueField = Y;

    //looping through datatable and adding to chart control
    foreach (DataRow dr2 in dt.Rows)
    {
        chart.Data.Add(new ChartPoint(dr2["Month"].ToString(), 
                 (int)System.Convert.ToSingle(dr2["Qnty"])));
    }

    chart.ShowLegend = true;

    ConfigureColors();

    ChartControl1.Charts.Clear();
    ChartControl1.Charts.Add(chart);
    ChartControl1.HasChartLegend = true;
    ChartControl1.Legend.Width = 140;

    ChartControl1.RedrawChart();
}

Generate Bar Graph

protected void btnBar_Click(object sender, EventArgs e)
{
    ColumnChart chart = new ColumnChart();
    chart.Fill.Color = Color.FromArgb(50, Color.SteelBlue);
    chart.Line.Color = Color.Black;
    chart.Line.Width = 1;
    chart.ShowLineMarkers = true;
    chart.DataLabels.Visible = true;

    X = "Month";
    Y = "Patient No.";

    chart.DataXValueField = X;
    chart.DataYValueField = Y;

    //looping through datatable and adding to chart control
    foreach (DataRow dr2 in dt.Rows)
    {
        chart.Data.Add(new ChartPoint(dr2["Month"].ToString(), 
                (int)System.Convert.ToSingle(dr2["Qnty"])));
    }

    ConfigureColors();
    ChartControl1.Charts.Clear();
    ChartControl1.Charts.Add(chart);

    ChartControl1.HasChartLegend = true;
    chart.ShowLegend = false;
    ChartControl1.RedrawChart();
}

Generate Line Graph

protected void btnLine_Click(object sender, EventArgs e)
{
    try
    {
        LineChart chart = new LineChart();

        chart.Fill.Color = Color.FromArgb(50, Color.SteelBlue);
        chart.Line.Color = Color.SteelBlue;
        chart.Line.Width = 1;
        chart.ShowLineMarkers = true;
        chart.DataLabels.Visible = true;
        
        X = "Month";
        Y = "Patient No.";

        chart.DataXValueField = X;
        chart.DataYValueField = Y;

        //looping through datatable and adding to chart control
        foreach (DataRow dr2 in dt.Rows)
        {
            chart.Data.Add(new ChartPoint(dr2["Month"].ToString(), 
                 (int)System.Convert.ToSingle(dr2["Qnty"])));
        }

        ConfigureColors();
        ChartControl1.Charts.Clear();
        ChartControl1.Charts.Add(chart);

        ChartControl1.HasChartLegend = true;
        chart.ShowLegend = false;
        ChartControl1.RedrawChart();
    }
    catch (Exception ex)
    {
        Response.Write(ex.Message);
    }
}

References

Conclusion

Carlos' WebChart control is an easy-to-use, free component for creating a variety of common graphs. Adding WebCharts to a project takes just a few minutes of time and a handful of lines of code. While WebCharts is easy to get using, it is limited to fairly simple graphing scenarios and creating aesthetically pleasing charts can take a bit of trial and error in adjusting assorted WebCharts properties. But if all you need are a few simple charts for your Web application, WebCharts will be the tools you are looking for.

Conclusion

Please check out my FusionChartGraph example where I will show you how to create some breathtaking graph generation.

History

  • 13th September, 2012: Initial version

License

This article, along with any associated source code and files, is licensed under The BSD License

Share

About the Author

mparvez
Software Developer (Senior) icddr,b
Bangladesh Bangladesh
More than 8 years experience on Programming and Project implementation, I was primarily involved with projects for private organization,Govt.(Bangladesh Army,DG Health,RJSC), NGO (SEDF,WFP). Presently I am working at ICDDR,B and enhancing Hospital Management System developed by Microsoft Dynamic NAV and Windows Mobile Application 5.0
 
An active supporter of Open Source technology, my interested areas are ERP, IT Audit, Data warehouse, BI etc.
 
Playing Guitar for 15 years, my interested music style is Blues Rock,Neo Classical.
 
Certification
 
70-540:Microsoft® Windows Mobile® 5.0 - Application Development
MB7-514:Microsoft Dynamics™ NAV 5.0 C/SIDE Introduction
MB7-516:Microsoft Dynamics™ NAV 5.0 Solution Development
MB7-517:Microsoft Dynamics™ NAV 5.0 Installation and Configuration
MB7-515:Microsoft Dynamics™ NAV 5.0 Financials
70-432:Microsoft SQL Server 2008 - Implementation and Maintenance
70-450:PRO: Designing, Optimizing and Maintaining a Database Administrative Solution Using Microsoft SQL Server 2008
70-448:Microsoft SQL Server 2008, Business Intelligence Development and Maintenance
312-50:Certified Ethical Hacker
 
Web :http://masudparvezshabuz.appspot.com
Blog :http://masudparvezshabuz.wordpress.com
linkedin :http://www.linkedin.com/in/masudparvez
Follow on   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 17 Sep 2012
Article Copyright 2012 by mparvez
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid