Passing an array to Google Charts API via AJAX - javascript

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 :

Related

Dynamic google line chart not showing up with php and Javascript

I am using google charts to display a line graph on my locally hosted web page. I am using mysqli to take the data from my phpmyadmin database then echoing this into the row spaces in the javascript.
This is the code within my html body:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Speed');
data.addRows([
<?php
$sql = "SELECT id_rides, speed, date_completed FROM rides_done WHERE (id_users = $_SESSION[id])";
$result = mysqli_query($link, $sql);
while($row = mysqli_fetch_assoc($result)) {
$date = $row['date_completed'];
$speed = floatval($row['speed']);
echo "['".$date."', ".$speed."],";
}
?>
]);
var options = {
hAxis: {
title: 'Ride date'
},
vAxis: {
title: 'Average speed'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
The problem is that nothing is being displayed on the web page.
I know that the query works as I tried this on it's own outside of the javascript and this was output: results of sql query
Before I added the dynamic element of the chart it was working fine with just random lists of data.
I was expecting to see a line graph with 'Average Speed' on the y-axis and 'Ride date' on the x-axis with 7 datapoints but nothing was displayed.
It seems that js is particular about datatypes here so I'm wondering if it is something to do with either of the following lines - both of which I have been fiddling around with to no avail.
echo "['".$date."', ".$speed."],";
data.addColumn('string', 'Date');
data.addColumn('number', 'Speed');
Thank you very much. All suggestions and ideas are very welcome. As is probably evident I am very new to Javascript so likely to be making some stupid mistakes.
A couple of things I would say: As you appear to wish to use a date within the dataTable perhaps setting that as a date type column would be better and casting the value from the db query as a date using new Date(str). I'd also suggest that you use json_encode once you have run the db query to create a JSON object rather than manually building a string as you do above - one downside to that approach is the trailing comma which might cause issues.
I rattle together a working demo using bogus data from my db to emulate what you were trying to do here. The SQL query uses aliases to take arbitrary data and name it as you do so the Javascript remains fairly much the same.
With the JSON data it is easy to iterate through the Object using Object.keys( json ).forEach() type structure ( I apologise if this is new to you )
<?php
#add a db connection
chdir('../../dbo');
require 'db-conn-details.php';
require 'mysqli-conn.php';
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script src='//www.gstatic.com/charts/loader.js'></script>
<script></script>
<title>Google charts.....</title>
<style>
#chart_div{
width:800px;height:600px
}
</style>
</head>
<body>
<div id='chart_div'></div>
<script>
<?php
$sql = 'SELECT `speed`, `date_completed` FROM `rides_done` WHERE ( `id_users` = $_SESSION[id] )';
$sql = 'select `dr` as `speed`, date(`lasteditdate`) as `date_completed` from `testtable` limit 20'; # example sql...
$result = $link->query( $sql );
$json = json_encode( $result->fetch_all( MYSQLI_ASSOC ) );
printf('const json=%s;', $json );
?>
google.charts.load('current', { packages: ['corechart'] } );
google.charts.setOnLoadCallback( drawBasic );
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Speed');
Object.keys( json ).forEach( key=>{
let obj=json[ key ];
data.addRow( [ new Date( obj.date_completed ), parseFloat( obj.speed ) ] );
})
var options = {
hAxis: {
title: 'Ride date'
},
vAxis: {
title: 'Average speed'
}
};
var chart = new google.visualization.LineChart( document.getElementById('chart_div') );
chart.draw( data, options );
}
</script>
</body>
</html>
The above yielded a chart like this:

unable to generate pie chart from phpmyadmin

