Как создать несколько графиков в реальном времени с canvasjs без замедления пользовательского интерфейса?

Question

Я новичок в JavaScript и JQuery вещь. Я хочу создать несколько графиков в реальном времени, поэтому после поиска в Google я обнаружил, что могу добиться этого, используя canvasjs. Я создал три разные функции JavaScript, чтобы включить три разных графика в один jsp, и каждая функция опрашивает отдельный сервлет для данных. Мой пользовательский интерфейс застревает и становится медленным, так как точки данных начали накапливаться в наборах данных. Что я делаю неправильно? Какая должна быть правильная структура для построения прямых данных? Любая помощь по этой теме будет принята с благодарностью.

Я также публикую свою функцию JavaScript.

function load_A(){

    var dps = []; //dataPoints. 

    jQuery.post("Update_A").done(function(responseJson) { 
        jQuery.each(responseJson, function(key, value) {

            dps.push({
                x : new Date(key),
                y : value,
            //  label : key
            });
            alert(key + " " + value);
        });

        var chart = new CanvasJS.Chart("chartContainer_A", {
            zoomEnabled : true,
            backgroundColor : "black",
            title : {
                text : "POC_A",
                fontColor : "red",
                fontSize : 24,
                fontFamily : "TimesNewRoman",
                fontWeight : "bolder",
                padding : 10

            },
            axisX:{
                title : "Time",
                titleFontWeight: "bolder",
                titleFontColor: "red",
                lineThickness: 3,
                lineColor: "lightgreen",
        //      gridThickness: 0.25,
                gridColor: "orange",
                gridDashType: "dash",
                labelFontColor: "lightgreen",
        //      interlacedColor: "#191919" ,
                intervalType: "second",
                interval: 1,
                valueFormatString: "hh:mm:ss", 
            }, 
            axisY : {
                title : "Random no.",
                titleFontWeight: "bolder",
                titleFontColor: "red",
                lineThickness: 5,
                lineColor: "lightgreen",
        //      gridThickness: 0.25,
                gridColor: "orange",
                gridDashType: "dash",
                labelFontColor: "lightgreen"
            },
            data : [ {
                type : "line",
                xValueType : "dateTime",
                dataPoints : dps
            } ]
        });

        chart.render();

        function poll_A() {

            jQuery.ajax({
                url : "Update_A",
                type : "POST",
                success : function(data) {
                    jQuery.each(data, function(key, value) {
                        dps.push({
                            x : new Date(key),
                            y : value
                        });
                        chart.render();
                        chart.options.title.text = "POC_A " + value;
                    });
                },
                dataType : "json",
                complete : function() {
                setTimeout(poll_A,1000);
                },
                timeout: 2000
            });

    }

    poll_A();

    });

}

Answer 1

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

success : function(data) {
    jQuery.each(data, function(key, value) {
         dps.push({
         x : new Date(key),
         y : value
         });
    });
chart.render();
chart.options.title.text = "POC_A " + value;
},