Как да създадете нов div динамично всеки път, когато се въведе елемент в данните

Имам данни, идващи от виртуална машина, която има няколко блокови устройства. Всяко блоково устройство е представено с линейни диаграми, които са създадени с помощта на 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]
            ]
          }
        }
    }
});

javascript jquery d3.js pubnub c3.js
person Imo    schedule 20.10.2015    source източник
comment
@mplungjan: Не искам да актуализирам диаграмата, но да актуализирам страницата с изцяло нова диаграма, когато се въведе ново блоково устройство.   -  person Imo    schedule 20.10.2015
comment
След това можете просто да премахнете диаграмата и да създадете нова и да актуализирате страницата, нали?   -  person Nachiketha    schedule 20.10.2015
comment
Искате ли напълно уникална диаграма за всяко устройство или просто още една линия в същата диаграма?   -  person Craig Conover    schedule 20.10.2015
comment
@CraigConover Напълно уникална диаграма за устройство също така не искам да премахвам предишните диаграми, тоест ако има ново устройство в данните, то просто добавя към вече съществуващите диаграми   -  person Imo    schedule 21.10.2015
comment
Успяхте ли ръчно да кодирате два екземпляра на EON диаграма или дори c3 диаграма без EON успешно?   -  person Craig Conover    schedule 22.10.2015

Отговори (1)


arrow_upward
7
arrow_downward

Вашият цикъл за преобразуване на код на диаграма презаписва всеки ключ на данните, поради което получавате само няколко стойности. Ако използвате променливата 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;
    }
});
person Ian Jennings    schedule 28.10.2015
comment
лукс transform() ftw - person Stephen Blum; 28.10.2015