create line chart by using google chart api and php


linechart

phplinechart.php as code load google visualization and jquery to post and get value in json.




<html>
  <head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawLineGraph);
    function drawLineGraph()
             {
                 $.post("loadgraph.php",
                    {
                        type: "line"
                    },
                    function (result)
                    {
                        var data = new google.visualization.DataTable(result);
                        var options = {
                            title: "Line Graph Test"
                        };

                        var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
                        chart.draw(data, options);
                    }, "json"
                );
             }
</script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

loadmap.php:This file contain the exert the cols and rows of array into json format by using json_encode() method.

<?php
echo line_test();
 function line_test() {
    $array = array();

    $array['cols'][] = array('type' => 'string','label'=>'date');

    $array['cols'][] = array('type' => 'number','label'=>'cost');
 

    //HERE you have the difference
    $array['rows'][]['c'] = array(
        array('v' => "20-01-13"),
    array('v' => 35),
 
 
    );
    $array['rows'][]['c'] = array(
        array('v' => "21-01-13"),
     array('v' => 30),
 
 
    );

    return json_encode($array);
}
?>
Advertisements
About

myself pramodh kumar yet another php developer from India and have worked on oops,procedural,yii framework,codeigniter,wordpress,joomla,api and more.

Tagged with: , , , , , , , , , ,
Posted in google chart
3 comments on “create line chart by using google chart api and php
  1. Hi, this is really helpful, how could i connect to MySQL to put values from database into the array?

    Like

  2. Thank you, got it working in the end, the post worked great for me 🙂

    Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow php tutorial on WordPress.com
categories
Calendar
January 2014
M T W T F S S
« Dec   Feb »
 12345
6789101112
13141516171819
20212223242526
2728293031  
Follow me on Twitter
Blog Stats
  • 74,607 hits
%d bloggers like this: