Есть ли способ обновлять график в Javascript каждые x секунд?

Question

У меня есть массив точек данных (в виде обычного текста или в формате json). Данные генерируются сразу (и получаются с сервера OpenCPU, см., Например: https://cloud.opencpu.org/ocpu/library/datasets/R/mtcars/json?digits=0). Имея эти данные, мне интересно, есть ли способ создать диаграмму рассеяния на веб-странице и отображать точки «динамически»? То есть отображается первая точка, затем вторая через 10 секунд et c ..... Пользователь не должен ничего делать, кроме как ждать, пока отобразится весь график. Best, Вт

Answer 1

Я нашел, как это сделать. Надо было больше смотреть. Извините

Благодаря этому сообщению на jsfiddle:

https://jsfiddle.net/canvasjs/eNkLz/

var dps = []; // dataPoints
            var instance = (new Date()).getTime();
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Live SpO2 Data"
                },
                axisX: {
                    title: "Time",
                    valueFormatString: "hh:mm:ss"
                },

                axisY: {
                    title: "%SpO2",
                },
                data: [{
                    type: "spline",
                    xValueType: "dateTime",
                    dataPoints: dps
                }]
            });

            var yVal = [0.02, 0.02, 0.02, 0.02, 0.05, 0.07, 0.06, 0.09, 0.06, -0.2, 0.9, 0.5, -0.1, 0.02, 0.02, 0.04, 0.1, 0.08, 0.03, 0.02, 0.02, 0.02, 0.02, 0.02];
            var updateInterval = 1000;
            var maxDataLength = yVal.length; // number of dataPoints after which the series shifts
            var time = new Date();
            var updateCount = 0;

            var updateChart = function (count) {

                count = count || 1;

                for (var j = 0; j < count; j++) {
                    time.setSeconds(time.getSeconds() + 1);

                    dps.push({
                        x: time.getTime(),
                        y: yVal[updateCount % yVal.length]
                    });

                    updateCount++;

                    if (dps.length > maxDataLength) {
                        dps.shift();
                    }
                }


                chart.render();

            };

            // generates first set of dataPoints
            updateChart(maxDataLength);

            // update chart after specified time.
            setInterval(function () { updateChart();}, updateInterval);