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

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

Related

Get JSON Data from same file

i am trying to display google charts with data from a MYSQL database. It work's when i am using two seperate files (php/js) but i want to process the data in one file.
Heres what i got:
$table = array();
$table['cols'] = array(
array('label' => 'Date', 'type' => 'string'),
array('label' => 'Meter', 'type' => 'number')
);
$rows = array();
$select->execute();
while ($result = $select->fetch(PDO::FETCH_ASSOC)) {
$timestamp = strtotime($result['date']);
$date = date("d.m.Y - H:i", $timestamp);
$temp = array();
$temp[] = array('v' => $date);
$temp[] = array('v' => $result['meter']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$json = json_encode($table);
echo $json;
?>
<html>
<head>
<script type="text/javascript" src="../assets/js/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
dataType: "json",
async: true
}).responseText;
alert(jsonData);
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));
chart.draw(data, {width: 1000, height: 240});
}
</script>
</head>
<body>
<hr class="major" />
<div id="chart_div2"></div>
</body>
</html>
The PHP data gets encoded properly but i dont know how to "send" the data to the javascript part. Is it possible to receive the JSON data in the same file?
When i change async: true to false, it just displays the code from the whole page, with true it displays undefined.
Kind regards,
Skar
when you echo the $json that way
<?php
// ...getting data
?>
<script>
var jsonData = <?php echo $json; ?>;
</script>
<?php
// rest of page...
you can use it in javascript later and don't need the ajax anymore.
//....
chart.draw(jsonData, {width: 1000, height: 240});
//....

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.

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

Categories

Resources