using google graphs on your website

Use googles graph api to draw graph on your website. Google provides an extensible javascript api using which you can draw beautiful graphs on your website. All the processing is done through javascript and therefore you can use it to draw graphs/charts in an asp.net website or a php webiste or just simple plain static html. Check a simple demo here.

There are many charting/graph libraries out there. And some are really cool. You have inbuilt charting libraries for .net, open source libraries for php. So why another one? Well coz its google!! that alone should suffice as to why you should use it over other libraries. Its extensible, intuitive, responsive and lightening fast – doesn’t add overheads in your page load time.

For a list of options available check this page.

OK, i liked it. now how do i add google javascript graph into my website ?

Its fairly simple.
1) You add the necessary javascript files to your page.

<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
         google.load('visualization', '1', { packages: ['corechart', 'imagelinechart'] });
// ]]></script>

the first line loads the core js api. Second script loads only the required script, eg: corechat, imagelineChart.

2) Create a 2 dimensional array in javascript from your data. The api always takes the data in the form of a 2 dimensional array. For example:

var data = google.visualization.arrayToDataTable([
		['Brand', 'Asia', 'Europe', 'America', 'Australia'],
		  ['BMW', 100, 200, 300, 45],
		  ['Mercedes', 110, 210, 180, 55],
		  ['Audi', 75, 654, 24, 10],
		  ['Ford', 100, 400, 316, 111]
	]);

3) Call appropriate method to draw the type of graph you need passing optional arguments if any.
For example if you want to draw a bar graph from the above data you’d do something like:

var options = {
	title: 'Car Brands across continents',
	vAxis: { title: "Customers (*10000)" },
	hAxis: { title: "Car Brands" },
	seriesType: "bars",
	series: { 5: { type: "line"} }
};

var chart = new google.visualization.ComboChart(document.getElementById('holder'));
chart.draw(data, options);

Integrating google graphs with ASP.NET or php

Ok so that was all javascript. How to use it with some actual data coming from database through my server side code? Well, we’ll still use javascript, to perform the actual drawing of the graph. But we will generate the data passed to it (the 2 dimensional javascript array mentioned before) on server side. Perform some database operation and your business logic over it to generate the string corresponding to the aforementioned data array and then you can pass the string to javascript. Now this passing of values between your sever code to the javascript on client end can be done in many ways. In php you can simply ‘echo’ the value inside the javascript (if the javascript is on the page itself). In .net, well one of the ways could be storing the value in some hidden field and then readin it through your javascript.
I encountered one strange thing though. I was doing inline scripts to put the values, something like:

var data = google.visualization.arrayToDataTable([
<%= hdn_GraphData.Value.ToString();%>
]);

But it was causing single quotes ” ‘ ” to get replaced by its html character code ” &#39; “. So i had to do a workaround and i did this

<% string str =hdn_GraphData.Value.ToString().Replace("&#39;","'"); Response.Write(str);%>

🙂 (i know, that’s a dirty way of doing it but it was quick, so…)

Hope you find it useful.


Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

One thought on “using google graphs on your website”

Leave a Reply

Your email address will not be published. Required fields are marked *