Click here to Skip to main content
6,595,444 members and growing! (21,270 online)
Email Password   helpLost your password?
Web Development » Charts, Graphs and Images » Images and multimedia License: The Code Project Open License (CPOL)

Google Charts in .NET

By Madhukar Mudunuru

Google Charts in .NET
C#, HTML, ASP, ASP.NET, Ajax
Version:3 (See All)
Posted:20 Jan 2008
Updated:21 Jan 2008
Views:21,796
Bookmarked:47 times
Announcements
Loading...
 
Search    
Advanced Search
Add to IE Search
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
13 votes for this article.
Popularity: 2.69 Rating: 2.42 out of 5
4 votes, 33.3%
1
2 votes, 16.7%
2
1 vote, 8.3%
3
1 vote, 8.3%
4
4 votes, 33.3%
5

Introduction

Google provided an open API for generating the charts which can be used in our commercial web applications. We can generate various graphs using the Google chart API.

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into it:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World  

The following types of charts are available:

  • Line Chart
  • Bar Chart
  • Pie Chart
  • Venn diagram
  • Scatter Plot

The following article demonstrates the usage of graph in ASP.NET.

Use the image tag and place the source there:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:asR&chs=400x150&chl=A|B|C" />

We can pass a variety of parameters to enhance the graph. Following are a few:

Graph Title

We can place the chart title using:

e.g.: chtt=Welcome chts

Graph Style

We can place the graph tile color and size of the font:

chts for Title Style : color,size

e.g.: chts=225ff0,20

Graph Colors

We can have different colors:

chco for colors: one or many

e.g.: chco=ff0000,00ff00,0000ff

Passing the Data

The data can be passed using various encoding techniques like simple, text, etc. I have done the simple encoding for you in C#:

public string GenerateGraph()
{
    //Get the Data to draw the graph
    DataTable dt = new DataTable();
    dt = dtGraphData;

    //Get the max vals in the Data
    int maxval = GetMaxVal(dt);    

    //SAMPLE: http://chart.apis.google.com/chart?
    //        cht=p3&chs=400x200&chd=s:asR&chl=A|B|C
    string GReqURL = http://chart.apis.google.com/chart?chts=+
		GTitleColor+","+GTitleSize+"&chtt="+GTitle+"&chco="+GColors+
		"&cht=p3&chs="+GWidth+"x"+GHeight;

    //chts for Title Style : color,size
    //chtt for title text 
    //chco for colors: one or many

    string simpleEncoding = 
		"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    string chartData = string.Empty;
    string chartLabels = string.Empty;
    StringBuilder strbchartData = new StringBuilder();
    StringBuilder strbchartLabels = new StringBuilder();

    strbchartData.Append("&chd=s:");
    strbchartLabels.Append("&chl=");

    int strlen = simpleEncoding.Length - 1;
    foreach (DataRow dr in dt.Rows)
    {
        //Generate the chart DATA
        int arrVal = Convert.ToInt32(dr[2]);
        int len = strlen * arrVal / maxval;
        strbchartData.Append(simpleEncoding.Substring(len, 1));

        //Generate the Chart Labels
        strbchartLabels.Append(dr[1] + "|");
    }

    //Converting the string builder to string
    chartData = strbchartData.ToString();
    chartLabels = strbchartLabels.ToString();

    chartLabels = chartLabels.Substring(0, chartLabels.Length - 1);
    return GReqURL + chartData + chartLabels;
} 

The code is written in C#. You can assign all the properties you want to assign and finally call the GenerateGraph method which returns the string. Below is the code sample. The entire article is explained using the PIE graph example. The remaining graphs can also be achieved using the same method.

    DataTable dt = new DataTable();
    //Get the Data the data table and pass it         
    dt = GetGraphData();                
    PieGraph pg = new PieGraph();
    pg.GraphColors = "5566AA";
    pg.GraphHeight="125";
    pg.GraphWidth="250";
    pg.GraphTitle = "Welcome to Test Graph";
    pg.GraphTitleColor = "112233";
    pg.GraphTitleSize = "20";
    pg.dtData = dt;
    
    GGReq = pg.GenerateGraph();        
    
    this.DataBind();
}

DataTable GetGraphData()
{
    SqlConnection con = new SqlConnection(connectionstring);
    SqlCommand cmd = new SqlCommand("Select * from GraphSupp", con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    da.Fill(dt);
    return dt;
} 

I took 3 cols id, description and the count and generated a string and assigned that to the image source.
This is to show how to pass data to the PI graph, we can also perform simple encoding for other graphs...

Steps for Generation of the Graph

  1. Create a DataTable which contains column-2 as labels and column-3 as Data
  2. Create an instance of PieGraph (refer to the text doc I have attached)
  3. Assign the properties
  4. Place the return string to the source of the image tag
  5. Graph is generated

Points of Interest

  1. Easy way of generation of graphs
  2. Less effort on the web server as there is no need to render the image using Drawing name space
  3. Enhanced look and feel and open to all

References

History

  • 20th January, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Madhukar Mudunuru


Member
Myself working for Infronics Systems. Spends free time, working in Microsoft and Google technologies.
Occupation: Web Developer
Company: Infronics Systems
Location: India India

Other popular Charts, Graphs and Images articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 5 of 5 (Total in Forum: 5) (Refresh)FirstPrevNext
GeneralGoogle charts for window PinmemberirafN7864:58 21 Jan '08  
GeneralRe: Google charts for window PinmemberMadhukar Mudunuru18:14 21 Jan '08  
GeneralWhere's the project PinmemberDewey22:23 20 Jan '08  
GeneralRe: Where's the project PinmemberMadhukar Mudunuru23:49 20 Jan '08  
GeneralRe: Where's the project PinmemberDewey23:28 23 Jan '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 21 Jan 2008
Editor: Deeksha Shenoy
Copyright 2008 by Madhukar Mudunuru
Everything else Copyright © CodeProject, 1999-2009
Web16 | Advertise on the Code Project