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

Exploring the Google Chart API with ASP.NET

, 8 Dec 2008
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 XploringGoogleChartAPI.zip - 46.07 KB

Introduction

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.

Acknowledgement

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.

Explanation

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.

http://chart.apis.google.com/chart?...

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:

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

chart1.JPG

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.  

validation1.JPG

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:" +
            txtData.Text;
        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;
        Response.Redirect("Chart.aspx");
    }

bar1.JPG

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 = "http://chart.apis.google.com/chart?" +
            Session["url"].ToString();
    }

License

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

Share

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.

Comments and Discussions

 
GeneralMy vote of 1 PinmemberParas Shah9-Dec-08 0:13 
GeneralPlz Mention the ASP.NET version Pinmembersyednedian1-Nov-08 15:35 
GeneralRe: Plz Mention the ASP.NET version [modified] PinmemberSaiyad Faraz8-Dec-08 22:49 
GeneralFormatting & Image size issues. Pinmember SAMir Nigam 28-May-08 22:15 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 9 Dec 2008
Article Copyright 2008 by Saiyad Faraz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid