Click here to Skip to main content
15,868,141 members
Articles / Web Development / ASP.NET

Google Charts in ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.36/5 (11 votes)
3 Oct 2011CPOL3 min read 56K   39   16
How to use Google charts for reporting purposes in ASP.NET web applications

Introduction 

Through this article, I'll try to explain how we can use Google charts for reporting purposes in ASP.NET web applications. Report generation is something quite common and we need to generate self explanatory and good looking reports to the users almost every time. “Images always speak more than words”. So instead of just showing the figures in our reports, we can let the users see diagrammatic charts which can help the users to analyze the whole data more quickly and easily. Though Microsoft itself has its charting controls for .NET, but we integrate it with other great technology by Google.

Google has its own, very awesome and simple application for charting purposes which we will be using here. I will request you to get a brief idea of what Google charts are, by visiting the following link:

So to brief stuff down, let’s look at one example. This may give you a better understanding of Google charts. To generate charts using “Google charts”, we need to pass the proper parameters.

Visit the below link:

In the chart, you can clearly see the chart title as “Amount Collection”. If you see the URL carefully, you’ll notice that the name has been passed by the URL, similarly the other details like the type of graph, axes, data on which chart is plotted, etc. all are passed through the URL only.

Now let’s go through all the parameters that we need to pass to get the required charts.

ParameterDescription
chtThe chart type. Google offers around a dozen different chart types, including line charts, bar charts, pie charts, and others.
chs The chart size. This value is expressed as chs=WIDTHxHEIGHT, where WIDTH and HEIGHT are the number of pixels wide and tall to draw the chart. E.g., chs=250x100. The maximum height and width is 1,000 pixels, and the product of the height and width cannot exceed 300,000 pixels.
chtt The chart title.
chd The chart data. When using this parameter, you must specify the data format. The Google Chart API allows for different data encodings. The simplest to use is text encoding and is denoted by the letter t. Following the encoding, place a colon (:) and then a comma-delimited list of data point values. The default text encoding requires that the data points be floating point values between zero (0.0) and one hundred (100.0). To correctly scale the data, convert each data point into a percentage of the largest data point. Ergo, the largest value will have a value of 100.0, whereas the others will be expressed in terms of a percentage of the largest – 50.0 for one that’s half as large as the largest, 25.0 for one that’s 25% of the largest, and so forth. To render a chart with data points of 10, 20, and 8, you’d send: chd=t:50,100,40. Note the t:, which indicates that the data is formatted using text encoding. You can alternatively use the text encoding method with data scaling, which allows data points of any positive or negative floating point number. With this approach, you must specify a scaling parameter (chds). The examples in this article use the default text encoding, limiting all data point values between zero and one hundred.

The above mentioned parameters are just the basic ones that you will need to plot charts. There are more advanced options that you can use as per your requirements.

Till now, we were just discussing about Google charts. As you are now having an idea of what Google charts, we can go forward with how we can implement these in our web application.

You can refer the below code for much better understanding. All I have done is that I have used an image control and the image path is the Google chart path. In the below example, we are trying to generate charts as per the options selected.

C#
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.Text;
namespace WebApplication1
{
    public partial class graphs : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            int count = 0;
            int count1 = 0;
            int maxvalue = 0;
            float amount = 0;
            string[] amounts = null;
            string[] months = null;
            string query = "";
            if ((Convert.ToInt32(to_month.SelectedItem.Value) – 
		Convert.ToInt32(from_month.SelectedItem.Value) + 1) > 0)
            {
                amounts = new string[Convert.ToInt32(to_month.SelectedItem.Value) - 
		Convert.ToInt32(from_month.SelectedItem.Value) + 1];
                months = new string[Convert.ToInt32(to_month.SelectedItem.Value) - 
		Convert.ToInt32(from_month.SelectedItem.Value) + 1];
                query = "select * from chart_table where month>=’" + 
		from_month.SelectedItem.Value + "‘ and month }
                StringBuilder chartUrl = new StringBuilder
	       ("http://chart.apis.google.com/chart?chs=500×200&chtt=Amount%20Collection");
                string connection = 
		System.Configuration.ConfigurationManager.ConnectionStrings
			["ApplicationServices"].ConnectionString;
                SqlConnection con = new SqlConnection(connection);
                SqlDataAdapter da = new SqlDataAdapter(query, con);
                DataSet ds = new DataSet();
                da.Fill(ds);
                GridView1.DataSource = ds.Tables[0];
                GridView1.DataBind();
                maxvalue = Convert.ToInt32(ds.Tables[0].Rows[0][1].ToString());
                while (count1 {
                  if (maxvalue < Convert.ToInt32(ds.Tables[0].Rows[count1][1].ToString()))
                  {
                      maxvalue = Convert.ToInt32(ds.Tables[0].Rows[count1][1].ToString());
                  }
                  count1++;
                }
                chartUrl.Append("&chxt=x,y");
                chartUrl.AppendFormat("&chxr=1,0,{0}", maxvalue.ToString("0?));
                chartUrl.AppendFormat("&cht={0}", Server.UrlEncode
				(chart_type.SelectedValue));
                while (count{
                    amount = (Convert.ToInt32(ds.Tables[0].Rows
			[count][1].ToString()) * 100) / maxvalue;
                    amounts[count] = amount.ToString();
                    months[count] = ds.Tables[0].Rows[count][2].ToString();
                    count++;
                }
                chartUrl.AppendFormat("&chxl=0:|{0}", String.Join("|", months.ToArray()));
                chartUrl.AppendFormat("&chd=t:{0}", String.Join(",", amounts.ToArray()));
                Image1.ImageUrl = chartUrl.ToString();
                Image1.Visible = true;
         }
    }
}

Reference

  • Creating Charts with the Google Chart API by Scott Mitchell

License

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


Written By
Software Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionGoogle Chart Using jquery + asp.net Pin
vijay kumar sahu19-Sep-13 1:35
vijay kumar sahu19-Sep-13 1:35 
GeneralMy vote of 1 Pin
FernandoUY27-Dec-11 17:43
professionalFernandoUY27-Dec-11 17:43 
GeneralMy vote of 1 Pin
giammin10-Oct-11 6:25
giammin10-Oct-11 6:25 
GeneralMy vote of 2 Pin
Paul Conrad3-Oct-11 9:53
professionalPaul Conrad3-Oct-11 9:53 
GeneralMy vote of 1 Pin
Simon Bang Terkildsen2-Oct-11 23:26
Simon Bang Terkildsen2-Oct-11 23:26 
GeneralRe: My vote of 1 Pin
sujit07612-Oct-11 23:51
sujit07612-Oct-11 23:51 
GeneralRe: My vote of 1 Pin
Member 36059814-Oct-11 5:26
Member 36059814-Oct-11 5:26 
GeneralMy vote of 2 Pin
Ahmad Hyari2-Oct-11 23:00
Ahmad Hyari2-Oct-11 23:00 
GeneralRe: My vote of 2 Pin
sujit07612-Oct-11 23:52
sujit07612-Oct-11 23:52 
Question[My vote of 1] too short for an article.. Pin
Seishin#2-Oct-11 21:28
Seishin#2-Oct-11 21:28 
AnswerRe: [My vote of 1] too short for an article.. Pin
sujit07612-Oct-11 23:52
sujit07612-Oct-11 23:52 
GeneralMy vote of 5 Pin
Anurag Gandhi2-Oct-11 20:51
professionalAnurag Gandhi2-Oct-11 20:51 
GeneralRe: My vote of 5 Pin
sujit07612-Oct-11 21:18
sujit07612-Oct-11 21:18 
BugCheck your Google link, bad character. Pin
Gary Stafford2-Oct-11 15:38
Gary Stafford2-Oct-11 15:38 
Very interesting article. However, the link to example chart on Google did not work correctly for me. I received the following error:

Google
400. That’s an error.
Your client has issued a malformed or illegal request.
The parameter 'chs=500×200' does not match the expected format.
The parameter 'chs' must have a width of at least 1 pixel.
That’s all we know.

The '×' character (multiplication sign) between 500 and 200 is not correct. It should be a lower case letter 'x'
Regards,

Gary


modified 2-Oct-11 21:48pm.

GeneralRe: Check your Google link, bad character. Pin
sujit07612-Oct-11 19:36
sujit07612-Oct-11 19:36 

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.