[Chartjs]-Chart.js 2, animate right to left (not top-down)

by

5👍

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
            }
        }
    }
});

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();

Leave a comment