In this article I’m going to explain how to create dynamic Google chart in ASP.NET using C#. I have already written many articles for Google charts

Create google column chart from database in ASP.NET

Create google multi series column chart from database in ASP.NET

Create google stacked column chart from database in ASP.NET

Create google multi series Line chart from database in ASP.NET

Create google Gauge chart from database in ASP.NET

Create google Geochart with Region mode in ASP.NET

Create google Geochart with Marker mode in ASP.NET

I got a requirement that I should make graphical representation for statistics data. So I’ve preferred to create Pie Chart. Already we’ve standard web control for Pie Chart in ASP.NET and AjaxControl Toolkit provides controls for Pie Chart.

Google provides functionality to create Pie Chart in ASP.NET. Here I’ll show you how to create Google Pie Chart

          First create a class that defines data which is required to display in Google chart. Sample code is given below,

Sample Code:

public class Data

{

    public string ColumnName = "";

    public int Value = 0;

 

    public Data(string columnName, int value)

    {

        ColumnName = columnName;

        Value = value;

    }

}    

          Here we’ve to create a WebMethod to get the data from server. 

    [WebMethod]

    public static List<Data> GetData()

    {

        SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial                                                                                                    Catalog=Northwind;Integrated Security=True");

        DataSet ds = new DataSet();

        DataTable dt = new DataTable();

        conn.Open();

        string cmdstr = "select top 5 Country, COUNT(CompanyName) [Total Suppliers] from                                           [Suppliers] group by Country";

        SqlCommand cmd = new SqlCommand(cmdstr, conn);

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        adp.Fill(ds);

        dt = ds.Tables[0];

        List<Data> dataList = new List<Data>();

        string cat="";

        int val=0;

        foreach (DataRow dr in dt.Rows)

        {

            cat=dr[0].ToString();

            val=Convert.ToInt32( dr[1]);

            dataList.Add(new Data(cat, val));

        }

        return dataList;

    }

         

Here we’ve to use following code to load google JSAPI and JQuery libraries

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">      </script>

    <script type="text/javascript" src="//www.google.com/jsapi"></script>

 

Then we’ve to use following code to load Google visualization and package libraries

<script type="text/javascript">

        google.load('visualization', '1', { packages: ['corechart'] });

</script>

 

Here I’ll make Ajax call from client to get json object with containing data to be displayed

$(document).ready(function () {

            $.ajax({

                type: 'POST',

                dataType: 'json',

                contentType: 'application/json',

                url: 'Default.aspx/GetData',

                data: '{}',

                success:

                    function (response) {

                        drawVisualization(response.d);

                    }

            });

        })

 

Here is the function that can be used to draw the chart

function drawVisualization(dataValues) {

            var data = new google.visualization.DataTable();

            data.addColumn('string', 'Column Name');

            data.addColumn('number', 'Column Value'); 

            for (var i = 0; i < dataValues.length; i++) {

                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);

            } 

            new google.visualization.PieChart(document.getElementById('visualization')).

                draw(data, { title: "Google Chart demo" });

        }

 

Here we need to create a div tag that would be displayed Google chart

<div id="visualization" style="width: 600px; height: 350px;">

</div>

 

Designer source code:

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 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></title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="//www.google.com/jsapi"></script>

    <script type="text/javascript">

        google.load('visualization', '1', { packages: ['corechart'] });

    </script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.ajax({

                type: 'POST',

                dataType: 'json',

                contentType: 'application/json',

                url: 'Default.aspx/GetData',

                data: '{}',

                success:

                    function (response) {

                        drawVisualization(response.d);

                    } 

            });

        })

 

        function drawVisualization(dataValues) {

            var data = new google.visualization.DataTable();

            data.addColumn('string', 'Column Name');

            data.addColumn('number', 'Column Value'); 

            for (var i = 0; i < dataValues.length; i++) {

                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);

            } 

            new google.visualization.PieChart(document.getElementById('visualization')).

                draw(data, { title: "Google Chart demo" });

        }        

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="visualization" style="width: 600px; height: 350px;">

    </div>

    </form>

</body>

</html>

  

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }  

    [WebMethod]

    public static List<Data> GetData()

    {

        SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial                                                                                            Catalog=Northwind;Integrated Security=True");

        DataSet ds = new DataSet();

        DataTable dt = new DataTable();

        conn.Open();

        string cmdstr = "select top 5 Country, COUNT(CompanyName) [Total Suppliers] from                                           [Suppliers] group by Country";

        SqlCommand cmd = new SqlCommand(cmdstr, conn);

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        adp.Fill(ds);

        dt = ds.Tables[0];

        List<Data> dataList = new List<Data>();

        string cat="";

        int val=0;

        foreach (DataRow dr in dt.Rows)

        {

            cat=dr[0].ToString();

            val=Convert.ToInt32( dr[1]);

            dataList.Add(new Data(cat, val));

        }

        return dataList;

    }

}

