Отображение временных рядов данных JSON в табличном формате

0

У меня есть следующие json-данные, которые я хотел бы отображать в формате HTML-таблицы.

Данные:

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

Моя идея - показать его как таблицу:

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

Мой код до сих пор находится в jsfiddle, где мне удалось получить формат таблицы, за исключением того, что мои cpu2 и cpu 3 не заполнены:

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

Мой код доступен здесь.

Любая помощь будет приветствоваться, в настоящее время я использую html-таблицы, есть ли другой метод, использующий плагины таблицы jquery для упрощения задачи?

2 ответа

1
Лучший ответ

Пожалуйста, проверьте скрипт обновления @здесь

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

Цель аргумента в insertCell такова:

Требуется в Firefox и Opera, необязательно в IE, Chrome и Safari. Число (начинается с 0), которое определяет позицию новой ячейки в текущей строке. Значение 0 приводит к тому, что новая ячейка будет вставлена в первую позицию. Можно также использовать значение -1; что приводит к тому, что новая ячейка будет вставлена в последнюю позицию.

Если этот параметр опущен, insertCell() вставляет новую ячейку в последнюю позицию в IE и в первую позицию в Chrome и Safari.

Также, вызывая insertRow каждый раз, когда вы insertRow существующую строку каждый раз в таблице. его нужно называть только один раз

  • 0
    Решение не является общим, так как вы предполагаете, что у нас есть только 3 цели, поправьте меня, если я ошибаюсь. Как это можно увеличить?
  • 0
    var cell3 = row [j] .insertCell (-1); // предполагает, что у нас есть знания об элементах данных. cell3.innerHTML = data [i] .datapoints [j] [0];
Показать ещё 2 комментария
1

Написать:

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
}

Обновлена скрипка.

  • 0
    Как мы можем изменить цвета, используя этот подход? скажем, мы хотим сравнить с порогом (скажем, 80), выше 80, зеленый, ниже 80 красный
  • 0
    @VamsiKrishna ты хочешь что-то подобное ??
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню