Trying to get my json output in the right format for a google visualisation line chart but I am clearly doing something wrong as it is returning table has no columns. As explained in the docs I am using Ajax to call a php page.
getData.php
<?php
class MyDB extends SQLite3
{
function __construct()
{
$this->open('water.db');
}
}
$db = new MyDB();
if(!$db){
echo $db->lastErrorMsg();
} else {
//echo "Opened database successfully\n";
}
$sql =<<<EOF
SELECT * from wT;
EOF;
$data = array();
$data['cols'][] = array('label' => 'Temperature', 'type' => 'number');
$data['cols'][] = array('label' => 'Time', 'type' => 'string');
$rows = array();
$ret = $db->query($sql);
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
$temp = array();
$temp[] = array('v' => (float) $row['fishTemp']);
$temp[] = array('v' => (string) $row['time']);
$rows = array('c' => $temp);
$data['rows'][] = $rows;
}
$jsonTable = json_encode($data, true);
var_dump($jsonTable);
$db->close();
?>
base.html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
console.log(jsonData);
//var obj = window.JSON.stringify(jsonData);
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Title'
};
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>
The output from the console looks like this....what am I missing?!
"{"cols":[{"label":"Temperature","type":"string"},{"label":"Time","type":"date"}],"rows":[{"c":[{"v":18.25},{"v":"2014-08-19 16:23:23"}]},{"c":[{"v":18.25},{"v":"2014-08-19 16:23:31"}]},{"c":[{"v":18.25},{"v":"2014-08-19 16:23:39"}]},{"c":[{"v":18.25},{"v":"2014-08-19 16:23:47"}]},{"c":[{"v":18.25},{"v":"2014-08-19 16:23:55"}]},{"c":[{"v":18.25},{"v":"2014-08-19 16:24:06"}]},{"c":[{"v":18.25},{"v":"2014-08-19 16:24:14"}]}
Loading dataTable with json accepts dates as a string in the following format: Date(year, month, day[,hour, minute, second[, millisecond]]) where everything after day is optional, and months are zero-based.
So for your first timeStamp, it should be :
{"v":"Date(2014,07,19,16,23,23)"}
If you want to use directly the milliseconds time:
{"v":"Date(1411154603000)}
Related
I'm trying to get Google Charts to display a graph of what I have in my MySQL database. Unfortunately, it's not displaying anything. I know there has to be some sort of small error that I'm missing.
<?php
mysql_connect("Localhpst", "Username", "password");
mysql_select_db("DBName") or die(mysql_error());
$sth=mysql_query("SELECT *
FROM Graph")
or die(mysql_error());
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'people', 'type' => 'string'),
array('label' => 'total', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string) $r['people']);
$temp[] = array('v' => (int) $r['total']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<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(<?=$jsonTable?>);
var options = {
title: ' Something ',
is3D: 'true',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
What is missing that would result in this displaying nothing on the screen. The only thing it displays is the "Something" from the title. I know there is data in the database, so that's not the issue. I'm also fairly certain it's not a connection issue, so I'm stumped.
i am new with PHP and Google charts. What i am trying to do it to make google charts with arduino data storred in a MYSL database. So far i insert data from arduino to mysql DB successfully but i face difficulties with the google charts.
Here is my PHP code:
<?php
$mysqli =mysqli_connect('localhost', 'root', '', 'Arduino');
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
$sql = mysqli_query($mysqli, 'SELECT * FROM analoog0');
if (!$sql) {
die("Error running $sql: " . mysql_error());
}
$results = array();
while($row = mysqli_fetch_assoc($sql))
{
$results[] = array(
'Date' => $row['Date'],
'Time' => $row['Time'],
'Temperature' => $row['Temperature']
);
}
$json = json_encode($results, JSON_PRETTY_PRINT);
echo $json;
?>
Here is the JSON output:
[ { "Date": "2013-10-24", "Time": "18:15:49", "Temperature": "24" },
{ "Date": "2013-10-24", "Time": "18:16:19", "Temperature": "24" },
{ "Date": "2013-10-24", "Time": "18:16:49", "Temperature": "24" },
{ "Date": "2013-10-24", "Time": "18:17:19", "Temperature": "23" } ]
And finally the HTM code:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.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 jsonData = $.ajax({
url: "localhost/Charts/chart_ver2.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
When i run the HTM code nothing happens - the screen remains blank.
Any help, guidance or redirection will be highly appreciated!
Thanks in advance!!
You need to format the data correctly for the Visualization API. This should put your data in the correct format:
$results = array(
'cols' => array (
array('label' => 'Date', 'type' => 'datetime'),
array('label' => 'Temperature', 'type' => 'number')
},
'rows' => array()
);
while($row = mysqli_fetch_assoc($sql)) {
// date assumes "yyyy-MM-dd" format
$dateArr = explode('-', $row['Date']);
$year = (int) $dateArr[0];
$month = (int) $dateArr[1] - 1; // subtract 1 to make month compatible with javascript months
$day = (int) $dateArr[2];
// time assumes "hh:mm:ss" format
$timeArr = explode(':', $row['Time']);
$hour = (int) $timeArr[0];
$minute = (int) $timeArr[1];
$second = (int) $timeArr[2];
$results['rows'][] = array('c' => array(
array('v' => "Date($year, $month, $day, $hour, $minute, $second)"),
array('v' => $row['Temperature'])
));
}
$json = json_encode($results, JSON_NUMERIC_CHECK);
echo $json;
In your javascript, I would recommend rearranging the way you handle the AJAX query. There's nothing wrong per say with the way you are doing it, but I think this is a more elegant solution:
function drawChart() {
$.ajax({
url: 'localhost/Charts/chart_ver2.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
});
}
You can't use the .responseText with a JSON response, as far as I know it only works for XML and Text.
$.ajax({
url: "localhost/Charts/chart_ver2.php",
dataType:"json",
async: false
}).responseText;
I would change it to:
$.ajax({
url: "localhost/Charts/chart_ver2.php",
dataType:"json",
async: false ,
success: function(data) {
jsonData = data;
}
});
Thanks for all the inputs from Stackoverflow. I am able to place the 2 google chart in one page, but the 2nd chart is showing below 1st chart. But i need both charts in parallel to each other.
Like:
1st chart from Left it should be 100th position, top =200 and 2nd chart should be 300th position, top=200. How can i achieve that. I used chartArea:{left:20,top:0,width:"50%",height:"75%"}, but i am not getting
<?php
$con=mysql_connect("","root","") or die("Failed to connect with database!!!!");
mysql_select_db("Loan_Bids", $con);
$sth = mysql_query("SELECT A.Bid_Size, B.Rating from bids_data A, loan_data B Where A.LoanID = B.LoanID");
$rows = array();
$rows1 = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'Bid_Size', 'type' => 'number'),
array('label' => 'Rating', 'type' => 'number')
);
$table1 = array();
$table1['cols'] = array(
array('label' => 'Bid_Size', 'type' => 'number'),
array('label' => 'Rating', 'type' => 'number')
);
$rows = array();
$rows1 = array();
while($r = mysql_fetch_assoc($sth)) {
$Ratingval = $r['Rating'];
if ($Ratingval == 1 )
{
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (int) $r['Bid_Size']);
// Values of each slice
$temp[] = array('v' => (int) $r['Rating']);
$rows[] = array('c' => $temp);
}
if ($Ratingval == 2 )
{
$temp1 = array();
// the following line will be used to slice the Pie chart
$temp1[] = array('v' => (int) $r['Bid_Size']);
// Values of each slice
$temp1[] = array('v' => (int) $r['Rating']);
$rows1[] = array('c' => $temp1);
}
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
$table1['rows'] = $rows1;
$jsonTable1 = json_encode($table1);
echo $jsonTable1;
?>
<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">
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(<?php echo $jsonTable?>);
var options = {
title: 'Rating1',
is3D: 'true',
color:'red',
hAxis: {title: 'Interest Rate'},
vAxis: {title: 'Bid Size'},
width:200,height:200
};
var data1 = new google.visualization.DataTable(<?php echo $jsonTable1?>);
var options1 = {
title: 'Rating2',
is3D: 'true',
hAxis: {title: 'Interest Rate'},
vAxis: {title: 'Bid Size'},
width:200,height:200
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
var chart1 = new google.visualization.ScatterChart(document.getElementById('chart_div1'));
chart1.draw(data1, options1);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="chart_div1"></div>
</body>
</html>
You need to use CSS to position the container divs on the page, not the chartArea options. Something like this should work:
#chart_div, #chart_div1 {
float: left;
width: 50%;
}
I am using this code to call data from mysql and display it as a pie chart. But the chart not showing the exact value from column, whereas its showing as a percentage.
I want to display the exact value.
This is my code
<?php
$con=mysql_connect("localhost","pramir_feedback","feedback") or die("Failed to connect with database!!!!");
mysql_select_db("pramir_feedback", $con);
$sth = mysql_query("SELECT * FROM average");
$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'data', 'type' => 'string'),
array('label' => 'average', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string) $r['data']);
$temp[] = array('v' => (int) $r['average']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<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(<?=$jsonTable?>);
var options = {
title: 'Average Data',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div">fgfgfgfhiefkefejkfwefhfwjkefewfwf</div>
</body>
</html>
Here you can see the chart http://innovatrix.co.in/feedback_priyajit/graph.php
Thanks.
You need to ad the pieSliceText paramater, which takes the following values 'percentage','value','label' and 'none'
var options = {
title: 'Average Data',
is3D: 'true',
width: 800,
height: 600,
pieSliceText : 'value'};
For more details , click here
https://developers.google.com/chart/interactive/docs/gallery/piechart#Configuration_Options
I am trying to create a Google line chart using their API and JSON.
Hard coded, this chart works:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Sales'],
['Jun 25', 12.25],
['Jun 26', 8.00],
['Jun 27', 20.50]
['Jun 28', 12.75]
]);
var options = {
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
However, trying to populate it using JSON, I can not get this to work:
<?php
$data = array();
$data["Date"] = "Sales";
$data["Jun 25"] = "12.25";
$data["Jun 26"] = "8.00";
$data["Jun 27"] = "20.50";
$data["Jun 28"] = "12.75";
$data = json_encode($data);
?>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<?php echo $data; ?>);
var options = {
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I'm obviously not encoding the array correctly. Google has an example page on how to populate their charts with JSON data here: https://developers.google.com/chart/interactive/docs/php_example
However, I could not find any examples for how to setup the JSON data with a simple line chart like this.
You're close.
$data = array(
array('Date', 'Sales'),
array('June 25', 12.25),
array('June 26', 8.00)
);
json_encode($data);
Output
[["Date","Sales"],["June 25",12.25],["June 26",8]]
See it in action.
Josh has already provided the correct answer. But in case you want to use google.visualization.DataTable instead of google.visualization.arrayToDataTable, first you can add columns separately then add json encoded php array:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('string', 'Sales');
data.addRows(<?php echo $data; ?>);
while($fetch = sqlsrv_fetch_array( $result, SQLSRV_FETCH_BOTH))
{
$grid[$count]= $fetch['Hour'];
$grid1[$count]=$fetch['Revenue'];
$data[$count]=array($fetch['Hour'],$fetch['Revenue']);
$count++;
}
$num=$count;
$data[0] = array('Hours','Revenue');
for ($i=0; $i<($num+1); $i++)
{
$data[$i]=(array('c' => array(array('v' => (string)$grid[$i]), array('v' =>(int)($grid1[$i]) ), ) ));
}
$sample=array(array('type' => 'string', 'label' => 'date'),array('type' => 'number', 'label' => 'Amount'));
$table['cols'] = $sample;
$table['rows'] = $data;
echo (json_encode($table ));
This worked for me,If You format your json like this it will definitely work