public class Data

{

    public string ColumnName = "";

    public int Value = 0; 

    public Data(string columnName, int value)

    {

        ColumnName = columnName;

        Value = value;

    }

}   

 

 

cytotec abortion

an abortion pill buy abortion pills online
medical abortion pill online abortion pill abortion pill


View demo Download
http://www.dotnetfox.com/Document/1031/0Demo1.gif

If you enjoyed this article, get email updates (it's free).


Related Articles
  • How to create dynamic Google chart in ASP.NET using C#In this article I’m going to explain how to create dynamic Google chart in ASP.NET using C#. I got a requirement that I should make graphical representation for statistics data. So I’ve preferred to create Pie Chart. Already we’ve standard web control for Pie Chart in ASP.NET and AjaxControl Toolkit provides controls for Pie Chart. Google provides functionality to create Pie Chart in ASP.NET. Here...
  • How to create dynamic Ajax Pie Chart in ASP.NET using C# In this article I’m going to explain how to create dynamic Ajax pie chart in ASP.NET using C#. Ajax Control toolkit provides a ways to create Pie Chart that would be display the statistics data in graphical representation. The PieChart control enables you to render a pie chart from one or more PieChartValues. I already wrote some articles related to Chart
  • How to create dynamic Ajax Bar Chart in ASP.NET using C#In this article I’m going to explain how to create dynamic Ajax Bar Chart in ASP.NET using C#. Ajax Control toolkit provides a ways to create Bar Chart that would be display the statistics data in graphical representation. The BarChart control enables you to render a bar chart from one or more series of values. I already wrote some articles related to ASP.NET Chart
  • How to create dynamic Ajax Area Chart in ASP.NET using C#In this article I’m going to explain how to create dynamic Ajax Area Chart in ASP.NET using C#. Ajax Control toolkit provides a ways to create Area Chart that would be display the statistics data in graphical representation. The AreaChart control enables you to render area chart from one or more series of values. I already wrote some articles related to ASP.NET Chart.
  • Bind ASP.NET chart control from database using C# In this article I’m going to explain how to bind chart control from database in ASP.NET using C#. The Chart controls enable you to create ASP.NET pages with simple, intuitive, and visually compelling charts for complex statistical or financial analysis Here I’ll show you how to bind chart from SQL Server database.
  • Export Chart control to PDF document in ASP.NET using iTextSharp and C#In this article I’m going to explain how to export ASP.NET chart control to PDF using C#. I have already written an article about bind ASP.NET Chart control from database. You could refer this article by following this below link. Bind ASP.NET chart control from database using C#. If you are not aware to include iTextSharp.dll in ASP.NET project you could read this article How to create PDF docume...
  • Create google Geochart with region mode in ASP.NETIn this article I’m going to explain how to create google Geomap with region mode in ASP.NET. A Geochart is a map of a country, a continent, or a region with two modes: The region mode colorizes whole regions, such as countries, provinces, or states. The marker mode marks designated regions using bubbles that are scaled according to a value that you specify. A Geochart is rendered within the brows...
  • Create google Geochart with Marker mode in ASP.NETIn this article I’m going to explain how to create google Geomap with marker mode in ASP.NET. A Geochart is a map of a country, a continent, or a region with two modes: The region mode colorizes whole regions, such as countries, provinces, or states. The marker mode marks designated regions using bubbles that are scaled according to a value that you specify. A Geochart is rendered within the brows...
  • Create multi column or multi series bar chart from database in ASP.NET In this article I’m going to explain how to create multi column or multi series bar chart from database in ASP.NET using C#. The Chart controls enable you to create ASP.NET pages with simple, intuitive, and visually compelling charts for complex statistical or financial analysis. If you want to create multi series bar chart you could follow the steps given below. Step-1: First drag and drop Chart...
  • How to install or configure Fusion Charts in ASP.NETFusionCharts Free can effectively be used within ASP.NET applications. For the sake of better understanding, we have developed few sample applications using ASP.NET C#, where we have shown how easily FusionCharts can be integrated with ASP.NET. You can download Fusion charts by following the link given below or you can download source code which has been attached along with this article.

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox