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:
- http://chart.apis.google.com/chart?chs=500x200&chtt=Amount%20Collection&chxt=x,y&chxr=1,0,900&cht=lc&chxl=0:|Jan|Feb|Mar|Apr|May|
Jun|Jul|Aug|Sep|Oct|Nov&chd=t:11,22,27,55,94,80,51,22,100,11,50
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.
Parameter |
Description |
cht |
The 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.
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: 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