jQuery UI Widgets › Forums › Chart › JSON data not processed, chart remains blank
This topic contains 8 replies, has 2 voices, and was last updated by mim 9 years, 11 months ago.
-
Author
-
Hello,
I want to read sensor data from mysql-DB via PHP, JSON encode sensor data and feed them into jqwidget charts.
According to the demos, I wrote a file called chartdata.php that includes another PHP file with mysql connection credentials.
chartdata.php itself works pretty fine generates JSON encoded data as follows:
`Connection to <Server> established successfully
Connection to <Database> established successfully
[{“Zeitpunkt”:”2014-11-16 16:38:08″,”T”:”1″},{“Zeitpunkt”:”2014-11-16 17:16:18″,”T”:”21″},{“Zeitpunkt”:”2014-11-16 17:16:21″,”T”:”22″},{“Zeitpunkt”:”2014-11-16 17:16:24″,”T”:”22″},{“Zeitpunkt”:”2014-11-16 17:16:27″,”T”:”22″},{“Zeitpunkt”:”2014-11-16 17:16:30″,”T”:”22″},{“Zeitpunkt”:”2014-11-16 17:16:33″,”T”:”22″},{“Zeitpunkt”:”2014-11-16 17:16:36″,”T”:”21″},…`However, when I am calling the HTML file the graph is shown without data!
When I am taking the output as above while using localdata, data showing up in the graph.
It seems as the JSON encoded data doesn’t fine their way back to url…
Any ideas to resolve that issue?Many, many thanks and kind regards!
MichaelThe code of the calling HTML file is:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example demonstrated how to populate the jqxChart with DHT22 sensor data from MySQL Database</title> <link rel="stylesheet" href="../jquery/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jquery/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var theme = 'classic'; var url = 'chartdata.php'; var source = { datatype: "json", datafields: [ { name: 'Zeitpunkt', type: 'date', format: "yyyy-MM-dd HH:mm:ss"}, { name: 'T'} ], url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function () { }, loadError: function () { } }); // prepare jqxChart settings var settings = { title: "DHT22 Temperture by Date", showLegend: true, padding: { left: 5, top: 5, right: 50, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Zeitpunkt', type: 'date', // formatFunction: function (value) { // return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy'); // }, showTickMarks: true, tickMarksInterval: Math.round(dataAdapter.records.length / 6), tickMarksColor: '#888888', unitInterval: Math.round(dataAdapter.records.length / 6), showGridLines: true, gridLinesInterval: Math.round(dataAdapter.records.length / 6), gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme05', seriesGroups: [ { type: 'line', valueAxis: { displayValueAxis: true, description: 'Temperature', axisSize: 'auto', tickMarksColor: '#888888', unitInterval: 20, minValue: 0, maxValue: 100 }, series: [ { dataField: 'T', displayText: 'Temperature' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script> </head> <body class='default'> <div style="width:690px; height:400px" id="jqxChart"></div> </body> </html>
The code of the chartdata.php looks like that:
<?php include('connect.php'); $tables = array('Sen01DHT22'); $connection = mysql_connect($hostname,$username,$password); if (!$connection) { die('Could not connect: ' . mysql_error()); } else { echo "Connection to $hostname established successfully"; echo "<br />"; } $db = mysql_select_db($database,$connection); if (!$db) { die('Could not connect: ' . mysql_error()); } else { echo "Connection to $database established successfully"; echo "<br />"; } $query = "SELECT * FROM $tables[0] ORDER BY Zeitpunkt LIMIT 0,100"; $result = mysql_query($query); while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) { $T[] = array( 'Zeitpunkt' => $row['Zeitpunkt'], 'T' => $row['T'] ); } echo json_encode($T); mysql_close($connection); ?>
Hello mim,
Please make sure the path to the file is correct. In your case, chartdata.php should be in the same folder as the HTML page. If this is not the issue, please share whether the dataAdapter loadComplete or loadError callback is called. You can check this by putting breakpoints or alerts in both.
You can also try echo-ing only the data without any messages to see if that may be causing any misbehaviour.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
thanks for the quick response!
I expandedvar url = 'chartdata.php'; to to var url = '<absolute path>/chartdata.php';
and I added alerts…
var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () {alert ("downloadComplete") }, loadComplete: function () { alert ("loadComplete")}, loadError: function () {alert ("loadError") } });
…it resulted in a dialog indicating loadError…
Is there more information I can get out of the loadError callback? How?
Kr,
MichaelHi Michael,
loadError is passed the following parameters:
loadError(jqXHR, status, error)
You may be able to get more information about your issue from these. Please also try echo-ing only the data without any messages from the PHP file to see if that may be causing any misbehaviour, as I already suggested.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/..ok, I got now the data from loadError callback
XHR:[object Object] ST:parsererror Error:SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
…considerung to chartdata.php as outlined above I see no such SyntaxError…
I have adapted the chartdata.php to echo the data from the database before JSON encoding as well
(see echo $row[‘Zeitpunkt’].” “.$row[‘T’].”<br>”;)<?php include('connect.php'); $tables = array('Sen01DHT22'); $connection = mysql_connect($hostname,$username,$password); if (!$connection) { die('Could not connect: ' . mysql_error()); } else { echo "Connection to $hostname established successfully"; echo "<br />"; } $db = mysql_select_db($database,$connection); if (!$db) { die('Could not connect: ' . mysql_error()); } else { echo "Connection to $database established successfully"; echo "<br />"; } $query = "SELECT * FROM $tables[0] ORDER BY Zeitpunkt LIMIT 0,3"; $result = mysql_query($query); while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) { echo $row['Zeitpunkt']." ".$row['T']."<br>"; $T[] = array('Zeitpunkt' => $row['Zeitpunkt'],'T' => $row['T']); } //echo $T; echo json_encode($T); mysql_close($connection); ?>
…result is:
2014-11-16 17:16:18 21 2014-11-16 17:16:21 22 2014-11-16 17:16:24 22 [{"Zeitpunkt":"2014-11-16 17:16:18","T":"21"},{"Zeitpunkt":"2014-11-16 17:16:21","T":"22"},{"Zeitpunkt":"2014-11-16 17:16:24","T":"22"}]
Hi mim,
I think the only thing that should be echoed is the array, without the timestamps, i.e.:
[{"Zeitpunkt":"2014-11-16 17:16:18","T":"21"},{"Zeitpunkt":"2014-11-16 17:16:21","T":"22"},{"Zeitpunkt":"2014-11-16 17:16:24","T":"22"}]
because the above result as a whole is certainly not a valid JSON.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
you are right, but the 3 timestamps on the very top are resulting fromecho $row['Zeitpunkt'].” “.$row['T'].”<br>”;)
while the array you’ve posted in the result of the JSON echo:
echo json_encode($T);
…I googled some threads where the same error may be due to the character set. It should be utf-8 for JSON.
Could it be that the character set used for the mysql table does not match?Kr,
MichaelHi Michael,
There are no known issues regarding encoding when loading JSON data in jqxDataAdapter. However, what I wanted to explain to you still remains. This is the result of your PHP file:
2014-11-16 17:16:18 21 2014-11-16 17:16:21 22 2014-11-16 17:16:24 22 [{"Zeitpunkt":"2014-11-16 17:16:18","T":"21"},{"Zeitpunkt":"2014-11-16 17:16:21","T":"22"},{"Zeitpunkt":"2014-11-16 17:16:24","T":"22"}]
You pass the whole result to the data adapter, not only the JSON data, but the data adapter “thinks” everything is JSON and throws the error. Please, try removing the echoes for the timestamps to ensure you only pass the JSON data to the data adapter.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello,
I resolved the issue as follows:I put the php code, that fetches the data from the mysql data directly into the html code (main file).
In tghe javascript code part of the html code I json_encoded the hash array and stored it in local variable, further
bind to localdata.
Please check it out, I marked the relevant code in bold:(Still, I have no idea why a dedicated php file that fetches mysql data and does a json_encode does not work.
Seems data does not find a way to the html-file)Kr,
Michael<!DOCTYPE html> <html lang="en"> <head> <?php include('connect.php'); $tables = array('Sen01DHT22','Sen02DHT22','Sen03DHT22','Sen04DHT22','Sen05DHT22','Sen06DHT22'); $connection = mysql_connect($hostname,$username,$password); if (!$connection) { die('Could not connect: ' . mysql_error()) } mysql_set_charset('utf8', $connection); $db = mysql_select_db($database,$connection); if (!$db) { die('Could not connect: ' . mysql_error()) } $query = "SELECT * FROM $tables[0] ORDER BY Zeitpunkt LIMIT 0,150"; <strong>while ( $row = mysql_fetch_array( mysql_query($query), MYSQL_ASSOC ) ) { $T[] = array( 'Zeitpunkt' => $row['Zeitpunkt'], 'T' => $row['T'] ); }</strong> mysql_close($connection); ?> <title id='Description'>This example demonstrated how to populate the jqxChart with DHT22 sensor data from MySQL Database</title> <link rel="stylesheet" href="../jquery/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jquery/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var theme = 'classic'; <strong> var Sen01Data = <?php echo json_encode($T, JSON_PRETTY_PRINT) ?>;</strong> var source = { datatype: "json", datafields: [ { name: 'Zeitpunkt', type: 'date'}, { name: 'T'} ], <strong> localdata: Sen01Data</strong> };
-
AuthorPosts
You must be logged in to reply to this topic.