Chart JS not showing all data

Question

I am working on the following chart. My plan is to use it to display live data every 1 second with a buffer of 600 points. I want it to display initial data (the entire 600 points) fetches data (simulated through setInterval) then puts it and shift. The problem is that it only displays 12 points.

Question 1: Can you help me what am I missing or is it impossible with ChartJS? Question 2: Is this buffer reasonable with ChartJS?

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!!</title>
    </head>
    <script src="/socket.io/socket.io.js"></script>
    <script src="Chart.min.js"></script>
    <script>
        var socket = io();

        socket.on('pv_changed', function(data) { document.getElementById('pv').innerHTML = data.value });
    </script>
    <style>
    </style>
    <body>
        Hello World!!!<br/>
        <label>PV Value: </lable>
        <label id="pv">hi</lablel>
        <div class="container">
          <div>
            <canvas id="myChart" height=130px></canvas>
            <script>
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'W', 'T', 'F', 'S', 'S'],
                        datasets: [{
                            label: 'Test',
                            data: Array.apply(null, Array(600)).map(Number.prototype.valueOf,0),
                            backgroundColor: "rgba(255,153,0,0.4)",
                            animation: true
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            yAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Month'
                                },
                                ticks: {
                                    beginAtZero: true,
                                    min: -5,
                                    max: 25,
                                    stepsize: 5
                                }
                            }],
                            xAxes: [{
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Hello'
                                },
                                ticks: {
                                    beginAtZero: true,
                                    min: 0,
                                    max: 600,
                                    stepsize: 50
                                }
                            }]
                        }
                    }
                });

                var top = 20;
                var now = 0;
                setInterval(function() {
                    myChart.data.datasets[0].data.shift();
                    myChart.data.datasets[0].data.push(now);
                    myChart.update();
                    now = now + 1;
                    if(now == 20)
                        now = 0;
                }, 1000);
            </script>
          </div>
        </div>
    </body>
</html>

score 0 · Answer 1 · answered Oct 25 '17 at 19:34

0

It seems that you can't update datasets with myChart.update(). try to create temporary object and then assign that object to myChart.data.datasets. you then need to redraw your chart again. I had the same issue with using chart.js in my angular project link. Did you check link?

answered Oct 25 '17 at 19:34

playerone

987
3
22
44

Even without updating it and assign just an array of 600 points as shown will only show 12 points. – 3bdalla Oct 26 '17 at 05:49
Also the chart is updated through `.update()` but only shows 12 points. – 3bdalla Oct 26 '17 at 06:01

Chart JS not showing all data

1 Answers1