Несколько высоких графиков на одной странице на основе значения clientId?

Question

Привет всем. Я нарисовал высокоуровневую диаграмму с потреблением покоя api json, и все работает правильно.
Но теперь я хочу иметь несколько номеров диаграмм (на основе clientId). Я выдвигаю массив вне цикла с помощью (cpu_usage, timestamp и clientID).Так есть ли кто-нибудь, кто знает, как динамически создавать более высокие графики на основе clientID?

Пример:
Если у меня 3 clientID, мне нужно 3 старших чарта с их cpu_usage и timestamp.

Rest api JSON: http://5ea073ff.ngrok.io/api/clients

Результат:

<div id="container"></div>
 <script type="text/javascript">

$.getJSON( "http://localhost:8000/api/devices", function( res) {


    var result= [];
    var clientNames = new Array();
    console.log(result);

  $.each( res, function(i) {
        var deviceNames=data[i].clientAllias;
        var clientId=data[i].clientId;
        clientNames.push(deviceNames);          
    $.each( data[i].clientData, function(a) {
        $.each( data[i].clientData[a], function(key, val) {
            clientId2=data[i].clientData[a].clientId
            var cpu=data[i].clientData[a].cpuUsage;
            var time_usages=data[i].clientData[a].timestamp;
            infos=[];
            infos.push(time_usages, cpu, clientId2);
            result.push(infos);

  });
  });
     });

    result.sort();

$(document).ready(function(){
        var dataObject = {
            marker: {
        states: {
            enabled: true,
        }
    },
        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: 'Sec'
            }, {
                count: 1,
                type: 'hour',
                text: 'Min'
            }, 
            {
                count: 1,
                type: 'day',
                text: 'Hours'
            },

            {
                type: 'all',
                text: 'All'

            }],
            title:'hours',
            inputEnabled: true,
            _selected: 1
        },


            title: {
                text: clientNames,
            },
          xAxis: {

    title: {
        enabled: true,
        text: 'CPU USAGE'
    },
    type: 'datetime',
            dateTimeLabelFormats: {
               second: '%H:%M:%S',
               minute: '%H:%M',
               hour: '%H:%M',
               day: '%e. %b',
               week: '%e. %b',


            },


},
plotOptions: {
        series: {
            marker: {
                enabled: true,
                radius: 3,
                fillColor: '#007ab3',
            }
        }
    },

            series: [{
    name:"CPU USAGE",
   data: result,
    }],

            chart: {
                renderTo: 'container'
            }

        };

         var chart = new Highcharts.StockChart(dataObject);   
        //var chart = $('#container').highcharts('StockChart', dataObject);



    });
   });




</script>

Answer 1

Вам необходимо отобразить данные по clientId.Затем каждый clientId может быть сопоставлен, чтобы взять cpuUsage, timeStamp, clientId.Вы можете создать массив, каждый клиент которого имеет свои данные из предыдущей карты.Затем вы можете добавить диаграмму так:

_.forEach(clients, function(client) {
$('<div class="chart">')
    .appendTo('#container')
    .highcharts({
        marker: {
            states: {
                enabled: true
            }
        },
        rangeSelector: {
            buttons: [{
                    count: 1,
                    type: "minute",
                    text: "Sec"
                },
                {
                    count: 1,
                    type: "hour",
                    text: "Min"
                },
                {
                    count: 1,
                    type: "day",
                    text: "Hours"
                },

                {
                    type: "all",
                    text: "All"
                }
            ],
            title: "hours",
            inputEnabled: true,
            _selected: 1
        },

        title: {
            text: client.name
        },
        xAxis: {
            title: {
                enabled: true,
                text: "CPU USAGE"
            },
            type: "datetime",
            dateTimeLabelFormats: {
                second: "%H:%M:%S",
                minute: "%H:%M",
                hour: "%H:%M",
                day: "%e. %b",
                week: "%e. %b",
                day: "%Y<br/>%b-%d"
            }
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    radius: 3,
                    fillColor: "#007ab3"
                }
            }
        },

        series: [{
            name: "CPU USAGE",
            data: client.data.sort()
        }],

        chart: {
            renderTo: "container" + name
        }
    });

})

Я использовал lodash в качестве помощника для отображения данных, но вы можете использовать все, что захотите.Я считаю, что анализировать данные намного проще.

var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId"); <-- ALL UNIQUE CLIENTS
var clients = [];
_.forEach(mappedClients, function(clientId) {
    var tempClient = {
        name: clientId,
        data: []
    };
    _.forEach(data, function(tempData) { <--- MAPPING THROUGH ALL DATA TO FIND A MATCH FOR EACH UNIQUE CLIENT 
        if (clientId === tempData.clientId) {
            _.forEach(tempData.clientData, function(clientData) { <-- THEN MAP CLIENTDATA ARRAY OF THE CLIENT TO KEEP THE DATA THAT WE WANT
                tempClient.data.push(
                    [clientData.cpuUsage, clientData.timestamp, clientId]
                );
            })
        }
    });
    clients.push(tempClient);
});

проверьте работающий пример jsfiddle на основе вашей информации Jsfiddle