jQuery UI Widgets Forums Chart LIne graph and JSON, dont get it to work

This topic contains 14 replies, has 2 voices, and was last updated by  Tom 8 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author

  • Tom
    Participant

    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>


    Tom
    Participant

    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(){
    ...
    

    Tom
    Participant

    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


    Tom
    Participant

    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?


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tom
    Participant

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

    Dimitar
    Participant

    Hi Tom,

    Here is how you can do this:

    loadComplete: function (records)
    {
        console.log(records);
    }

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tom
    Participant

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

    Tom
    Participant

    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.


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tom
    Participant

    you would probably have to apply the correct datafield mapping.

    That is what I need help with 🙂


    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tom
    Participant

    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 decimal

    I can try to export it from loadComplete when I get back home.

    Regards
    Tom


    Dimitar
    Participant

    Hi 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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tom
    Participant

    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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.