Get JSON Data from same file - javascript

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});
//....

Related

PHP variables in Javascript doesn't work

I am trying to show fetched data in Google charts, but PHP variables inside the javascript are not echoed.. If I echo variables outside of the javascript all works fine, so I suspect that something must be wrong in my javascript.. I double-checked everything but I can't figure our where is the issue..
The code does not show any errors!
This is the output in browser source..
['Active Posts',$post_counts],['Categories',$category_counts],['Users',$user_counts],['Comments',$comment_counts],
Any suggestion?
Thank you
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Data', 'Count'],
<?php
$data_text = ['Active Posts', 'Categories', 'Users', 'Comments'];
$data_count = ['$post_counts', '$category_counts', '$user_counts', '$comment_counts'];
for($i = 0; $i < 4; $i++) {
echo "['$data_text[$i]'" . "," . "$data_count[$i]],";
}
?>
]);
var options = {
chart: {
title: '',
subtitle: '',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
Since you're already using PHP to output data for JS, you can just use json_encode to convert your ARRAY to JSON data.
<?php
$data = [
'Data' => 'Count',
'Active Posts' => $post_counts,
'Categories' => $category_counts,
'Users' => $user_counts,
'Comments' => $comment_counts
];
$json = json_encode($data);
?>
var data = google.visualization.arrayToDataTable("<?php echo $json; ?>");
Remove quotes from php variables,
Use this,
$data_count = [$post_counts, $category_counts, $user_counts, $comment_counts];
instead of,
$data_count = ['$post_counts', '$category_counts', '$user_counts', '$comment_counts'];

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

I'm having trouble getting a Google Charts Line chart to generate. I've been perusing the web and stackexchange for examples.
Right now I'm logging temperature data from my nest and I'd like to plot it along with some other data.
This is my getdata_line.php mysql query with ajax:
<?php
/* $server = the IP address or network name of the server
* $userName = the user to log into the database with
* $password = the database account password
* $databaseName = the name of the database to pull data from
*/
$con = mysqli_connect('192.168.146.1', 'TestUser', 'testuser1','nest') or die('Error connecting to server');
// write your SQL query here (you may use parameters from $_GET or $_POST if you need them)
$query = mysqli_query($con,'SELECT * FROM nest_log WHERE time_stamp >= NOW() - INTERVAL 1 HOUR ORDER by time_stamp ASC');
$table = array();
$table['cols'] = array(
/* define your DataTable columns here
* each column gets its own array
* syntax of the arrays is:
* label => column label
* type => data type of column (string, number, date, datetime, boolean)
*/
// I assumed your first column is a "string" type
// and your second column is a "number" type
// but you can change them if they are not
//array('label' => 'time_stamp', 'type' => 'string'),
array('label' => 'index', 'type' => 'number'),
array('label' => 'current_temperature', 'type' => 'number')
);
$rows = array();
while($r = mysqli_fetch_assoc($query)) {
$temp = array();
// each column needs to have data inserted via the $temp array
//$temp[] = array('v' => $r['time_stamp']);
$temp[] = array('v' => $r['index']);
$temp[] = array('v' => (float) $r['current_temperature']); // typecast all numbers to the appropriate type (int or float) as needed - otherwise they are input as strings
// insert the temp array into $rows
$rows[] = array('c' => $temp);
}
// populate the table with rows of data
$table['rows'] = $rows;
// encode the table as JSON
$jsonTable = json_encode($table);
// set up header; first two prevent IE from caching queries
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
// return the JSON data
echo $jsonTable;
?>
This is the line.php:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawLine);
function drawLine() {
var json = $.ajax({
url: 'getdata_line.php', // make this url point to the data file
dataType: 'json',
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(json);
var options = {
//title: 'My Weekly Plan',
//is3D: 'true',
//width: 800,
//height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="line_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
getdata_line.php is returning:
{"cols":[{"label":"index","type":"number"},{"label":"current_temperature","type":"number"}],"rows":[{"c":[{"v":"625"},{"v":70.591982}]},{"c":[{"v":"626"},{"v":70.591982}]},{"c":[{"v":"627"},{"v":70.591982}]},{"c":[{"v":"628"},{"v":70.591982}]},{"c":[{"v":"629"},{"v":70.591982}]},{"c":[{"v":"630"},{"v":70.591982}]},{"c":[{"v":"631"},{"v":70.591982}]},{"c":[{"v":"632"},{"v":70.591982}]},{"c":[{"v":"633"},{"v":70.591982}]},{"c":[{"v":"634"},{"v":70.591982}]},{"c":[{"v":"635"},{"v":70.591982}]},{"c":[{"v":"636"},{"v":70.591982}]},{"c":[{"v":"637"},{"v":70.591982}]},{"c":[{"v":"638"},{"v":70.591982}]},{"c":[{"v":"639"},{"v":70.591982}]},{"c":[{"v":"640"},{"v":70.591982}]},{"c":[{"v":"641"},{"v":70.591982}]},{"c":[{"v":"642"},{"v":70.591982}]},{"c":[{"v":"643"},{"v":70.591982}]},{"c":[{"v":"644"},{"v":70.591982}]},{"c":[{"v":"645"},{"v":70.591982}]},{"c":[{"v":"646"},{"v":70.591982}]},{"c":[{"v":"647"},{"v":70.591982}]},{"c":[{"v":"648"},{"v":70.591982}]},{"c":[{"v":"649"},{"v":70.591982}]},{"c":[{"v":"650"},{"v":70.591982}]},{"c":[{"v":"651"},{"v":70.591982}]},{"c":[{"v":"652"},{"v":70.591982}]},{"c":[{"v":"653"},{"v":70.591982}]},{"c":[{"v":"654"},{"v":70.591982}]}]}

How do I create a C3 Chart Line Graph from JSON data?

I need help for a school project. I have been able to pull data from a mySQL database into an array and encoded into JSON, which displays fine. Now, I need help with passing the JSON data to C3 to produce a chart (if possible on the same page).
What I've done so far:
$strQuery = "SELECT production_date,oil FROM production WHERE well = '$h_well' AND production_date BETWEEN '$h_start' AND '$h_end' ORDER BY production_date ASC";
$result = mysqli_query($conn, $strQuery);
// Print out rows
$data = array();
while ( $row = $result->fetch_assoc() ) {
$data[] = $row;
}
echo json_encode( $data );
You need to create two separate array, one for your data and one for dates that you want to show on x-axis and then pass that array to java script.
here is full working example
<?php
$conn = mysqli_connect("localhost", "root", "", "test_db");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$strQuery = "SELECT production_date,oil FROM production WHERE well = '$h_well' AND production_date BETWEEN '$h_start' AND '$h_end' ORDER BY production_date ASC";
$result = mysqli_query($conn, $strQuery);
// Print out rows
$valuesArray = array();
$datesArray = array();
$valuesArray[] = 'Oil';
$datesArray[] = 'x';
while ($row = $result->fetch_assoc()) {
$datesArray[] = $row['production_date'];
$valuesArray[] = $row['oil'];
}
?>
<html>
<head>
<title>C3 Liner example</title>
<link href="c3_scr/c3.css" rel="stylesheet" type="text/css" />
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="c3_scr/c3.js"></script><!-- load jquery -->
</head>
<body>
<div id="chart"></div>
<script>
var xAxisArr = <?php echo json_encode($datesArray); ?>;
var dataArr = <?php echo json_encode($valuesArray, JSON_NUMERIC_CHECK); ?>;
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
xAxisArr,
dataArr
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
</script>
</body>
</html>

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.

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