Sunday 12 June 2011

use Google API for show the line graph

PHP code----

$sql="select * FROM xyzreport where device_id='XYZ'";
$exe=mysql_query($sql);
$num=mysql_num_rows($exe);
if($num>0){
$x = $y = $z = array();
while($result=mysql_fetch_array($exe,MYSQL_ASSOC))
{
$x[] = $result['xplus'];
$y[] = $result['yplus'];
$z[] = $result['zplus'];
}
}

$script = '';
echo $script;


HTML:


<script src="https://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
//call function to load graph using google api.
createGraph(newArrX, 'chart_divX', 'X axis');
createGraph(newArrY, 'chart_divY', 'Y axis');
createGraph(newArrZ, 'chart_divZ', 'Z axis');

function createGraph(arrVal, loadGraphDivId, titleAxis) {
google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'vehcile');
        data.addRows(4);


for (loop=0; loop < arrVal.length; loop++)
         {
data.setValue(loop, 1,arrVal[loop]);
}

var chart = new google.visualization.LineChart(document.getElementById(loadGraphDivId));
        chart.draw(data, {width: 450, height: 300, title: titleAxis});
      }
}
 
</script>



<div id="chart_divX">

</div>
<div id="chart_divY">

</div>
<div id="chart_divZ">

</div>
</div>







2 comments:

  1. Can u give me link where u were using it ..?

    ReplyDelete
  2. http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html

    ReplyDelete