i want to create google pie chart with help of getting table from database ...but till now i did not get output ...i have searched several websites..but i did not clarify anything...please check my code and tell
<?php
mysql_connect('localhost','root','');
mysql_select_db('chart');
$sqlquery1="select * from pie_chart";
$sqlresult1=mysql_query($sqlquery1);
$rows=array();
while($r=mysql_fetch_assoc($sqlresult1))
{
$rows[]=$r;
}
$data= json_encode($rows);
?>
<html>
<head>
<!--Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></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 data = new google.visualization.DataTable();
data.addColumn("string", "Quarter");
data.addColumn("number", "Number");
data.addRows(<?php echo $data ?>);
]);
//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.PieChart(document.getElementById('chart_div'));
chart.draw(data,{width:400,height:240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart -->
<div id="chart_div"></div>
</body>
</html>
<?php
/* Establish the database connection */
$mysql =mysqli_connect('localhost', 'root', '', 'chart');
/* select all the tasks from the table piechart */
$result = $mysql->query('SELECT * FROM piechart');
/*
---------------------------
example data: Table (piechart)
--------------------------
Task percent
job 30
daily 20
working 35
sleep 15
*/
$rows = array();
$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 Slice title
*/
array('label' => 'task', 'type' => 'string'),
array('label' => 'percent', 'type' => 'number')
);
/* Extract the information from $result */
/* associate array are used in above ,so we used foreach loop*/
foreach($result as $r)
{
$temp = array();
// The following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['task']);
// Values of the each slice
$temp[] = array('v' => (int) $r['percent']);
//rows of side title
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
// convert data into JSON format
$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);
// Load the Visualization API and the piechart package.
function drawChart()
{
// Create our data table out of JSON data loaded from server.
var bar_chart_data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {
title: 'Daily Work log',
is3D: 'true',//3D effect true
width: 900,
height: 500
};
// 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(bar_chart_data, options);
}
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="chart_div" ></div>
</body>
</html>
</script>
</head>

How can refresh only a div which contains google chart and php?

I have an admin page that contains several divs. And some divs contain google charts.
My charts are feeding from php+MySQL data.
Some divs(or chart) update 60 sec. Some divs(or chart) will be updated 1 hour.
So that different divs should update different period. (That's why I don't refresh whole page.
Anyway,When I refresh page there is no problem, but when I try to update my div, div updates, but there is nothing inside about graph.
Can you help me?
Here is my php code:
// QUERY AND PHP ARRAY FOR JSON
$query = "SELECT CONCAT(cdate,' ',chour,':00:00') AS ctime ,sum(bytesin*0.000002222) as totalKbpsin, sum(bytesout*0.000002222) as totalKbpsout FROM traffic_user_daily group by cdate,chour HAVING ctime >= now() - INTERVAL 1 DAY ";
$result = $conn->query($query);
$rows= array();
$table = array();
$table['cols'] = array(
array('label' => 'Tarih' , 'type' => 'string'),
array('label' => 'Inbound' , 'type' => 'number'),
array('label' => 'Outbound' , 'type' => 'number'),
);
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) substr($r['ctime'],11,5));
$temp[] = array('v' => (int) $r['totalKbpsin']);
$temp[] = array('v' => (int) $r['totalKbpsout']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// CHART JAVA CODE
google.charts.load('visualization','current', {'packages':['corechart','bar'], 'language': 'en'});
// Draw the line chart is loaded.
google.setOnLoadCallback(drawBigChart);
// Callback that draws the line chart
function drawBigChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
chartArea: {
'height': '80%',
left: "5%"
},
legend: {
position: 'right',
textStyle: {
color: '#bdbdbd',
fontSize: 12
}
},
hAxis: {
showTextEvery:2,
textStyle: {color: '#bdbdbd',
fontSize: 12,
},
baselineColor: '#bdbdbd',
gridlines: {color:'bdbdbd'},
},
vAxis: {
baselineColor: '#bdbdbd',
textStyle: {color:'#bdbdbd'},
gridlines: {color:'#bdbdbd' },
minValue: 0,
},
intervals: { 'style':'area' },
curveType: 'function',
crosshair: {orientation: 'vertical'},
animation: {
startup: true,
duration: 1000
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!-- OUTER DIV -->
<div class="col s12 m12">
<!-- CHART DIV -->
<div id="dash_big_chart" class="card">
<div class="card-content">
<div>
<span class="card-title grey-text lighten-1">
<?php echo $_SESSION['companyname'] ?></span></div>
<div id="chart_div">
</div></div></div></div>
<script type="text/javascript">
/// refresh script ////
setInterval(function(){
$("#dash_big_chart").load('big_chart.php')
},60000);
});
</script>
And then I have another php page named big_chart.php. That contains Query and array for JSON part , Graph java except google.charts.load and CHAR DIV.
Can you hep me?
jQuery load() wants to load HTML into a page element.
What you want to do is totally different:
You want to get json data via an ajax request, and then let googlecharts redraw the chart with that new data.
Therfor you have to add the json data as parameter to your drawBigChart function.
Code would look like this:
// For the first load you can pass the json data just like you did before.
google.setOnLoadCallback(function(){
drawBigChart(<?=$jsonTable?>);
});
function drawBigChart(json_data) {
// pass the parameter into the google charts DataTable
var data = new google.visualization.DataTable(json_data);
var options = {...}; // I left out the options here only to make the code more visible
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// For the interval you retrieve the data via ajax request and pass
// it to the drawBigChart function
setInterval(function(){
$.getJSON( "big_chart.php", function( data ) {
drawBigChart(data);
});
},60000);
In your setInterval() you are replacing <div id="dash_big_chart"/> and everything inside it, including the <div id="chart_div"/> which is the area where Google is drawing the chart.
However, the code that actually draws the chart is up above, in the JavaScript, is the function drawBigChart(). And the data that gets drawn to the chart is
var data = new google.visualization.DataTable(<?=$jsonTable?>);
To accomplish what you want, you need to refactor. You don't need to download new HTML, you just need to download new data and update the chart.
Change the drawBigChart() method to take an argument which is the chart data, so you would call it like drawBigChart(jsonTable).
Once you can do that, instead of loading in HTML and replacing a div, as you are currently doing, you just need to load in new JSON data and call drawBigChart(newJsonTable) with the new data.
Something like
setInterval(function(){
$.ajax({
'url': 'get_new_data.php', // url should return only JSON data
'dataType': 'json',
'async': true
}).success(function(result) {
// Draw the chart again with the updated data
drawBigChart(result);
});
}, 60000); // 60 second refresh
I changed my page as you describe:
google.charts.load('visualization','current', {'packages': ['corechart','bar'], 'language': 'en'});
google.setOnLoadCallback(drawBigChart);
function drawBigChart(jsonTable) {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = { some visual thing};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
And Interval script:
$(document).ready(function(){
$("#activeuserlist").on("click", "a.modal-trigger", function(){
$('#modalkes').openModal();
});
setInterval(function(){
$("#activeuserlist").load('activeuserlist2.php') //another DIV
$("#dash_kullanicisayisi").load('kullanicisayisi.php') //ANother DIV
$.ajax({
'url': 'get_new_data.php', // url should return only JSON data
'dataType': 'json',
'async': true
}).success(function(result) {
// Draw the chart again with the updated data
drawBigChart(result);
});
},60000);
});
And my get_new_data.php is like that:
<?php
require_once("inc/functions.php");
startSession();
connectDB($conn);
date_default_timezone_set('Europe/Istanbul');
mb_internal_encoding("UTF-8");
$now = date("Y-m-d H:m:s");
$query = "SELECT CONCAT(cdate,' ',chour,':00:00') AS ctime ,sum(bytesin*0.000002222) as totalKbpsin, sum(bytesout*0.000002222) as totalKbpsout FROM traffic_user_daily group by cdate,chour HAVING ctime >= now() - INTERVAL 1 DAY ";
$result = $conn->query($query);
$rows= array();
$table = array();
$table['cols'] = array(
array('label' => 'Tarih' , 'type' => 'string'),
array('label' => 'Inbound' , 'type' => 'number'),
array('label' => 'Outbound' , 'type' => 'number'),
);
foreach($result as $r) {
$temp = array();
$temp[] = array('v' => (string) substr($r['ctime'],11,5));
$temp[] = array('v' => (int) $r['totalKbpsin']);
$temp[] = array('v' => (int) $r['totalKbpsout']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
And when I browse this page I get something like JSON Data:
{"cols":[{"label":"Tarih","type":"string"},{"label":"Inbound","type":"number"},{"label":"Outbound","type":"number"}],"rows":[{"c":[{"v":"14:00"},{"v":6213},{"v":891}]},{"c":[{"v":"15:00"},{"v":6914},{"v":915}]},{"c":[{"v":"16:00"},{"v":5645},{"v":1789}]},{"c":[{"v":"17:00"},{"v":5821},{"v":1771}]},{"c":[{"v":"18:00"},{"v":3242},{"v":1753}]},{"c":[{"v":"19:00"},{"v":7536},{"v":685}]},{"c":[{"v":"20:00"},{"v":6902},{"v":696}]},{"c":[{"v":"21:00"},{"v":7140},{"v":1184}]},{"c":[{"v":"22:00"},{"v":5971},{"v":502}]},{"c":[{"v":"23:00"},{"v":9506},{"v":1353}]},{"c":[{"v":"00:00"},{"v":8783},{"v":2855}]},{"c":[{"v":"01:00"},{"v":3125},{"v":1044}]},{"c":[{"v":"02:00"},{"v":2500},{"v":1858}]},{"c":[{"v":"03:00"},{"v":534},{"v":1721}]},{"c":[{"v":"04:00"},{"v":658},{"v":1940}]},{"c":[{"v":"05:00"},{"v":839},{"v":93}]},{"c":[{"v":"06:00"},{"v":1041},{"v":200}]},{"c":[{"v":"07:00"},{"v":1154},{"v":97}]},{"c":[{"v":"08:00"},{"v":2684},{"v":1467}]},{"c":[{"v":"09:00"},{"v":7297},{"v":2099}]},{"c":[{"v":"10:00"},{"v":4143},{"v":1244}]},{"c":[{"v":"11:00"},{"v":7645},{"v":1535}]},{"c":[{"v":"12:00"},{"v":4411},{"v":868}]},{"c":[{"v":"13:00"},{"v":5323},{"v":1119}]}]}
Graph is refreshed as image but not shows new values.
I check from HTTPFOX that get_new_data.php pull correct datas, Chart refreshes. But chart not change. Still same graph.
I think I solve it:
google.charts.load('visualization','current', {'packages':['corechart','bar'], 'language': 'en'});
google.setOnLoadCallback(drawBigChart);
function drawBigChart() {
var jsonData = $.ajax({
url: "get_new_data.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {something for visualisation}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
AND
$(document).ready(function(){
$("#dash_kullanicisayisi").load('kullanicisayisi.php')
$.ajax({
'url': 'get_new_data.php', // url should return only JSON data
'dataType': 'json',
'async': true
}).success(function(result) {
//Draw the chart again with the updated data
drawBigChart(result);
});
},60000);
});
solves my problem. Now chart refresh and populate new datas.
Thank for your assistances.

Google pie chart single value from table

I have a problem to display a pie chart.
i have this code:
<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
mysql_select_db("oes", $con);
// The Chart table contains two fields: weekly_task and percentage
// This example will display a pie chart. If you need other charts such as a Bar chart,
// you will need to modify the code a little to make it work with bar chart and other charts
$sth = mysql_query("select t.testname as Test,t.testdesc as `Tip test`,
DATE_FORMAT(st.starttime,'%d %M %Y ') as Data,
sub.subname as Disciplina,sub.subdesc as Profesor,sub.an as `Anul de studii`,
(SELECT sum(q.marks) from studentquestion as sq,
question as q where sq.testid=q.testid and sq.qnid=q.qnid and sq.answered='answered'
and sq.stdanswer=q.correctanswer and
sq.stdid='" . htmlspecialchars($_SESSION['stdid'],ENT_QUOTES) . "' and
sq.testid=t.testid) as Nota,(SELECT sum(q.marks)
from studentquestion as sq, question as q where sq.testid=q.testid
and sq.qnid=q.qnid and
sq.stdid='" . htmlspecialchars($_SESSION['stdid'],ENT_QUOTES) . "'
and sq.testid=t.testid) as NotaMaxima
from studenttest as st,test as t,subject as sub,student as ss where
t.testid=st.testid and st.stdid=".$_SESSION['stdid']."
and st.status='over' and sub.subid=t.subid and ss.stdid=".$_SESSION['stdid']."
order by t.testid DESC LIMIT 1 ;");
$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' => 'Test', 'type' => 'string'),
array('label' => 'Nota', 'type' => 'number'),
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['Test']);
// Values of each slice
$temp[] = array('v' => (float) (($r['Nota']/$r['NotaMaxima'])*100) );
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../stil/stil.css"/>
<!--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: 'Procentaj de raspuns',
is3D: 'true',
backgroundColor: "transparent",
width: 500,
height: 300,
max:10,
};
// 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-->
<br><br><br><br><br><br><div id="chart_div" style="padding-left: 240px; align:center;"></div></>
</body>
</html>
I want to display this value: http://i.stack.imgur.com/1a2zm.png
Not like this: http://i.stack.imgur.com/bVcJE.png
But like real percentage. Ex: 54% one color and the rest other color. I dont know how to do it because is a single value.
In sql select the value is " NotaMaxima "
And how do i use $rows for 2 things like Nota and NotaMaxima?
U can add by your self another value (other).
If $result array:
Ex. if(count($result)==1) then $anotherVal = 100-$result[0] and add to $result[1]=$anotherVal.
And add to chart data two values.

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"]]

Categories

Resources