jQuery UI Widgets › Forums › Chart › LIne graph and JSON, dont get it to work
Tagged: Angular chart, beforeLoadComplete, chart, data adapter, data source, jquery chart, jqxChart, json, loadComplete, loaded data, loaded records, loadError, map, mapping, php
This topic contains 14 replies, has 2 voices, and was last updated by Tom 8 years, 1 month ago.
-
Author
-
Hi.
I have a JSON file that I get from my solarpanel inverter. I try to make a line graph from it. I have been working on this for many houers now, but I dont get it to show any datapoints.Any help would be apriciated.
JSON file follows.
I need the values from Body>Data>inverter\/1>Data>EnergyReal_WAC_Sum_Produced>Values
The values starting with:
“-7200” : 0
The -7200 should be on the X axis and the 0 on the Y axis.
-7200 has a step of +300 and is seconds since midnight GMT in 5 min intervall, the last Point will be 79200 or 82800 if I count correctly.I include my latest try to get it to work, I have tried a lot of others, but to no awail.
JSON
{ "Head" : { "RequestArguments" : { "Scope" : "System", "StartDate" : "2016-07-27T00:00:00+02:00", "EndDate" : "2016-07-27T23:59:59+02:00", "Channel" : "EnergyReal_WAC_Sum_Produced", "SeriesType" : "Detail", "HumanReadable" : "True" }, "Status" : { "Code" : 0, "Reason" : "", "UserMessage" : "", "ErrorDetail" : { "Nodes" : [] } }, "Timestamp" : "2016-07-27T19:09:42+02:00" }, "Body" : { "Data" : { "inverter\/1" : { "NodeType" : 97, "DeviceType" : 122, "Start" : "2016-07-27T00:00:00+02:00", "End" : "2016-07-27T23:59:59+02:00", "Data" : { "EnergyReal_WAC_Sum_Produced" : { "_comment" : "channelId=67830024", "Unit" : "Wh", "Values" : { "-7200" : 0, "-6900" : 0, "-6600" : 0, "-6300" : 0, "-6000" : 0, "-5700" : 0, "-5400" : 0, "-5100" : 0, "-4800" : 0, "-4500" : 0, "-4200" : 0, "-3900" : 0, "-3600" : 0, "-3300" : 0, "-3000" : 0, "-2700" : 0, "-2400" : 0, "-2100" : 0, "-1800" : 0, "-1500" : 0, "-1200" : 0, "-900" : 0, "-600" : 0, "-300" : 0, "0" : 0, "300" : 0, "600" : 0, "900" : 0, "1200" : 0, "1500" : 0, "1800" : 0, "2100" : 0, "2400" : 0, "2700" : 0, "3000" : 0, "3300" : 0, "3600" : 0, "3900" : 0, "4200" : 0, "4500" : 0, "4800" : 0, "5100" : 0, "5400" : 0, "5700" : 3.745833, "6000" : 4.25, "6300" : 4.994722, "6600" : 4.845278, "6900" : 4.763611, "7200" : 4.496944, "7500" : 4.508333, "7800" : 4.129722, "8100" : 4.267778, "8400" : 4.296944, "8700" : 4.839167, "9000" : 5.361667, "9300" : 6.466389, "9600" : 7.444167, "9900" : 7.095278, "10200" : 8.191944, "10500" : 9.507778, "10800" : 10.521389, "11100" : 9.681389, "11400" : 8.920833, "11700" : 8.076667, "12000" : 6.537222, "12300" : 6.701944, "12600" : 7.611667, "12900" : 8.371667, "13200" : 10.045556, "13500" : 9.338889, "13800" : 8.473056, "14100" : 7.139167, "14400" : 8.977222, "14700" : 11.263889, "15000" : 12.34, "15300" : 15.08, "15600" : 13.420833, "15900" : 10.206667, "16200" : 12.315, "16500" : 13.343889, "16800" : 11.532222, "17100" : 10.200278, "17400" : 8.985278, "17700" : 9.128611, "18000" : 8.603889, "18300" : 9.313056, "18600" : 11.755, "18900" : 23.557222, "19200" : 23.038889, "19500" : 21.143889, "19800" : 18.601667, "20100" : 19.750278, "20400" : 19.304722, "20700" : 19.383333, "21000" : 19.965, "21300" : 20.965833, "21600" : 21.773056, "21900" : 21.105278, "22200" : 29.255, "22500" : 35.746389, "22800" : 33.488889, "23100" : 31.251111, "23400" : 33.471389, "23700" : 60.454722, "24000" : 38.882222, "24300" : 51.897778, "24600" : 44.935556, "24900" : 44.236667, "25200" : 48.449444, "25500" : 44.8825, "25800" : 41.956111, "26100" : 38.01, "26400" : 39.443889, "26700" : 39.229444, "27000" : 30.8625, "27300" : 20.803889, "27600" : 16.175556, "27900" : 14.640278, "28200" : 14.304722, "28500" : 19.226111, "28800" : 25.228333, "29100" : 40.5, "29400" : 47.488056, "29700" : 52.144167, "30000" : 40.721111, "30300" : 42.651667, "30600" : 40.168611, "30900" : 25.614444, "31200" : 15.492222, "31500" : 13.57, "31800" : 12.141111, "32100" : 9.388889, "32400" : 11.508056, "32700" : 15.43, "33000" : 22.832778, "33300" : 37.614444, "33600" : 127.546111, "33900" : 177.694167, "34200" : 119.407222, "34500" : 104.525278, "34800" : 94.600833, "35100" : 59.439444, "35400" : 67.685833, "35700" : 108.082222, "36000" : 54.361667, "36300" : 69.721944, "36600" : 54.661111, "36900" : 126.516667, "37200" : 71.852222, "37500" : 54.85, "37800" : 77.924167, "38100" : 50.224444, "38400" : 49.930556, "38700" : 50.289167, "39000" : 40.793056, "39300" : 31.978889, "39600" : 28.974722, "39900" : 30.823611, "40200" : 40.6625, "40500" : 109.627778, "40800" : 33.392222, "41100" : 24.454444, "41400" : 21.373889, "41700" : 14.910556, "42000" : 8.7825, "42300" : 4.818333, "42600" : 5.040278, "42900" : 5.969444, "43200" : 5.551667, "43500" : 5.863333, "43800" : 6.171111, "44100" : 6.842778, "44400" : 8.180833, "44700" : 10.243611, "45000" : 12.118889, "45300" : 14.161667, "45600" : 14.744444, "45900" : 14.871667, "46200" : 16.637778, "46500" : 20.170833, "46800" : 21.601111, "47100" : 21.699444, "47400" : 24.811389, "47700" : 29.141667, "48000" : 35.276944, "48300" : 41.606389, "48600" : 48.030278, "48900" : 45.806111, "49200" : 53.115556, "49500" : 46.814722, "49800" : 46.761667, "50100" : 43.361667, "50400" : 42.034722, "50700" : 38.844167, "51000" : 36.856944, "51300" : 31.732222, "51600" : 23.393889, "51900" : 30.634167, "52200" : 29.128333, "52500" : 26.378889, "52800" : 22.976944, "53100" : 20.695833, "53400" : 19.072222, "53700" : 16.305556, "54000" : 14.266389, "54300" : 15.381944, "54600" : 15.718611, "54900" : 16.5, "55200" : 16.526111, "55500" : 15.247778, "55800" : 11.865833, "56100" : 10.365833, "56400" : 11.649444, "56700" : 14.941944, "57000" : 16.960556, "57300" : 16.425833, "57600" : 15.263611, "57900" : 14.168333, "58200" : 12.413056, "58500" : 10.17, "58800" : 7.374444, "59100" : 6.366111, "59400" : 7.185278, "59700" : 8.324722, "60000" : 8.481111, "60300" : 8.756111, "60600" : 10.043889, "60900" : 9.540278, "61200" : 9.850833, "61500" : 10.343611 } } } } } } }
My HTML
`
<script type=”text/javascript”>
$(document).ready(function(){
$.ajaxSetup({
cache: false
});var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Values’, map: ‘Body>Data>inverter\/1>Data>EnergyReal_WAC_Sum_Produced>Values[0]’},
{ name: ‘Wh’, map: ‘Body>Data>inverter\/1>Data>EnergyReal_WAC_Sum_Produced>Values[1]’}
],url: ‘json/EnergyReal_WAC_Sum_Produced.json’
};var dataAdapter = new $.jqx.dataAdapter(source,
{
autoBind: true,
async: false,
downloadComplete: function () { },
loadComplete: function () { },
loadError: function (xhr, status, error) {
alert(“error Occured while fetching server data – , ” + status + “, ” + error);
}
});
dataAdapter.dataBind();var settings = {
title: “Produktion”,
description: “”,
showLegend: true,
padding: { left: 5, top: 1, right: 5, bottom: 1 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
text: ‘Category Axis’,
textRotationAngle: 0,
dataField: ‘Values’,
showTickMarks: true
},
colorScheme: ‘scheme05’,seriesGroups:
[
{
type: ‘spline’,
valueAxis:
{
displayValueAxis: true,
description: ‘Wh’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’,
unitInterval: 1,
formatSettings: { decimalPlaces: 1}
},
series: [
{ dataField: ‘Wh’, displayText: ‘Wh’}
]
}
]
};
$(‘#jqxChart’).jqxChart(settings);//Call getstatus() to update controls
getStatus();});
function getStatus() {
$.getJSON(“json/powerflow2.json”, function(data){
//Not needed for this, problem. This does work.
if (data.Body.Data.Site.P_Grid < 0) {
document.getElementById(“img_grid”).src = “img/green-arrow-left.png”;
} else {
document.getElementById(“img_grid”).src = “img/red-arrow-right.png”;
};$(‘div#flow’).html(Math.abs(data.Body.Data.Site.P_Grid) + ‘W’);
$(‘div#prod’).html(data.Body.Data.Site.P_PV + ‘W’);
$(‘div#forbr’).html(Math.abs(data.Body.Data.Site.P_Load) + ‘W’);
if (data.Body.Data.Site.P_PV > 0) {
var ownConsumption = data.Body.Data.Site.P_PV / Math.abs(data.Body.Data.Site.P_Load) *100;
$(‘span#self’).html(ownConsumption.toFixed(1) + ‘%’);
} else {
$(‘span#self’).html(‘0.0%’);
}
setTimeout(“getStatus()”, 30000);
});};
</script>
</head>
<body>
<center>
<table border=”1″>
<tr>
<!–
<td colspan=”2″ align=”center”><canvas width=”1100″ height=”150″></td>
–>
</tr><tr>
<td>
<table border=”0″>
<!–
<tr>
<td align=”center”><h2>Sälj</h2></td><td align=”center”><h2>Prod</h2></td><td align=”center”><h2>Förbr</h2></td>
</tr>
–>
<tr>
<td align=”center”>
<h2><div id=”flow”>Loading</div></h2>
</td>
<td align=”center”>
<h2><div id=”prod”>Loading</div></h2>
</img>
<div> </div>
</td>
<td align=”center”>
<h2><div id=”forbr”>Loading</div></h2>
<br>
Värme <span id=”BVP”>6W</span>
</td>
</tr>
<tr>
<td colspan=”3″ align=”center”><h2>Sjalvforsorjningsgrad: <span id=”self”>Loading</span></h2></td>
</tr>
</table>
</td>
<td><h2><div id=”today”> 1800W</div></h2>
<div id=”jqxChart” style=”width:550px; height:350px; margin-left: auto; margin-right:auto; possition: relative; left: 0px; top: 0px;”></div>
</td>
</tr>
</table></center>
</body>
</html>
‘Sorry, missed the first lines in my HTML.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Egen flödesbild från API</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="src/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="src/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="src/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="src/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="src/jqwidgets/jqxloader.js"></script> <script type="text/javascript"> $(document).ready(function(){ ...
Hi.
Just wanted to say that I kind of solved it with PHP instead.
Get a error message in the chart “Z.getHouers is not a function” but I can live with that for now. Probably I have a bad dateformat.Regards
Missed type: ‘date’ for the xAxis, so now the getHour is fixed 🙂
Any ideas how to read the json file directly without the need of php?
Hello Tom,
I am not sure why your initial issue occurred. Maybe your datafield mapping was not adjusted correctly. You can check if the data is loaded correctly (and if so, what data is loaded) by using the data adapter’s loadComplete and loadError callbacks. Their use is explained in the following help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi, sorry to ask but how do I use loadComplete to show the loaded data? I am new on jqwidgets and javascript, so I am a bit lost.
loadError don’t report any errors.loadError: function (xhr, status, error) { alert(“error Occured while fetching server data – , ” + status + “, ” + error); }
Hi Tom,
Here is how you can do this:
loadComplete: function (records) { console.log(records); }
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar.
I got:
>Object { Head: Object, Body: Object}
>>Body: Object
>>>Data: Object
>>>>Inverter/1: Object
>>>>>Data: Object
>>>>>>EnergyReal_WAC_Sum_Produced: Object
>>>>>>>Values: Object
0:0
300:0
600:0
and so on, the values that I want to chart.So I gues that I get the values, but I don’t point them out correctly or the format is wrong, or I don’t know.
Maby I just run it through PHP and change the format to something that works eg:[ { "time": -7200, "Tid": "2016-08-05 00:00:00", "kwp": 2.32, "Wh": 0 }, { "time": -6900, "Tid": "2016-08-05 00:05:00", "kwp": 2.32, "Wh": 0 }, { "time": -6600, "Tid": "2016-08-05 00:10:00", "kwp": 2.32, "Wh": 0 }, <long list with values> { "time": 78900, "Tid": "2016-08-05 23:55:00", "kwp": 2.32, "wH": "null" } ]
Btw, to be clear, I have changed the output in my json, I added human readable time och max output from the solarpanels. I also added values in the feature, to get the X axis to show 24h from midnight to midnigt.
Hi Tom,
Processing the data through PHP is a good solution, too (and maybe faster). If you wish to process it on the client side, you would probably have to apply the correct datafield mapping.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/you would probably have to apply the correct datafield mapping.
That is what I need help with 🙂
Hi Tom,
We may be able to help you with the mapping, but we would need some sample JSON data in the format you specified your PHP-processed data in. You can output it by logging:
loadComplete: function(records) { console.log(JSON.stringify(records)); }
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/You have my JSON in my first post.
Eg:{ "Head" : { "RequestArguments" : { "Scope" : "System", "StartDate" : "2016-07-27T00:00:00+02:00", "EndDate" : "2016-07-27T23:59:59+02:00", "Channel" : "EnergyReal_WAC_Sum_Produced", "SeriesType" : "Detail", "HumanReadable" : "True" }, "Status" : { "Code" : 0, "Reason" : "", "UserMessage" : "", "ErrorDetail" : { "Nodes" : [] } }, "Timestamp" : "2016-07-27T19:09:42+02:00" }, "Body" : { "Data" : { "inverter\/1" : { "NodeType" : 97, "DeviceType" : 122, "Start" : "2016-07-27T00:00:00+02:00", "End" : "2016-07-27T23:59:59+02:00", "Data" : { "EnergyReal_WAC_Sum_Produced" : { "_comment" : "channelId=67830024", "Unit" : "Wh", "Values" : { "-7200" : 0, "-6900" : 0, "-6600" : 0, "-6300" : 0, "-6000" : 0, "-5700" : 0, "-5400" : 0, "-5100" : 0, "-4800" : 0, "-4500" : 0, "-4200" : 0, "-3900" : 0, "-3600" : 0, "-3300" : 0, "-3000" : 0, "-2700" : 0, "-2400" : 0, "-2100" : 0, "-1800" : 0, "-1500" : 0, "-1200" : 0, "-900" : 0, "-600" : 0, "-300" : 0, "0" : 0, "300" : 0, "600" : 0, "900" : 0, "1200" : 0, "1500" : 0, "1800" : 0, "2100" : 0, "2400" : 0, "2700" : 0, "3000" : 0, "3300" : 0, "3600" : 0, "3900" : 0, "4200" : 0, "4500" : 0, "4800" : 0, "5100" : 0, "5400" : 0, "5700" : 3.745833, "6000" : 4.25, "6300" : 4.994722, "6600" : 4.845278, "6900" : 4.763611, <cut alot of values> "50100" : 43.361667, "50400" : 42.034722, "50700" : 38.844167, "51000" : 36.856944, "51300" : 31.732222, "51600" : 23.393889, "51900" : 30.634167, "52200" : 29.128333, "52500" : 26.378889, "52800" : 22.976944, "53100" : 20.695833, "53400" : 19.072222, "53700" : 16.305556, "54000" : 14.266389, "54300" : 15.381944, "54600" : 15.718611, "54900" : 16.5, "55200" : 16.526111, "55500" : 15.247778, "55800" : 11.865833, "56100" : 10.365833, "56400" : 11.649444, "56700" : 14.941944, "57000" : 16.960556, "57300" : 16.425833, "57600" : 15.263611, "57900" : 14.168333, "58200" : 12.413056, "58500" : 10.17, "58800" : 7.374444, "59100" : 6.366111, "59400" : 7.185278, "59700" : 8.324722, "60000" : 8.481111, "60300" : 8.756111, "60600" : 10.043889, "60900" : 9.540278, "61200" : 9.850833, "61500" : 10.343611 } } } } } } }
For the last value (“61500” : 10.343611) X-axis value should be 61500 and Y-axis 10.343611.
61500 is seconds from midnight GMT, and can be modified to just about anything as long as the sequence is the same.
10.343611 is kWh and can be rounded to 1 decimalI can try to export it from loadComplete when I get back home.
Regards
TomHi Tom,
I am sorry, I forgot you shared the JSON initially.
The Values object would have to be processed either server- or client-side in order to be “readable” for the chart. Client-side, you can achieve this with the data adapter’s beforeLoadComplete callback function (for more information, please take a look at this help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm), but since you have already done this on the back end, we suggest you keep this solution, because it is suitable and probably faster than the approach with beforeLoadComplete.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you.
I suspected so, but hoped that it was possible to load directly. I just stick to PHP for now. I will look into beforeLoadComplete and if I get it to work – maby do the rest av my charts with that.Regards
Tom -
AuthorPosts
You must be logged in to reply to this topic.