Displaying timeseries json data in table format

Question

I have the following json data which i would like to display in format of a HTML table.

Data:

data = [{"target": "cpu1", "datapoints": [[100, 1388661130], [100, 1388661140], [100, 1388661150], [100, 1388661160], [100, 1388661170], [100, 1388661180], [100, 1388661190], [100, 1388661200], [100, 1388661210], [100, 1388661220], [100, 1388661230], [100, 1388661240], [100, 1388661250]]}, {"target": "cpu2", "datapoints": [[400, 1388661130], [400, 1388661140], [400, 1388661150], [400, 1388661160], [400, 1388661170], [400, 1388661180], [400, 1388661190], [400, 1388661200], [400, 1388661210], [400, 1388661220], [400, 1388661230], [400, 1388661240], [400, 1388661250]]},  {"target": "cpu3", "datapoints": [[400, 1388661130], [400, 1388661140], [400, 1388661150], [400, 1388661160], [400, 1388661170], [400, 1388661180], [400, 1388661190], [400, 1388661200], [400, 1388661210], [400, 1388661220], [400, 1388661230], [400, 1388661240], [400, 1388661250]]}];

My idea is to display it as a table:

Time|Cpu 1 | cpu 2| cpu 3|
t1    v1     v2      v3

My code so far is in jsfiddle , where i succeeded in geting the table format except that my cpu2 and cpu 3 are not populated:

   Time|cpu1|cpu2|cpu3
    t1   v1
    t2   v2
    t1   v3
    t2   v4
    t1   v5
    t2   v6

My code is available here .

Any help would be welcome, Currently I am using html tables, is there another method using jquery table plugins to simplify the task?

Answer 1

Please check the update fiddle @ here

           if(data){
            var len = data.length;
            var row = new Array;
          // alert (len);
            var txt = "";
            if(len > 0){
                var tab2 = document.getElementById("table");
                var table = document.getElementById("coltab");
                 for(var i=0;i<len;i++){
                    //alert (i);
                   // var row = tab2.insertRow(1);
                    var len_data = data[i].datapoints.length;

                    var cell1 = table.insertCell(i+1);
                    //var cell2 = row.insertCell(1);
                     cell1.innerHTML = data[i].target;
                     for (var j = 0; j <len_data;j++) {
                         if (i==0)
                         row[j] = tab2.insertRow(j+1);
                         if (i==0)
                         {
                         var cell2 = row[j].insertCell(0);
                         cell2.innerHTML = data[i].datapoints[j][1];
                         }
                         var cell3 = row[j].insertCell(-1); 
                         cell3.innerHTML = data[i].datapoints[j][0];  
                     }
                }
            }
        }

The purpose of argument in insertCell is like this

Required in Firefox and Opera, optional in IE, Chrome and Safari. A number (starts at 0) that specifies the position of the new cell in the current row. The value of 0 results in that the new cell will be inserted at the first position. The value of -1 can also be used; which results in that the new cell will be inserted at the last position.

If this parameter is omitted, insertCell() inserts the new cell at the last position in IE and at the first position in Chrome and Safari.

Also by calling insertRow every time you are over writing the existing row every time in table. it have to be called only once

Answer 2

Write:

if (data) {
    var len = data.length;
    var txt = "",
        th = "";
    if (len > 0) {
        var alen = data[0].datapoints.length;
        for (var j = 0; j < alen; j++) {
            txt += "<tr>";//new row
            for (var i = 0; i < len; i++) {
                var dt = data[i].datapoints[j][0];
                var first = data[i].datapoints[j][1];
                if (i == j) {
                    th += "<th>" + data[i].target + "</th>";
                }
                if (i == 0) {
                    txt += "<td>" + first + "</td>"; //first cell in each row
                }
                txt += "<td>" + dt + "</td>";
            }
            txt += "</tr>";//end row
        }
    }
    $("#table").append(txt); //table data
    $("#coltab").append(th); //header row
}

Updated fiddle here.