ASP.NET Problems: Chart Example in C#.NET

First we need to install MS chart Software in our system if not installed. Follow this link to download MS Chart. Download

Now install it to your system.

Now Open Visual Studio 2008

1. Create a website and a page with name MSChart.aspx (anything)
2. Right click on Toolbox, click on "Add Tab" and name it to 'MS Chart'.
3. Right click on 'MS Chart' click on 'Choose Items..'
4. A dialogue box will appear here click on 'Browse..' button and add 'System.Web.DataVisualiztion.dll' which is
    stored "C:\Program Files\Microsoft Chart Controls\Assemblies" here.

5. Click OK.

Now you can see MS Chart Control in Toolbox inside MSChart Tab.

Note:

1.    Don't Forget to Register like
<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

2. Web.Congif
    1. <appSettings>
     

        <add key="ChartImageHandler" value="storage=file;timeout=20;" />

    2. <httpHandlers>

        <add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />

    3.    <handlers>       <! -- Attention: It may added already. -->

        <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

    4.    <assemblies>

        <add assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

Now your MSChart.aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MSChart.aspx.cs" Inherits="MSChart" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MS Chart</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="Chart1" runat="server">
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        <br />
        <asp:Chart ID="Chart2" runat="server" Width="506px">
            <Series>
                <asp:Series Name="Series1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <Area3DStyle Enable3D="true" />
                </asp:ChartArea>
            </ChartAreas>
            <Legends>
                <asp:Legend Name="Legend1" Title="Testing" BackColor="128, 255, 255">
                </asp:Legend>
            </Legends>
        </asp:Chart>
        <br />
        <asp:Chart ID="Chart3" runat="server" Width="506px">
            <Series>
                <asp:Series Name="Population" ChartType="Column" BorderColor="Red" Color="Blue">
                </asp:Series>
                <asp:Series Name="People In Job" ChartType="Column" BorderColor="Red" Color="Green">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
            <Legends>
                <asp:Legend Name="Legend1" Title="Jobs" BackColor="Gray">
                </asp:Legend>
            </Legends>
        </asp:Chart>
    </div>
    </form>
</body>
</html>

and your C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
using MyFreameWork;
using System.Data;

public partial class MSChart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        fillTempPulseEtc();
        Countries();
        CountriesAndJobs();
    }

    private void fillTempPulseEtc()
    {
        double[] temp = { 0.0, 111.0 };
        double[] time = { -23.0, 23.59 };
        for (int i = 0; i <= 2; i++)
        {
            Chart1.Series[0].Points.DataBindXY(time, temp);
        }
        Chart1.Series[0].ChartType = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
    }

    private void Countries()
    {
        MyDataUtility objUtility = new MyDataUtility();
        DataTable dt = new DataTable();
        dt = objUtility.GetDataTable("Select * From Countries");
        if (dt.Rows.Count > 0)
        {
            Chart2.DataSource = dt;

            Chart2.Series["Series1"].XValueMember = Convert.ToString("Names");
            Chart2.Series["Series1"].YValueMembers = Convert.ToString("Populations");

            Chart2.DataBind();
        }
    }

    private void CountriesAndJobs()
    {
        MyDataUtility objUtility = new MyDataUtility();
        DataTable dt = new DataTable();
        dt = objUtility.GetDataTable("Select * From CountriesAndJobs");
        if (dt.Rows.Count > 0)
        {
            Chart3.DataSource = dt;

            Chart3.Series["Population"].XValueMember = Convert.ToString("Names");
            Chart3.Series["Population"].YValueMembers = Convert.ToString("Populations");

            Chart3.Series["People In Job"].XValueMember = Convert.ToString("Names");
            Chart3.Series["People In Job"].YValueMembers = Convert.ToString("PeoplesInJob");

            Chart3.DataBind();
        }
    }
}

** I used here framework you can simply use SQLConnection, Command etc.

Here it your database.

Create Table Countries(Contid int Identity(1,1),Names varchar(50), Populations bigint)

Insert INTO Countries values('India',1250000000)
Insert INTO Countries values('Pakistan',250000000)
Insert INTO Countries values('China',2250000000)
Insert INTO Countries values('America',20000000)
Insert INTO Countries values('Australia',350000000)
Insert INTO Countries values('South Africa',2000000)
Insert INTO Countries values('Nepal',1250000000)
Insert INTO Countries values('Bhutan',300000)
Insert INTO Countries values('New Zeland',100000000)
--    Select * From Countries

Create Table CountriesAndJobs(Contid int Identity(1,1),Names varchar(50), Populations bigint,PeoplesInJob bigint)

Insert INTO CountriesAndJobs values('India',1250000000,1050000000)
Insert INTO CountriesAndJobs values('Pakistan',250000000,20000000)
Insert INTO CountriesAndJobs values('China',2250000000,250000000)
Insert INTO CountriesAndJobs values('America',20000000,200000)
Insert INTO CountriesAndJobs values('Australia',350000000,30000000)
Insert INTO CountriesAndJobs values('South Africa',2000000,2000000)
Insert INTO CountriesAndJobs values('Nepal',1250000000,150000000)
Insert INTO CountriesAndJobs values('Bhutan',300000,300000)
Insert INTO CountriesAndJobs values('New Zeland',100000000,100000000)

--    Select * From CountriesAndJobs

--SELECT *, SUM(PeoplesInJob) OVER() as TotalSales FROM CountriesAndJobs

Ref: http://www.codeproject.com/Tips/269985/How-to-draw-charts-in-asp-net-using-MS-chart

I hope it may help you.

Cheers!!!

ASP.NET Problems

Tuesday 8 October 2013

Chart Example in C#.NET

No comments:

Post a Comment

About Me