Google Chart API example : Display data on chart made easy

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 class=”data_form”>
<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.

<script type=”text/javascript”>
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 web form

Label
Value
Percentage

Total:

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.

<script type=”text/javascript”>
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”

<script type=”text/javascript”>
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.

<a name=”chartshow”></a>
<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.

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Google Chart API example : Display data on chart made easy”


  1. No Comments

Leave a Reply

You must login to post a comment.