поточно предаване на множество серии към високи класации

Използвам websockets за поточно предаване на валиден JSON към highcharts.js. Целта ми е да начертая няколко реда едновременно на една и съща графика. JSON, който контролирам, съдържа серии от данни 4-16 (наречени парсери), които бих искал да наслагвам с високи диаграми. Пример за JSON:

[
    {
        "y": 91,
        "x": 1403640998,
        "name": "parser1"
    },
    {
        "y": 184,
        "x": 1403640998,
        "name": "parser2"
    },
    {
        "y": 26,
        "x": 1403640998,
        "name": "parser3"
    }
]

Мога да направя един ред за графика, но те се комбинират в една поредица. Бих искал динамично да коригирам серията въз основа на броя парсери, които наблюдавам. Ако моят JSON съдържа информация за 3 парсера, както публикувах по-горе, бих искал 3 реда да се актуализират автоматично всяка секунда.

Както виждате, мога да накарам да покажа само 1. екранна снимка на единствения ми ред

Моят HTML

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline',
            events: {
                load: function () {
                    var $message = $('#message');
                    var connection = new WebSocket('ws://x.x.x.x:8888/ws');
                    var self = this;

                    connection.onmessage = function(event) {
                        var data = JSON.parse(event.data);
                        var series = self.series[0];
                        var redrawVal = true;
                        var shiftVal = false;
                        if (series.data && series.data.length > 25) {shiftVal = true;}

                        var newseries = {
                            name: '',
                            x: 0,
                            y: 0
                        };


                        $.each(data, function(i,item){
                            newseries.name = item.name;
                            newseries.x = item.x;
                            newseries.y = item.y;

                            console.log(newseries)
                            series.addPoint(newseries, redrawVal, shiftVal);

                        });

                    };
                }
            }
        },
        title: {
            text: 'Using WebSockets for realtime updates'
        },
        xAxis: {
            type: 'date'
        },
        series: [{
            name: 'series',
        data: []
        }]

    });
});

Can someone help me get multiple series to dynamically display in highcharts.js?


json dynamic series highcharts
person Jared    schedule 24.06.2014    source източник
comment
това може да изглежда обещаващо, ще го разгледаме по-подробно утре: jsfiddle.net/MMjN2/6   -  person Jared    schedule 25.06.2014

Отговори (1)


arrow_upward
4
arrow_downward

Общата идея трябва да бъде, че за всяка серия, която задавате, е id. Тогава можете да получите тази серия по следния начин: chart.get(id). Така че, ако имате серия, добавете точка към тази серия, ако не, създайте нова, точно като тази: http://jsfiddle.net/9FkJc/8/

            var self = this;
            data = [{
                "y": 91,
                    "x": 1403640998,
                    "name": "parser1"
            }, {
                "y": 184,
                    "x": 1403640998,
                    "name": "parser2"
            }, {
                "y": 26,
                    "x": 1403640998,
                    "name": "parser3"
            }];

            var series = self.series[0];
            var redrawVal = true;

            $.each(data, function (i, item) {
                var series = self.get(item.name);
                if (series) { // series already exists
                    series.addPoint(item, redrawVal, series.data.length > 25);
                } else { //  new series
                    self.addSeries({
                        data: [item],
                        id: item.name
                    });
                }
            });
person Paweł Fus    schedule 25.06.2014
comment
не е знаел за .addSeries. Благодаря за помощта, ти си рок! - person Jared; 25.06.2014