PHP MySQL Google Chart JSON - Complete Example
Some might encounter this error either locally or on the server:
syntax error var data = new google.visualization.DataTable(<?=$jsonTable?>);This means that their environment does not support short tags the solution is to use this instead:
<?php echo $jsonTable; ?>And everything should work fine!
You can do this more easy way. And 100% works that you want
<?php $servername = "localhost"; $username = "root"; $password = ""; //your database password $dbname = "demo"; //your database name $con = new mysqli($servername, $username, $password, $dbname); if ($con->connect_error) { die("Connection failed: " . $con->connect_error); } else { //echo ("Connect Successfully"); } $query = "SELECT Date_time, Tempout FROM alarm_value"; // select column $aresult = $con->query($query);?><!DOCTYPE html><html><head> <title>Massive Electronics</title> <script type="text/javascript" src="loder.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ var data = new google.visualization.DataTable(); var data = google.visualization.arrayToDataTable([ ['Date_time','Tempout'], <?php while($row = mysqli_fetch_assoc($aresult)){ echo "['".$row["Date_time"]."', ".$row["Tempout"]."],"; } ?> ]); var options = { title: 'Date_time Vs Room Out Temp', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.AreaChart(document.getElementById('areachart')); chart.draw(data, options); } </script></head><body> <div id="areachart" style="width: 900px; height: 400px"></div></body></html>loder.js link here loder.js
use this, it realy works:
data.addColumn no of your key, you can add more columns or remove
<?php$con=mysql_connect("localhost","USername","Password") or die("Failed to connect with database!!!!");mysql_select_db("Database Name", $con); // The Chart table contain two fields: Weekly_task and percentage//this example will display a pie chart.if u need other charts such as Bar chart, u will need to change little bit to make work with bar chart and others charts$sth = mysql_query("SELECT * FROM chart");while($r = mysql_fetch_assoc($sth)) {$arr2=array_keys($r);$arr1=array_values($r);}for($i=0;$i<count($arr1);$i++){ $chart_array[$i]=array((string)$arr2[$i],intval($arr1[$i]));}echo "<pre>";$data=json_encode($chart_array);?><html> <head> <!--Load the AJAX API--> <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() { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(); data.addColumn("string", "YEAR"); data.addColumn("number", "NO of record"); data.addRows(<?php $data ?>); ]); 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); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body></html>