Exploring the Google Chart API with 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. 

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.

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:" +
        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");
}

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();
}