The Google Chart API provides an easy way to generate a chart dynamically by sending a simple URL to Google Chart service as follows:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World
And Google Chart returns you an image of the chart. As shown the above you just need to pass the Google Chart with three parameters, which are cht (Chart Type), chd (The percentage distribution of your data on Chart), chs (Chart size), and the chl (Chart Label)
In this example I’m showing you how to create a JavaScript dynamic web form and lets the user key in the labels and the value for each label, and it’ll create the chart dynamically and display as image using Google Chart API.
1. The web form The web form presents three rows for letting the user key in the label and the value for each row. You just simply key in the value for each row, and it’ll take the sum of the row values and work out the percentage for each row, and when you click the Show Chart button, the PIE chart will be presented in the DIV with DOM ID “chart_div”.
<div id=”data_input_rows”>
<div class=”data_label”><b>Label</b></div>
<div class=”data_value”><b>Value</b></div>
<div class=”data_value”><b>Percentage</b></div>
<div class=”row_clr”></div>
<div class=”data_label”><input type=text id=”label_row1″ size=”25″ maxlength=”55″ value=”"/></div>
<div class=”data_value”><input type=text id=”value_row1″ size=”10″ value=”"/></div>
<div class=”data_value”><input type=text id=”perc_row1″ size=”10″ value=”"/></div>
<div class=”row_clr”></div>
<div class=”data_label”><input type=text id=”label_row2″ size=”25″ maxlength=”55″ value=”"/></div>
<div class=”data_value”><input type=text id=”value_row2″ size=”10″ value=”"/></div>
<div class=”data_value”><input type=text id=”perc_row2″ size=”10″ value=”"/></div>
<div class=”row_clr”></div>
<div class=”data_label”><input type=text id=”label_row3″ size=”25″ maxlength=”55″ value=”"/></div>
<div class=”data_value”><input type=text id=”value_row3″ size=”10″ value=”"/></div>
<div class=”data_value”><input type=text id=”perc_row3″ size=”10″ value=”"/></div>
<div class=”row_clr”></div>
</div>
<div class=”data_label”><input type=button
value=”Add More Rows” onClick=”addMoreRows();”/></div>
<div class=”data_value”>Total: <input type=text id=”tot_value” size=”10″ value=”"/></div>
<div class=”data_value”><input type=button onClick=”showChart();” value=”Show Chart”/></div>
<div class=”row_clr”></div>
<!– The hidden input to keep track of the number
of rows (by default is three) in the web form–>
<input type=hidden value=”3″ id=”numOfRows”/>
</div>
The JavaScript function addMoreRows() – This JavaScript function allows the user to add more rows on the form, so the user can key in more label and value pairs to be displayed on chart.
function addMoreRows()
{
var nor= parseInt(document.getElementById (‘numOfRows’).value);
var e= document.getElementById (‘data_input_rows’);
nor++;
var moreRows=’<div class=”data_label”><input type=text ‘+
‘ id=”label_row’+nor+’” size=”25″ maxlength=”55″ value=”"/></div>’+
’<div class=”data_value”><input type=text onChange=”calcPerc();” ‘+
’id=”value_row’+nor+’” size=”10″ value=”"/></div>’+
’<div class=”data_value”><input type=text id=”perc_row’+nor
+’” size=”10″ value=”"/></div>’+
’<div class=”row_clr”></div>’;
e.innerHTML+=moreRows;
document.getElementById (‘numOfRows’).value=nor;
}
</script>
The JavaScript function calcPerc() – This JavaScript function that calculates the percentage of each label-value pair
out of the total values, this function is called when the user has input the value column of each row and the sum of value is calculated
as well.
function calcPerc()
{
var nor= parseInt(document.getElementById (‘numOfRows’).value);
var totvalue=0;
// Work out the total first
for (var r=1; r<= nor; r++)
{
var e= document.getElementById ('value_row'+r);
if( !isNaN(parseFloat(e.value)))
{
totvalue+=parseFloat(e.value);
}
}
// Now calculate the percentage of each label-value pair
for (var r=1; r<= nor; r++)
{
var e= document.getElementById ('value_row'+r);
if( !isNaN(parseFloat(e.value)))
{
var v=parseFloat(e.value);
var perc= (v/totvalue)*100;
var e0= document.getElementById ('perc_row'+r);
e0.value = perc.toFixed(2);
}
}
var e1= document.getElementById ('tot_value');
e1.value=totvalue;
}
</script>
The JavaScript function showChart() – This JavaScript function that gathers the percentage of each
value and sends it to the Google Chart API and displays the chart in the DIV with ID “chart_div”
function showChart()
{
// Calculate once again for the total
// And percentage of each
calcPerc();
var chartdata=’&chd=t:’;
var chartlabel=’&chl=’;
for (var r=1; r<= nor; r++)
{
var e= document.getElementById ('perc_row'+r);
var e1= document.getElementById ('label_row'+r);
if( !isNaN(parseFloat(e.value)))
{
var chv=e.value;
chartdata+=chv.toFixed(2)+',';
chartlabel+=e1.value+'|';
}
}
/** Remove tailing “|” and “,” for chartlabel
and chartdata repectively if any */
if(chartlabel.lastIndexOf(‘|’)==chartlabel.length)
chartlabel=chartlabel.substring(0,chartlabel.lastIndexOf(‘|’));
if(chartdata.lastIndexOf(‘|’)==chartdata.length)
chartdata=chartdata.substring(0,chartdata.lastIndexOf(‘,’));
var chart_url=’http://chart.apis.google.com/chart?cht=p3&’+
chartdata+’&chs=250×100′+chartlabel;
var e2= document.getElementById (‘chart_div’);
e2.innerHTML= ‘<img src=”‘+chart_url+’” title=”Pie Chart for your data” border=”0″/>’;
document.location.href=’#chartshow’;
}
</script>
And finally the result as follows: the DIV with DOM ID “chart_div” which displays the PIE chart and an anchor “chartshow” for moving the focus to the chart when the user clicks the above “Show Chart” button.
<div id=”chart_div”></div>
Find out more about Google Chart API here for other parameters and how you can display other chart types, including PIE chart, Line Chart, Bar Chart, Radar Charts, Scatter Plot etc.
0 Responses to “Google Chart API example : Display data on chart made easy”