Question

I have a program that get sensors data from a Como database and put in a html page a graph. Now the graph is implemented with Google Graph API, but i have to switch to Highcharts.

I have a function that converts json data in Google format

    function json2gdt(data) {
    // Build a google.DataTable
    var gdt = new google.visualization.DataTable();
    gdt.addColumn('datetime', 'Time');
    gdt.addColumn('number', 'value');
    gdt.addRows(data.length*2);
    var prev = data[0][1];
    for (var i=0; i<data.length; i++) {
    ts = data[i][0] * 1000
        gdt.setValue(i*2, 0, new Date(ts));
    gdt.setValue(i*2, 1, prev); 
        gdt.setValue(i*2+1, 0, new Date(ts));
        gdt.setValue(i*2+1, 1, data[i][1]);
    prev = data[i][1];
    }
    return gdt;
}

Then I have a function that visualize in the html page the graph:

function visualize(json_response) {
var err = json_response['error'];
if (err) {
  $("#chart_div").html("<div class='alert'>" + err + "</div>");
  return;
}
var data = json_response['data'];
if (data.length == 0) {
  $("#chart_div").html("<div class='info'>No data received from this sensor!</div>");
  return;
}
// Convert Data to a step function
//var step_data = json2step(data);
var gdt = json2gdt(data);
var start;
if (data && data.length != 0) 
// TODO: fix this to actually compute the half of the time period
start = new Date(data[Math.floor(data.length / 2)][0] * 1000);
// draw our data in the widget
if (chart == null) {
    chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
}
// TODO: compute tickness as a function of the time interval
chart.draw(gdt, {displayAnnotations: false, 
        displayZoomButtons: true, 
        thickness: 2,
        fill: 10,
                {% if net.ntype == "ztc" and sens.type == 2 %}
                  colors: ['#F00000'],
          scaleType: 'fixed', 
          min: 0,
          max: 1,
        {% else %}
                  scaleType: 'maximized', 
                {% end %}
        allowRedraw: true,
        displayExactValues: true,
        zoomStartTime: start});

}

Finally this is a bit of json data file..

#master: sender-64bit-addr receiver-timestamp *;OPCODE;sender-timestamp;sender-seq-num;payload-length;payload#
#master: input file (re)opened at 4f708e9d
#master: child [pid=6884]  started  at 4f708eb1
0000000000000000 4f708eb2 *ZTCR;00000004;00000002;16;9755080000010000000000#
0000000000000000 4f708eb2 *ZTCR;00000004;00000003;10;9634050010000003#
0000000000000000 4f708eb2 *ZTCR;00000005;00000004;0A;97410200EA#
0000000000000000 4f708eb3 *ZTCR;00000005;00000005;10;9634050010000003#

Can anyone help me? i have to change the data format for highcharts or it’s the same for google graph?

Answer 1

The json object is like this:

"{ 
'data' : [
              [1, 10], 
              [2, 11], 
              [3, 12]
 ]
 }"