Click here to Skip to main content
12,753,109 members (37,917 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked
Posted 28 May 2008

Exploring the Google Chart API with ASP.NET

, 9 Dec 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
This article explains a mini website that I have made. The website has two main purposes. First to demonstrate how to use the Google Chart API. Second to make a meaningful website for beginners using the basic features of ASP.NET.
Download - 46.07 KB


This article explains a mini website that I have made. The website has two main purposes. First to demonstrate how to use the Google Chart API. Second to make a meaningful website for beginners using the basic features of ASP.NET.


I would like to thank Mr. Syed Muhammad Akber Zaidi for guiding me to the way to code project.

Pre requisits and the Intended audience?

A little ASP.NET or even knowledge of any server side technology.


The Google Chart API facilitates the user to get the charts of their specified data in.png format.The user uses the following URL, appeding to it different parameters as the query string that govern chart geneation.

The API offers some 9 types of charts. I have used only the basic 4.

  • Bar Chart
  • Line Chart
  • Pie Chart
  • Venn Diagram

What different pages are doing...

The website has 6 .aspx pages, a .master page and 7 .aspx.cs files. Here are their functionalities:

A template from which all other pages inherit. Master pages provide the designer with a mean of designing websites with consistent look.
First page of the site. Contains controls to specify options common to all charts. 
Contains options relating to a bar chart.
Contains options relating to a line chart.
Contains options relating to a pie chart.
Contains options relating to a venn diagram.
Displays the final chart.


Validation Controls

Not all possible inputs are valid for the web application and the Google Chart API. Some constraints need to be in place to make sure that inputs are valid. ASP.NET provides the developer with a bunch of controls that validate the user input on text boxes, dropdown lists and etc. I have put in place a few of these controls on the Default.aspx to validate the range for image size and to ensure presence of necessary inputs. These controls flag an error by showing the specified error message next to the control validated. The best thing about these controls is that these do not cause a post back.  


Anatomy of the WebApp! 

When the user is finished with entering all the necessary data on Default.aspx corecctly, he/she clicks the 'Next' button on the page. This causes the event handler against the button to begin action. The code behing the button is : 

protected void btnNext_Click(object sender, EventArgs e)
    Session["width"] = txtWidth.Text;
    Session["height"] = txtHeight.Text;
    string url = "chs=" + txtWidth.Text + "x" + txtHeight.Text + "&chd=t:" +
    if (txtLabels.Text != string.Empty)
        url += ("&chl=" + txtLabels.Text);
    if (txtColors.Text != string.Empty)
        url += ("&chco=" + txtColors.Text);
    Session["url"] = url;

    Response.Redirect(drpType.SelectedValue + ".aspx");

The code above creates session variables to keep track of size parameters. It also builds the final image URL and assign it to another Session variable url. At the end the code transfers the control to the next page depending upon the value selected in the dropdown menu for chart type.  

On the next page, there are options for the selected type of graph. The Next button on the page has some code of this sort: 

protected void btnNext_Click(object sender, EventArgs e)
    string temp = Session["url"].ToString();
    string url = "cht=b" + grpDirection.SelectedValue + grpType.SelectedValue;
    Session["url"] = url + "&" + temp;


The above code extracts the value from the url Session variable, appends more option values to it and reassigns the value to it. Finally the control is tranferred to Chart.aspx where the Page_Load event sets up the image as per the user input as below:

protected void Page_Load(object sender, EventArgs e)
    imgChart.Width = int.Parse(Session["width"].ToString());
    imgChart.Height = int.Parse(Session["height"].ToString());
    imgChart.ImageUrl = "" +


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


About the Author

Saiyad Faraz
Pakistan Pakistan
I am doing Bachelors in Computer Sciences and Information Technology from NED University of Engineering and Technology, currently studying in the third year.

My interest are cricket, chess and most importantly programming.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 1 Pin
Paras Shah9-Dec-08 1:13
memberParas Shah9-Dec-08 1:13 
GeneralPlz Mention the ASP.NET version Pin
syednedian1-Nov-08 16:35
membersyednedian1-Nov-08 16:35 
GeneralRe: Plz Mention the ASP.NET version [modified] Pin
Saiyad Faraz8-Dec-08 23:49
memberSaiyad Faraz8-Dec-08 23:49 
GeneralFormatting & Image size issues. Pin
SAMir Nigam28-May-08 23:15
member SAMir Nigam 28-May-08 23:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170217.1 | Last Updated 9 Dec 2008
Article Copyright 2008 by Saiyad Faraz
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid