Develop Reference

Google Charts (gague) display when no value in database

I want to display google chart (gauge) when there is no values in my database.
My idea for doing this is to insert a dummy value in an array to display the chart and once values are added to the database overrides it.
postData.php:
<?php require 'conn.php';?>
<?php
$sql = "SELECT * FROM sensors ORDER BY id DESC LIMIT 1";
$result = $conn->query($sql) or die ($conn->error);
// create data array
$data = [];
$data[] = [["label"=>"Label","type"=>"string"],["label"=>"Value","type"=>"number"]];
// output data of each row
while ($row = $result->fetch_assoc() {
$data[] = ["Temp", (float) $row["temp"]];
}
// write data array to page
echo json_encode($data, JSON_NUMERIC_CHECK);
$result->free();
$conn->close();
?>
index.php
<script>
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
var options = {
width: 400, height: 400,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
drawChart();
function drawChart() {
$.ajax({
url: 'postData.php',
dataType: 'json'
}).done(function (jsonData) {
// use response from php for data table
var data = google.visualization.arrayToDataTable(jsonData);
chart.draw(data, options);
// draw again in 5 seconds
window.setTimeout(drawChart, 5000);
});
}
});
</script>
<div id="chart_div" class="chart_hum" style="width: 400px; height: 120px;"></div>

I solved the issue by referencing this link and adding this code. Instead of doing in PHP using an array, I used JavaScript to add the dummy value and it gets overridden once data are inserted in to the database. Hope this maybe useful to someone in the future.
function drawChart() {
$.ajax({
url: 'postData.php',
dataType: 'json'
}).done(function (jsonData) {
// use response from php for data table
var data = google.visualization.arrayToDataTable(jsonData);
// added part
if (data.getNumberOfRows() === 0) {
data.addRows([
['Temp', 0]
]);
}
chart.draw(data, options);
// draw again in 5 seconds
window.setTimeout(drawChart, 5000);
});
}

Trouble plotting Mysql data to Google Charts using PHP, AJAX, JSON

I'm having trouble getting a Google Charts Line chart to generate. I've been perusing the web and stackexchange for examples.
Right now I'm logging temperature data from my nest and I'd like to plot it along with some other data.
This is my getdata_line.php mysql query with ajax:
<?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
*/
$con = mysqli_connect('192.168.146.1', 'TestUser', 'testuser1','nest') or die('Error connecting to server');
// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysqli_query($con,'SELECT * FROM nest_log WHERE time_stamp >= NOW() - INTERVAL 1 HOUR ORDER by time_stamp ASC');
$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' => 'time_stamp', 'type' => 'string'),
array('label' => 'index', 'type' => 'number'),
array('label' => 'current_temperature', 'type' => 'number')
);
$rows = array();
while($r = mysqli_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
//$temp[] = array('v' => $r['time_stamp']);
$temp[] = array('v' => $r['index']);
$temp[] = array('v' => (float) $r['current_temperature']); // 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;
?>
This is the line.php:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawLine);
function drawLine() {
var json = $.ajax({
url: 'getdata_line.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
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="line_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
getdata_line.php is returning:
{"cols":[{"label":"index","type":"number"},{"label":"current_temperature","type":"number"}],"rows":[{"c":[{"v":"625"},{"v":70.591982}]},{"c":[{"v":"626"},{"v":70.591982}]},{"c":[{"v":"627"},{"v":70.591982}]},{"c":[{"v":"628"},{"v":70.591982}]},{"c":[{"v":"629"},{"v":70.591982}]},{"c":[{"v":"630"},{"v":70.591982}]},{"c":[{"v":"631"},{"v":70.591982}]},{"c":[{"v":"632"},{"v":70.591982}]},{"c":[{"v":"633"},{"v":70.591982}]},{"c":[{"v":"634"},{"v":70.591982}]},{"c":[{"v":"635"},{"v":70.591982}]},{"c":[{"v":"636"},{"v":70.591982}]},{"c":[{"v":"637"},{"v":70.591982}]},{"c":[{"v":"638"},{"v":70.591982}]},{"c":[{"v":"639"},{"v":70.591982}]},{"c":[{"v":"640"},{"v":70.591982}]},{"c":[{"v":"641"},{"v":70.591982}]},{"c":[{"v":"642"},{"v":70.591982}]},{"c":[{"v":"643"},{"v":70.591982}]},{"c":[{"v":"644"},{"v":70.591982}]},{"c":[{"v":"645"},{"v":70.591982}]},{"c":[{"v":"646"},{"v":70.591982}]},{"c":[{"v":"647"},{"v":70.591982}]},{"c":[{"v":"648"},{"v":70.591982}]},{"c":[{"v":"649"},{"v":70.591982}]},{"c":[{"v":"650"},{"v":70.591982}]},{"c":[{"v":"651"},{"v":70.591982}]},{"c":[{"v":"652"},{"v":70.591982}]},{"c":[{"v":"653"},{"v":70.591982}]},{"c":[{"v":"654"},{"v":70.591982}]}]}

want to add custome tool tip to my line chart (tool tip will have some html content like button and some text)

I am populating the chart by getting the datatable as the response from other page.
so am creating json object at other side and transfer to the requesting site and their i parse the object and create the datatable and populating the chart.
var jsonData = $.ajax({
type: "post",
url: "getHourDrillChart.php",
data: $("#my_form").serialize(),
dataType: "json",
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData); //alert(""+obj.toSource());
var dataHour = google.visualization.arrayToDataTable(obj);\
chart.setDataTable(dataHour);
chart.setOptions(options);
chart.draw();
other site where i creating the chart data :
$data[0] = array('Hour',$user);
$getTownLocalityInfo = mysql_query($SQLString);
# set heading
//$data[0] = array('hour','Count');
$i=1;
$dayArray = array();
while( $row = mysql_fetch_assoc($getTownLocalityInfo)){
$date = $row['date'];
$hour = $row['day_hours'];
$count = (int) $row['sumCount'];
$dayArray[] = $hour;
mysql_query("INSERT INTO trend_hour_chart_temp(hour,$user,userId) VALUES ('$hour',$count,'$staffId')");
$data[$i] = array($hour , $count);
$i++;
}
echo json_encode($data);

You need to add a tooltip column to your DataTable. Add the tooltip column to your column headers first:
$data[0] = array('Hour', $user, array('type' => 'string', 'role' => 'tooltip'));
Then, in the while loop, add the tooltip data to your rows:
$data[$i] = array($hour , $count, 'tooltip string');

Error in response to storage.get: TypeError: Cannot read property 'style' of null

I am trying to get data from an oracle database into an LineChart using GoogleCharts but I am always confronted with some errors.
If someone could help me, it'd be greatly appreciated !
Here is the script in order to get the line chart :
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart (callback) {
var jsonData = $.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url:"getData.php",
dataType:"json",
async:false,
}).responseText;
//Create our data table out of JSON data loaded from server
var data = new google.visualization.DataTable(jsonData);
//PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: 'Whatever'
};
//Instantiate and draw our chart, passing in some options
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div">Test</div>
</body>
And here is the Phpscript to get the data into a table :
<?php
//On exécute la requete
//on appelle la page connexion
include 'connexion.php';
//La requete
$query = "
select A.*
from (
SELECT
EB_RESULTAT_DTM.VALEUR AS EB_RESULTAT_VALEUR,
EB_RESULTAT_DTM.INSERT_DATE AS EB_RESULTAT_INSERT_DATE,
rank() over (partition by EB_INDICATEUR_DTM.INDICATEUR_NUM,to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') order by to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymmdd') asc) as rang,
to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') as MOIS_M
FROM COMPTEUR_OWNER.EB_DOMAINE_DTM EB_DOMAINE_DTM
INNER JOIN
COMPTEUR_OWNER.EB_INDICATEUR_DTM EB_INDICATEUR_DTM
ON EB_DOMAINE_DTM.EB_DOMAINE_DTM_NUM =
EB_INDICATEUR_DTM.X_EB_DOMAINE_DTM_NUM
INNER JOIN
COMPTEUR_OWNER.EB_RESULTAT_DTM EB_RESULTAT_DTM
ON EB_INDICATEUR_DTM.INDICATEUR_NUM =
EB_RESULTAT_DTM.X_EB_INDICATEUR_DTM_NUM
WHERE EB_INDICATEUR_DTM.INDICATEUR_NUM = 106
AND EB_RESULTAT_DTM.INSERT_DATE BETWEEN ADD_MONTHS (SYSDATE, -9)
AND SYSDATE
) a where a.rang=1
";
$stid = oci_parse($conn, $query);
oci_execute($stid);
$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)
*/
array('label' => 'Nombres', 'type' => 'number'),
array('label' => 'Date', 'type' => 'date'),
// etc...
);
$rows = array();
while($r = oci_fetch_assoc($stid)) {
$temp = array();
// each column needs to have data inserted via the $temp array
$temp[] = array('v' => $r['EB_RESULTAT_VALEUR']);
$temp[] = array('v' => $r['EB_RESULTAT_INSERT_DATE']);
// etc...
// 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);
// return the JSON data
echo $jsonTable;
?>
I ever get this message :
Error in response to storage.get: TypeError: Cannot read property 'style' of null
Or :
undefined is not a function

There are a few errors I can see. First, you are parsing the wrong object in the arrayToDataTable method:
var data = google.visualization.arrayToDataTable($.parseJSON(drawChart));
should be:
var data = google.visualization.arrayToDataTable($.parseJSON(jsonData));
Then, your columns are in the wrong order. The LineCharts expect the x-axis values (your dates) to be the first column, then the y-values in the second column. Also, you need to output your numbers as numbers instead of strings; just add JSON_NUMERIC_CHECK to the json_encode function call:
echo json_encode($rows, JSON_NUMERIC_CHECK);

So i've changed both of the PHP and script but now get another error message :
Uncaught Error: Not an array
Here is the php getData2.php :
<?php
include 'connexion.php';
//
$sql = oci_parse($conn, "select A.*
from (
SELECT
EB_RESULTAT_DTM.VALEUR AS EB_RESULTAT_VALEUR,
EB_RESULTAT_DTM.INSERT_DATE AS EB_RESULTAT_INSERT_DATE,
rank() over (partition by EB_INDICATEUR_DTM.INDICATEUR_NUM,to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') order by to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymmdd') asc) as rang,
to_char(EB_RESULTAT_DTM.INSERT_DATE,'yyyymm') as MOIS_M
FROM COMPTEUR_OWNER.EB_DOMAINE_DTM EB_DOMAINE_DTM
INNER JOIN
COMPTEUR_OWNER.EB_INDICATEUR_DTM EB_INDICATEUR_DTM
ON EB_DOMAINE_DTM.EB_DOMAINE_DTM_NUM =
EB_INDICATEUR_DTM.X_EB_DOMAINE_DTM_NUM
INNER JOIN
COMPTEUR_OWNER.EB_RESULTAT_DTM EB_RESULTAT_DTM
ON EB_INDICATEUR_DTM.INDICATEUR_NUM =
EB_RESULTAT_DTM.X_EB_INDICATEUR_DTM_NUM
WHERE EB_INDICATEUR_DTM.INDICATEUR_NUM = 106
AND EB_RESULTAT_DTM.INSERT_DATE BETWEEN ADD_MONTHS (SYSDATE, -9)
AND SYSDATE
) a where a.rang=1");
oci_execute($sql);
//while (($row = oci_fetch_array($sql, OCI_BOTH)) != false) {
// Utilisez des noms de colonne en majuscule pour les indices des tableau associatif
// echo $row['EB_RESULTAT_VALEUR'];
// echo $row['EB_RESULTAT_INSERT_DATE'];
//}
//json_encode($row);
$rows = Array();
while($row = oci_fetch_array($sql, OCI_BOTH)){
array_push($rows, $row[0], $row[1]);
}
echo json_encode($rows);
oci_free_statement($sql);
oci_close($conn);
?>
It returns this :
["9415094","14\/09\/13 14:39:56,000000","9419954","02\/11\/13 13:25:26,000000","9355868","07\/12\/13 13:25:58,000000","9369691","04\/01\/14 13:24:19,000000","9385231","01\/02\/14 13:26:36,000000","9414700","01\/03\/14 13:26:28,000000"]
And here is the index_4.php (script) :
<html>
<head>
<title>Donné volumétrique</title>
<!-- Load jQuery -->
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>
<!-- Load Google JSAPI -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData2.php",
dataType: "json",
async: false
}).responseText;
var data = google.visualization.arrayToDataTable($.parseJSON(drawChart));
var options = {
title: 'Donnée Volumétrique'
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;">
</div>
</body>
</html>
And here's what I get :
http://imgur.com/w8jexhJ "Error message"
EDIT 1 : $rows = Array(); to $rows = Array(array('Nombres', 'Date'));
AND
array_push($rows, $row[0], $row[1]); to array_push($rows, array($row[0], $row[1]));
Getting : [["Nombres","Date"],["9419954","02\/11\/13 13:25:26,000000"],["9355868","07\/12\/13 13:25:58,000000"],["9369691","04\/01\/14 13:24:19,000000"],["9385231","01\/02\/14 13:26:36,000000"],["9414700","01\/03\/14 13:26:28,000000"]]

Passing an array to Google Charts API via AJAX

I can grab the number of users who signed up a specific date by using:
$query = "SELECT COUNT(*), DATE(FROM_UNIXTIME(time)) as date
FROM user GROUP BY DATE(FROM_UNIXTIME(time))";
Google Charts supplies the following JS function for drawing the graph
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Users');
data.addRows([
['03-22-2012', 1000],
['03-23-2011', 1170]
]);
var options = {
title: 'Signups'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
How do I use my database query with data.addRows via ajax? Im stuck here..help is appreciated!
Thanks

Here solved by using a test table stackoverflow with one row, test_ (a timestamp) to mimick what you describe above :
time_
-------------------
2013-07-07 13:23:31
2013-07-07 13:23:44
2013-07-09 13:23:50
2013-07-08 13:23:57
2013-07-09 13:24:07
2013-07-09 13:24:14
googlechart.php, which output will be fetched through AJAX :
<?
mysql_connect('localhost','root','xxx');
mysql_select_db('test');
$SQL='SELECT COUNT(*) as c, DATE(time_) as date FROM stackoverflow GROUP BY DATE(time_)';
$result=mysql_query($SQL);
$a = array();
$a['cols'][] = array('type' => 'string', 'label' => 'Day');
$a['cols'][] = array('type' => 'number', 'label' => 'Users');
while($row = mysql_fetch_assoc($result)) {
$a['rows'][]['c']=array(
array('v' => $row['date']),
array('v' => $row['c'])
);
}
echo json_encode($a);
?>
googlechart.html (actual page) using jQuery AJAX and produces a google chart as described above :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
<script type="text/javascript">
function drawChart(json) {
var data = new google.visualization.DataTable(json);
var options = {
title: 'Signups'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
$(document).ready(function() {
$.ajax({
url: 'googlechart.php',
success : function(json) {
drawChart(json);
}
});
});
</script>
<div id="chart_div" style="width:500px;height:400px;"></div>
result :