google chart

날짜: 
index.php


<!DOCTYPE html>
<html>
<head>
 <title>My realtime chart</title>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
   // Load the Visualization API and the piechart package.
   google.load('visualization', '1', {'packages':['corechart']});

   // Set a callback to run when the Google Visualization API is loaded.
   google.setOnLoadCallback(drawChart);

   function drawChart() {
    var json = $.ajax({
     url: 'get_json.php', // make this url point to the data file
     dataType: 'json',
     async: false
    }).responseText;
    
    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(json);
    var options = {
     title: 'My Weekly Plan',
     is3D: 'true',
     width: 800,
     height: 600
    };
    // Instantiate and draw our chart, passing in some options.
    //do not forget to check ur div ID
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    setInterval(drawChart, 500 );
   }
  </script>  

</head>

<body>

   
 <div id="chart_div" style="width: 500px; height: 500px;"></div>
 
 
</body>
</html>




get_json.php
<?php
/* $server = the IP address or network name of the server
 * $userName = the user to log into the database with
 * $password = the database account password
 * $databaseName = the name of the database to pull data from
 * table structure - colum1 is cas: has text/description - column2 is data has the value
 */
$con = mysql_connect('localhost', 'username', 'password') or die('Error connecting to server');
 
mysql_select_db('yourdatabasename', $con); 

// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysql_query('SELECT * FROM yourtable');

$table = array();
$table['cols'] = array(
 /* define your DataTable columns here
  * each column gets its own array
  * syntax of the arrays is:
  * label => column label
  * type => data type of column (string, number, date, datetime, boolean)
  */
 // I assumed your first column is a "string" type
 // and your second column is a "number" type
 // but you can change them if they are not
    array('label' => 'cas', 'type' => 'string'),
 array('label' => 'data', 'type' => 'number')
);

$rows = array();
while($r = mysql_fetch_assoc($query)) {
    $temp = array();
 // each column needs to have data inserted via the $temp array
 $temp[] = array('v' => $r['cas']);
 $temp[] = array('v' => (int) $r['data']); // typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings
 
 // insert the temp array into $rows
    $rows[] = array('c' => $temp);
}

// populate the table with rows of data
$table['rows'] = $rows;

// encode the table as JSON
$jsonTable = json_encode($table);

// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

// return the JSON data
echo $jsonTable;
?>

댓글

댓글 쓰기