I want to draw a line chart using "Google Charts" tools. I'm fetching the data required for the line chart from the MySql database. The code for it is as below:
<?php
require_once('../includes/public-application-header.php');
$con=mysql_connect("localhost","root","eywaadmin") or die("Failed to connect with database!!!!");
mysql_select_db("OCN", $con);
$sql =" SELECT DATE_FORMAT( FROM_UNIXTIME( transaction_date ) , '%d/%m/%Y') 'transaction_date', COUNT(*) 'total count', SUM(transaction_status = 'success') ";
$sql .=" success, SUM(transaction_status = 'inprocess') inprocess, SUM(transaction_status = 'fail') fail, ";
$sql .=" SUM(transaction_status = 'cancelled') cancelled FROM user_transaction WHERE ";
$sql .=" transaction_date >= 1325376000 AND transaction_date <= 1373846400 GROUP BY date(FROM_UNIXTIME(transaction_date)) ";
$r= mysql_query($sql) or die(mysql_error());
$transactions = array();
while($result = mysql_fetch_array($r, MYSQL_ASSOC)){
$transactions[] = $result;
}
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles
// Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
array('label' => 'Transaction Date', 'type' => 'string'),
array('label' => 'Total Count', 'type' => 'number'),
array('label' => 'Success', 'type' => 'number'),
array('label' => 'Inprocess', 'type' => 'number'),
array('label' => 'Failed', 'type' => 'number'),
array('label' => 'Cancelled', 'type' => 'number'),
);
$rows = array();
foreach($transactions as $tr) {
$temp = array();
foreach($tr as $key=>$value){
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $key);
// Values of each slice
$temp[] = array('v' => (int) $value);
}
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<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: 'User Transaction Statistics',
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.LineChart(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>
I want to put the dates(i.e. transaction_date) on X-axis and Count values(i.e.10,20,30,40) from on Y-axis. But unfortunately I'm not getting the line chart in the desired format. I'm attaching the screen shot of what I got after executing the above code.
Can anyone please help me in this regard? Thanks in advance. If you want any further information I can add it to the question body.
As per the request from jmac I'm posting the json response created for your reference. If you still need ny other thing like the query output, etc. I can provide you. The screenshot of the line -chart is attached.
The main problem is that you are saving the column names as well as the column values in the data set. You should just be storing the values.
$temp = array();
foreach($tr as $key=>$value){
// Values of each slice
$temp[] = array('v' => (int) $value);
}
$rows[] = array('c' => $temp);
The second problem is that you are converting all the values to ints. If you want the date to display as an actual date, you should get rid of that conversion.
$temp = array();
foreach($tr as $key=>$value){
// Values of each slice
$temp[] = array('v' => $value);
}
$rows[] = array('c' => $temp);
I have no idea how your jsonTable looks like, but it should be formatted in this way:
['transaction date', 'Total count', 'Succes', 'In progress', 'Failed', 'Canceled'],
['19-7-2013', 50, 40, 5, 2, 3],
['20-7-2013', 60, 50, 5, 1, 4],
['21-7-2013', 50, 40, 5, 2, 3],
['22-7-2013', 60, 50, 5, 1, 4],
['23-7-2013', 50, 40, 5, 2, 3]
Are you able to send me your $jsonTable?
This link shows you an example of the table: http://jsfiddle.net/kxd2u/
I don't think you have a issue with the amount of data. I made some charts myself with a lot of data and all working fine!
You are inputting your data incorrectly. Try this:
foreach ($transactions as $tr) {
$temp = array();
$temp[] = array('v' => $tr['transaction_date']);
$temp[] = array('v' => (int) $tr['total count']);
$temp[] = array('v' => (int) $tr['success']);
$temp[] = array('v' => (int) $tr['inprocess']);
$temp[] = array('v' => (int) $tr['fail']);
$temp[] = array('v' => (int) $tr['cancelled']);
$rows[] = array('c' => $temp);
}
This will produce a chart with a discrete axis, where each row of data is evenly spaced on the chart, regardless of the distance between dates. If you want a continuous axis (see this as an example of the difference between discrete and continuous), you have to format your dates a bit differently:
in the columns:
array('label' => 'Transaction Date', 'type' => 'date')
in the rows:
$dateArray = explode('/', $tr['transaction_date']);
$year = $dateArray[2];
$month = $dateArray[1] - 1; // need to subtract 1 to convert to javascript month format
$day = $dateArray[0];
$temp[] = array('v' => "Date($year, $month, $day)", f: $tr['transaction_date']);
You can then format the date axis in the chart's options:
hAxis: {
format: 'd/M/yyyy'
}
As an aside, you can get rid of that $flag variable in PHP - it is an artifact left over from the original code that I posted as an example a long time ago in the Google Visualization API group. It keeps cropping up whenever that code gets copied, and no one ever deletes it.
Related
I trying build the charts with API google charts and i'am very lost... I have a database on PhpMyAdmin where there are 2 columns : numberPeople and date.
So, I would like to display on the chart, the number of people for year N and an other lines with year N-1...
But I don't understand.
Could you help me? I put to you in appendix what I have make
<?php
$pdoSynchro = new PDO("mysql:dbname=store17;host=localhost","root","");
$date_now = date("Y");
$date_old = date("Y")-1;
$anneeN = $pdoSynchro->query('SELECT nombrePersonne, date FROM compteur_client WHERE YEAR(date) ='.$date_now);
$anneeN1 = $pdoSynchro->query('SELECT nombrePersonne, date FROM compteur_client WHERE YEAR(date) ='.$date_old);
$table = array();
$table['cols'] = array(
// Labels for your chart, these represent the column titles
// Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
array('label' => 'Date', 'type' => 'string'),
array('label' => 'Nbr de personne en '.$date_now, 'type' => 'number'),
array('label' => 'Nbr de personne en '.$date_old, 'type' => 'number')
);
$rows = array();
while ($r = $anneeN->fetch()) {
$temp = array();
$temp[] = array('v' => $r['date']);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
var_dump($jsonTable);
//echo $jsonTable;
?>
<html>
<head>
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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.charts.load('current', {packages: ['corechart', 'bar']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.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: 'Nombre de clients par jour',
width: 1000,
height: 500,
};
// Do not forget to check your div ID
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="linechart_material"></div>
</body>
</html>
<?php
$pdoSynchro = new PDO("mysql:dbname=store17;host=localhost","root","");
$query = $pdoSynchro->query("SELECT date, nombrePersonne FROM compteur_client"); // select column
?>
<!DOCTYPE html>
<html>
<head>
<title>Massive Electronics</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></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.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Date','Nombre client par jour'],
<?php
while($row = $query->fetch()){
echo "['".$row["date"]."', ".$row["nombrePersonne"]."],";
}
?>
]);
var options = {
title: 'Nombre client/J',
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>
For the result of my JSON data ( it's part of data because, not all data is not displayed ) :
'{"cols":[
{"label":"Date N","type":"string"},
{"label":"Nbr de personne en 2018","type":"number"},
{"label":"Nbr de personne en 2017","type":"number"}],
"rows":[
{"c":[{"v":"2017-07-05 00:00:00.000000"},{"v":null},{"v":10}]},
{"c":[{"v":"2017-07-21 00:00:00.000000"},{"v":null},{"v":15}]},
{"c":[{"v":"2017-07-22 00:00:00.000000"},{"v":null},{"v":12}]},
{"c":[{"v":"2017-07-23 00:00:00.000000"},{"v":null},{"v":13}]},
{"c":[{"v":"2017-07-19 00:00:00.000000"},{"v":null},{"v":15}]},
{"c":[{"v":"2017-07-19 00:00:00.000000"}'
THANK YOU VERY MUCH FOR YOU'RE HELP 100000x THANK YOU !!!
EDIT
AND RESULT OF JSON :
{"cols":[
{"label":"Date","type":"date"},
{"label":"Nbr de personne en 2018","type":"number"},
{"label":"Nbr de personne en 2017","type":"number"}],
"rows":[
{"c":[{"v":"Date(2018, -1, , , , )","f":"2017--"},{"v":null},{"v":10}]},
{"c":[{"v":"Date(2018, -1, , , , )","f":"2017--"},{"v":null},{"v":15}]},
{"c":[{"v":"Date(2018, -1, , , , )","f":"2017--"},{"v":null},{"v":12}]},
{"c":[{"v":"Date(2018, -1, , , , )","f":"2017--"},{"v":null},{"v":13}]},
{"c":[{"v":"Date(2018, -1, , , , )","f":"2017--"},{"v":null},{"v":15}]}'
and i have a message : 'a.getTime' is not a function.
since you have two different queries, you'll need to load separate rows for each,
but you still need to populate both columns...
just use null in the column not being used in the query,
as such...
// old date
while ($r = $anneeN1->fetch()) {
$temp = array();
$temp[] = array('v' => $r['date']);
$temp[] = array('v' => null);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$rows[] = array('c' => $temp);
}
// now date
while ($r = $anneeN->fetch()) {
$temp = array();
$temp[] = array('v' => $r['date']);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$temp[] = array('v' => null);
$rows[] = array('c' => $temp);
}
note: probably makes sense to load old first, so dates are in correct order...
EDIT
to compare for year over year, first, we will need to use real dates, not strings...
change the first column from 'string' to 'date'...
array('label' => 'Date', 'type' => 'date'),
here...
$table = array();
$table['cols'] = array(
array('label' => 'Date', 'type' => 'date'),
array('label' => 'Nbr de personne en '.$date_now, 'type' => 'number'),
array('label' => 'Nbr de personne en '.$date_old, 'type' => 'number')
);
next, the dates will need to be in the same year on the x-axis,
so we need to change the old date to the current year.
but, we can use the formatted value to display the real date in the tooltip...
'v' = value, 'f' = formatted value
we can use google's json date string to pass real dates --> "Date(y, m, d, h, n, s)"
so in the "old" routine, we create the date using the current year,
and provide the real date in the formatted value,
then format the "now" dates the same way...
// old date
while ($r = $anneeN1->fetch()) {
// value - old date converted to now year
$rowDate = "Date(".$date_now.", ".((int) date_format($r['date'], 'm') - 1).", ".date_format($r['date'], 'd').", ".date_format($r['date'], 'H').", ".date_format($r['date'], 'i').", ".date_format($r['date'], 's').")";
// formatted value - real value
$rowStr = $date_old."-".date_format($r['date'], 'm')."-".date_format($r['date'], 'd');
$temp = array();
$temp[] = array('v' => $rowDate, 'f' => $rowStr); // <-- use formatted value for real date
$temp[] = array('v' => null);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$rows[] = array('c' => $temp);
}
// now date
while ($r = $anneeN->fetch()) {
$rowDate = "Date(".$date_now.", ".((int) date_format($r['date'], 'm') - 1).", ".date_format($r['date'], 'd').", ".date_format($r['date'], 'H').", ".date_format($r['date'], 'i').", ".date_format($r['date'], 's').")";
$rowStr = $date_now."-".date_format($r['date'], 'm')."-".date_format($r['date'], 'd');
$temp = array();
$temp[] = array('v' => $rowDate, 'f' => $rowStr);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$temp[] = array('v' => null);
$rows[] = array('c' => $temp);
}
to show the month abbreviation on the x-axis, add this to your chart options...
hAxis: {format: 'MMM'}
EDIT 2
need to convert date string from query to real date, see --> $realDate
// old date
while ($r = $anneeN1->fetch()) {
$realDate = date_create($r['date']);
// value - old date converted to now year
$rowDate = "Date(".$date_now.", ".((int) date_format($realDate, 'm') - 1).", ".date_format($realDate, 'd').", ".date_format($realDate, 'H').", ".date_format($realDate, 'i').", ".date_format($realDate, 's').")";
// formatted value - real value
$rowStr = $date_old."-".date_format($realDate, 'm')."-".date_format($realDate, 'd');
$temp = array();
$temp[] = array('v' => $rowDate, 'f' => $rowStr);
$temp[] = array('v' => null);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$rows[] = array('c' => $temp);
}
// now date
while ($r = $anneeN->fetch()) {
$realDate = date_create($r['date']);
$rowDate = "Date(".$date_now.", ".((int) date_format($realDate, 'm') - 1).", ".date_format($realDate, 'd').", ".date_format($realDate, 'H').", ".date_format($realDate, 'i').", ".date_format($realDate, 's').")";
$rowStr = $date_now."-".date_format($realDate, 'm')."-".date_format($realDate, 'd');
$temp = array();
$temp[] = array('v' => $rowDate, 'f' => $rowStr);
$temp[] = array('v' => (int) $r['nombrePersonne']);
$temp[] = array('v' => null);
$rows[] = array('c' => $temp);
}
could you please help here. Below is the script that am using to get the MYSQL data and pass that to google chart
$result = DB_query($sql, '', '', False, False);
$table = array();
$table['cols'] = array(
array('label' => 'col1', 'type' => 'string'),
array('label' => 'col2', 'type' => 'int')
);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['col1']);
// Values of each slice
$temp[] = array('v' => (int) $r['col2']);
$rows[] = array('c' => $temp);
}
Below is the js part
echo
'
<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 data = new google.visualization.DataTable(',$jsonTable,');
var options = {
title: "My Weekly Plan",
is3D: "true",
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
chart.draw(data, options);
}
</script>
<div id="chart_div"></div>
';
the problem here is even though am getting the correct value in the JSON variable, while loading the same to google chart am getting below error and hence the chart is not getting displayed.
"Uncaught Error: Invalid type, int, for column "col2".
at gvjs_R.gvjs_.Sda
Could you please help in understanding this issue.
change 'int' to 'number'
valid types for google data table...
type - A string with the data type of the values of the column. The type can be one of the following: 'string', 'number', 'boolean', 'date', 'datetime', and 'timeofday'
see DataTable addColumn
I'm trying to create Google Timeline chart using PHP & MySQL but without any success so far. So after endless hours of trying I've manage this so far:
First, I tried to create json using PHP (I believe that I've missed something here)
PHP
try {
$db = connectPDO();
$result = $db->query("SELECT naziv_plan AS name,
objava_odluke AS start_date,
datum_stupanja_glasnika AS end_date
FROM ispu_plan
WHERE datum_donosenja_plana
BETWEEN '2014-01-01'
AND CURDATE()
ORDER BY datum_donosenja_plana ASC");
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Godina', 'type' => 'string'),
array('label' => 'Odluka', 'type' => 'number'),
array('label' => 'glasnik', 'type' => 'number')
);
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) $r['naziv_plan']);
$temp[] = array('v' => (int) $r['objava_odluke']);
$temp[] = array('v' => (int) $r['datum_stupanja_glasnika']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table,JSON_NUMERIC_CHECK);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
Using this block of code, I get this JSON (and it's valid, checked with JSONLint) But, I detected some unusual formatting and even after JSON_NUMERIC_CHECK
{"cols":[{"label":"Godina","type":"string"},{"label":"Odluka","type":"number"},{"label":"glasnik","type":"number"}],"rows":[{"c":[{"v":"Stambenog susjedstva - Stubi\u010dki Trnac - I.ID"},{"v":2014},{"v":2014}]},{"c":[{"v":"Prostorni plan ure\u0111enja Grada Krapine - IV. ID"},{"v":2013},{"v":2015}]},{"c":[{"v":"Prostorni plan ure\u0111enja Grada Donja Stubica - I ID"},{"v":2014},{"v":2015}]},{"c":[{"v":"Generalni urbanisti\u010dki plan Grada Krapine - V.ID"},{"v":2015},{"v":2016}]}]}
And here is JS:
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var data = new google.visualization.DataTable(<?php echo $jsonTable;?>);
chart.draw(data);
After running this whole block of code, I get this error
Cannot read property 'v' of undefined
Is there something wrong with PHP code?
1.Maybe there is problem with date formatting?
Why do I get some weirdly formatted JSON Example -- *Stambenog susjedstva - Stubi\u010dki Trnac - I.ID when I should be getting instead of this ->Stubi\u010dki this-> Stubički
When I run SQL i get something like this (example below:)
+-----------+------------------+-----------------+
| name| | start_date | end_Date |
+-----------+------------------+-----------------+
| example_1 | 2014-06-06 | 2014-12-27 |
| example_1 | 2013-12-31 | 2015-06-07 |
| example_1 | 2016-06-06 | 2015-12-31 |
+-----------+------------------+-----------------+
*
I want to get something like this:
https://jsfiddle.net/api/post/library/pure/
UPDATE 1
So, I've managed to fix some of the addressed issues:
First, problem with weirdly formatted JSON, fixed with JSON_UNESCAPED_UNICODE
So, instead of this code:
$jsonTable = json_encode($table,JSON_NUMERIC_CHECK);
I used this :
$jsonTable = json_encode($table,JSON_UNESCAPED_UNICODE);
On the timeline note I've managed to successfully render timeline chart,but on x axis, instead of years and date it shows me hours.I believe that i've missed something when transforming from query to json.
(as seen in picture below)
I used this block of PHP code:
try {
$db = connectPDO();
$result = $db->query("SELECT naziv_plan, objava_odluke, datum_stupanja_glasnika
FROM ispu_plan
WHERE datum_donosenja_plana
BETWEEN '2014-01-01'
AND CURDATE()
ORDER BY datum_donosenja_plana ASC");
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Naziv plana', 'type' => 'string'),
array('label' => 'Odluka', 'type' => 'datetime'),
array('label' => 'glasnik', 'type' => 'datetime')
);
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) $r['naziv_plan']);
$temp[] = array('v' => (int) strtotime($r['objava_odluke']));
$temp[] = array('v' => (int) strtotime($r['datum_stupanja_glasnika']));
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table,JSON_UNESCAPED_UNICODE);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
And in JSON i get something like this 1402005600 for start date and in my table is formated like this 2014-06-06 and i believe that i need to get something like this 2014, 6, 6 to properly render and calculate timeline chart.
Please help with my lifetime crisis :)
UPDATE 2
Using whitehat knowledge and directions I'm feeling it that I'm one step closer to finally render this abomination :) Meanwhile, using directions and code that WhiteHat provided i created this:
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Godina', 'type' => 'string'),
array('label' => 'Odluka', 'type' => 'date'),
array('label' => 'glasnik', 'type' => 'date')
);
while ($row = $result->fetch(PDO::FETCH_ASSOC)){
$date1 = new DateTime();
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').")";
$temp = array();
$temp[] = array('v' => (string) $row['naziv_plan']);
$temp[] = array('v' => (string) $date2);
$temp[] = array('v' => (string) $date2);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table,JSON_NUMERIC_CHECK);
Output of json is this:
{"cols":[{"label":"Godina","type":"string"},{"label":"Odluka","type":"date"},{"label":"glasnik","type":"date"}],"rows":[{"c":[{"v":"Stambenog susjedstva - Stubi\u010dki Trnac - I.ID"},{"v":"Date(2016, 8, 30)"},{"v":"Date(2016, 8, 30)"}]},{"c":[{"v":"Prostorni plan ure\u0111enja Grada Krapine - IV. ID"},{"v":"Date(2016, 8, 30)"},{"v":"Date(2016, 8, 30)"}]},{"c":[{"v":"Prostorni plan ure\u0111enja Grada Donja Stubica - I ID"},{"v":"Date(2016, 8, 30)"},{"v":"Date(2016, 8, 30)"}]},{"c":[{"v":"Generalni urbanisti\u010dki plan Grada Krapine - V.ID"},{"v":"Date(2016, 8, 30)"},{"v":"Date(2016, 8, 30)"}]}]}
And i get timeline, but without lines :(
Something like this:
And this two errors:
Expected number, "MNaN,0LNaN,40.992
Error: attribute x: Expected length, "NaN"
UPDATE 3
Ok, I believe that I've manage somehow, and it works. Here is code below, hope it helps someone. Once again thank you WhiteHat :)
try {
$db = connectPDO();
$result = $db->query("SELECT naziv_plan, objava_odluke, datum_stupanja_glasnika
FROM ispu_plan
WHERE datum_donosenja_plana
BETWEEN '2014-01-01'
AND CURDATE()
ORDER BY datum_donosenja_plana ASC ");
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Godina', 'type' => 'string'),
array('label' => 'Odluka', 'type' => 'date'),
array('label' => 'glasnik', 'type' => 'date')
);
while ($row = $result->fetch(PDO::FETCH_ASSOC)){
// here I added rows in DateTime function, that was missing
$date1 = new DateTime($row['objava_odluke']);
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').")";
$date3 = new DateTime($row['datum_stupanja_glasnika']);
$date4 = "Date(".date_format($date3, 'Y').", ".((int) date_format($date3, 'm') - 1).", ".date_format($date3, 'd').")";
$temp = array();
$temp[] = array('v' => (string) $row['naziv_plan']);
$temp[] = array('v' => (string) $date2);
$temp[] = array('v' => (string) $date4);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table,JSON_NUMERIC_CHECK);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
Picture, to prove it:
I am pretty new at PHP and MySQL queries. I am trying to build a Google chart from a MySQL database but after searching on Google for countless hours I could not find what I need. However I found an example that could be useful but I still can't make it the way I want. Here's an example of my table.
Apple | Orange | Strawberry
--------------------------
Like | Like | Like
Dislike | Like | Like
Dislike | Dislike | Like
Like | Dislike | Dislike
Like | Like | Like
I want to count how many Like and Dislike for Apple, Orange and Strawberry. In the chart I want it to display how many people like and dislike these 3 fruits.
Here's the code I've been looking at and I've yet figured out how to attack it.
$query = mysql_query('SELECT * FROM data');
$table = array();
$table['cols'] = array(
array('label' => 'cas', 'type' => 'string'),
array('label' => 'data', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
$temp[] = array('v' => $r['cas']);
$temp[] = array('v' => (int) $r['data']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
Any example would help! Thank you.
Try this as your PHP:
$query = mysql_query("
SELECT
'Like' as 'preference',
SUM(IF(Apple = 'Like', 1, 0)) as Apple,
SUM(IF(Orange = 'Like', 1, 0)) as Orange,
SUM(IF(Strawberry = 'Like', 1, 0)) as Strawberry
FROM data
UNION
SELECT
'Dislike' as 'preference',
SUM(IF(Apple = 'Dislike', 1, 0)) as Apple,
SUM(IF(Orange = 'Dislike', 1, 0)) as Orange,
SUM(IF(Strawberry = 'Dislike', 1, 0)) as Strawberry
FROM data
");
$table = array();
$table['cols'] = array(
array('label' => 'preference', 'type' => 'string'),
array('label' => 'Apple', 'type' => 'number'),
array('label' => 'Orange', 'type' => 'number'),
array('label' => 'Strawberry', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($query)) {
$temp = array();
$temp[] = array('v' => $r['preference']);
$temp[] = array('v' => (int) $r['Apple']);
$temp[] = array('v' => (int) $r['Orange']);
$temp[] = array('v' => (int) $r['Strawberry']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
The SQL should return two rows of data, one a sum of likes and the other a sum of dislikes, which then gets parsed into the Google Visualization API DataTable format and echo'd as a JSON string. This is good for use as an AJAX data source for the chart, but with a minor modification, it would be suitable for directly outputting the data into the javascript for drawing a chart.
"Here's the code I've been looking at and I've yet figured out how to
attack it."
Well here's how to debug it, say these are the steps you are taking.
Get data from db
Create an array
Json encode the array
Send the Json to the chart
Try and hard code an array at step 2. above, removing step 1 from the equation for a moment.
Now, going forward from that step, does the rest of the code as it should? Can you see the chart that expect using the hard-coded values?
If yes, well now work backwards, var_dump()ing data till it matches the hard-coded values you had previously.
I'm trying to populate a basic Google Area Chart using their example and some data from a MySQL table. Here's what I have:
<?php
include("inc/DBConn.php");
$link = connectToDB();
$query = "SELECT MONTH(checkout) as Checkout, COUNT(item_id) as BookCount FROM C_books WHERE YEAR(checkout) = 2012 GROUP BY MONTH(created) ASC";
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$numBooks[] = $row;
};
$chartData = json_encode($numBooks,JSON_NUMERIC_CHECK);
?>
<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 data = google.visualization.arrayToDataTable(<?php echo $chartData; ?>,false);
var options = {
title: 'Total Books',
hAxis: {title: 'Month', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
This is my result with the echo:
[{"Checkout":"3","BookCount":"19"},{"Checkout":"4","BookCount":"157"},{"Checkout":"5","BookCount":"30"},{"Checkout":"6","BookCount":"45"},{"Checkout":"7","BookCount":"688"},{"Checkout":"8","BookCount":"391"}]
I know that Google doesn't like this but I'm unable to understand how to format it so that it does???
$numBooks[] = array("Checkout", "BookCount");
while ($row = mysql_fetch_array($result)) {
$numBooks[] = $row;
};
present data in needed format
the following is my method of using SQL -> Array -> Google DataTable JSON String (I have not referenced how others do it, so there could be a better way of coding it). Note that $task_submissions_arr is an array populated with rows & columns from a database query (but not shown below)
<?php
// array to be converted to json string and used in google chart's bar chart
$bar_chart_cols_arr = array(
array('id' => 'Name', 'label' => 'Name', 'type' => 'string'),
array('id' => 'Auto Grading Marks', 'label' => 'Auto Grading Marks', 'type' => 'number'),
array('id' => 'Manual Grading Marks', 'label' => 'Manual Grading Marks', 'type' => 'number'));
// array to be converted to json string and used in google chart's bar chart
$bar_chart_rows_arr = array();
for($i=0; $i<count($task_submissions_arr); $i++){
// array nesting is complex owing to to google charts api
array_push($bar_chart_rows_arr, array('c' => array(
array('v' => $task_submissions_arr[$i]['name']),
array('v' => $task_submissions_arr[$i]['auto_grading_marks']),
array('v' => $task_submissions_arr[$i]['manual_grading_marks']))) );
}
?>
<script type="text/javascript">
google.setOnLoadCallback(draw_bar_chart);
function draw_bar_chart() {
var bar_chart_data = new google.visualization.DataTable(
{
cols: <?php echo json_encode($bar_chart_cols_arr); ?>,
rows: <?php echo json_encode($bar_chart_rows_arr); ?>
});
// to be continued...
</script>