score:2

you should use 2.5.0 chartsjs

here it works : http://jsfiddle.net/klg5ntou/93

var data = {
labels: ["0", "1", "2", "3", "4", "5", "6"],
datasets: [
    {
        label: "my first dataset",
        fillcolor: "rgba(95,186,88,0.7)",
        strokecolor: "rgba(95,186,88,1)",
        pointcolor: "rgba(0,0,0,0)",
        pointstrokecolor: "rgba(0,0,0,0)",
        pointhighlightfill: "rgba(95,186,88,1)",
        pointhighlightstroke: "rgba(95,186,88,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }
]
};

var ctx = document.getelementbyid("chart").getcontext("2d");
var chart = new chart(ctx, {type: 'line', data: data});

setinterval(function () {
 chart.config.data.labels.push(math.floor(date.now() / 1000));
 chart.config.data.datasets[0].data.push(math.floor(10 + math.random() * 80));
 // limit to 10
 chart.config.data.labels.shift();
 chart.config.data.datasets[0].data.shift();

score:2

this code uses streaming plugin and works as expected.

http://jsfiddle.net/nagix/kvu0r6j2/

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.5.0/dist/chartjs-plugin-streaming.min.js"></script>
var ctx = document.getelementbyid("chart").getcontext("2d");
var chart = new chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: "my first dataset",
            backgroundcolor: "rgba(95,186,88,0.7)",
            bordercolor: "rgba(95,186,88,1)",
            pointbackgroundcolor: "rgba(0,0,0,0)",
            pointbordercolor: "rgba(0,0,0,0)",
            pointhoverbackgroundcolor: "rgba(95,186,88,1)",
            pointhoverbordercolor: "rgba(95,186,88,1)",
            data: []
        }]
    },
    options: {
        scales: {
            xaxes: [{
                type: 'realtime'
            }]
        },
        plugins: {
            streaming: {
                onrefresh: function(chart) {
                    chart.data.labels.push(date.now());
                    chart.data.datasets[0].data.push(
                        math.floor(10 + math.random() * 80)
                    );
                },
                delay: 2000
            }
        }
    }
});

Related Query

More Query from same tag