Как создать новый div динамически каждый раз, когда вводится элемент данных

Question

У меня есть данные, поступающие с виртуальной машины с несколькими блочными устройствами. Каждое блочное устройство представлено линейными диаграммами, которые создаются с использованием c3.js, которые считывают Bytes_Read и Bytes_Written в наборе данных и отображают его в реальном времени. Но я борюсь с проблемой, когда в наборе данных появляются новые блок-устройства, которые не создают новую диаграмму. Каким будет лучший способ достичь этого с помощью JavaScript.

Пример моего набора данных

{ 
     "devices": [ 
      { 
       "Name": "bdev0", 
       "output": { 
        "IO_Operations": 0, 
        "Bytes_Read": 0, 
        "Bytes_Written": 0 
       } 
      }, 
{ 
       "Name": "bdev0", 
       "output": { 
        "IO_Operations": 1, 
        "Bytes_Read": 2, 
        "Bytes_Written": 3 
       } 
      }, 
{ 
       "Name": "bdev0", 
       "output": { 
        "IO_Operations": 5, 
        "Bytes_Read": 7, 
        "Bytes_Written": 8 
       } 
      }, 
      { 
       "Name": "bdev1", 
       "output": { 
        "IO_Operations": 10, 
        "Bytes_Read": 20, 
        "Bytes_Written": 30 
       } 
      } 
     ] 
    } 

Обновленный набор данных с новым устройством

{ 
     "devices": [ 
      { 
       "Name": "bdev0", 
       "output": { 
        "IO_Operations": 0, 
        "Bytes_Read": 0, 
        "Bytes_Written": 0 
       } 
      }, 
{ 
       "Name": "bdev0", 
       "output": { 
        "IO_Operations": 1, 
        "Bytes_Read": 2, 
        "Bytes_Written": 3 
       } 
      }, 
{ 
       "Name": "bdev0", 
       "output": { 
        "IO_Operations": 5, 
        "Bytes_Read": 7, 
        "Bytes_Written": 8 
       } 
      }, 
      { 
       "Name": "bdev1", 
       "output": { 
        "IO_Operations": 10, 
        "Bytes_Read": 20, 
        "Bytes_Written": 30 
       }, 
{ 
       "Name": "bdev2", 
       "output": { 
        "IO_Operations": 40, 
        "Bytes_Read": 50, 
        "Bytes_Written": 90 
       } 
      } 
     ] 
    } 

код диаграммы

eon.chart({ 
    pubnub : pubnub, 
    history : false, 
    channel : 'orbit5_volume', 
    flow  : true, 
    debug: true, 
    generate : { 
     bindto : '#chart', 
     size: { 
     height: 180, 
     width: 500 
    }, 
     data : { 
      x  : 'x', 
      labels : true 
     }, 
     axis : { 
      x : { 
       type : 'timeseries', 
       tick : { 
        format : '%H:%M:%S' 
       }, 
       zoom: { 
        enabled: true 
       } 
      } 
     } 
    }, 

    transform : function(m) { 
     for (var i in m.devices){ 
      return { columns : [ 
      ['x', new Date().getTime()], 
      ['Bytes Written', m.devices[i].output.Bytes_Read], 
      ['Bytes Read', m.devices[i].output.Bytes_Written] 
      ] 
      } 
     } 
    } 
}); 

Answer 1

Вы диаграмма код преобразования цикл будет перезаписывать ключ данные каждого, который поэтому вы получаете только пару значений. Если вы используете переменную i, чтобы дать каждой части данных новый ключ, она появится на диаграмме.

Попробуйте функцию преобразования:

eon.chart({ 
    transform : function(m) { 

     var obj = {columns: [ 
      ['x', new Date().getTime()] 
     ]}; 

     for (var i in m.devices) { 
      obj.columns.push(['Bytes Read ' + i, m.devices[i].output.Bytes_Read]); 
      obj.columns.push(['Bytes Written ' + i, m.devices[i].output.Bytes_Written]]); 
      } 
     } 

     return obj; 
    } 
});