Scrolling LineChart animation with Google Charts

Question

I'm trying to create a scrolling animation with a Line Chart in Google Charts. I want to display real time data from an external data source, so my data table cannot be populated in advance and it can not be a specific size.

My general idea was to use a scrolling window (see last example here: https://developers.google.com/chart/interactive/docs/animation#Examples) and just move the window forward while removing data behind the window and add data in front of the window.

So far my progress looks like this: http://jsfiddle.net/svantetobias/knt7F/

HTML:

<div id="google_chart_div" width="750" height="400"></div>
<input id="next" type="button" value="Next reading">

JavaScript:

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
    'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(loadChart);

function loadChart() {
    // Set chart options
    var options = {
        width: 1000,
        height: 400,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        hAxis: {
            viewWindow: {
                min: 1,
                max: 5
            }
        },
        curveType: 'none', // or 'function'
        pointSize: 5,
        series: {
            0: {
                color: 'Blue'
            },
            1: {
                color: 'Orange'
            }
        },
        animation: {
            duration: 1000,
            easing: 'linear'
        }
    };

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Time', 'series1', 'series2'],
        ['2014 23/07 13:00', 700, 900],
        ['2014 23/07 14:00', 850, 900],
        ['2014 23/07 15:00', 1000, 900],
        ['2014 23/07 16:00', 1050, 900],
        ['2014 23/07 17:00', 700, 900],
        ['2014 23/07 18:00', 650, 900],
        ['2014 23/07 19:00', 700, 900],
        ['2014 23/07 20:00', 950, 900]
    ]);

    // Instantiate our chart
    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));

    // Define button
    var button = document.getElementById('next');

    function drawChart() {
        // Disabling the button while the chart is drawing.
        button.disabled = true;
        google.visualization.events.addListener(chart, 'ready', function () {
            button.disabled = false;
        });
        // Draw chart
        chart.draw(data, options);
    }

    button.onclick = function () {
        //data.removeRow(0);
        data.insertRows(data.getNumberOfRows(), [
            ['2014 23/07 20:00', Math.floor((Math.random() * (1400 - 600)) + 600), 900]
        ]);
        options.hAxis.viewWindow.min += 1;
        options.hAxis.viewWindow.max += 1;
        drawChart();


    };
    drawChart();
}

For the first few animations it looks like I want it, but then the line starts doing weird waves. How do I make it animate properly like a scrolling window?

Answer 1

Your problem is that you're adding the same date over and over again, and it's causing the chart to have a hard time interpolating the result. Try http://jsfiddle.net/KaU3y/, or:

data.insertRows(data.getNumberOfRows(), [
        ['' + new Date(), Math.floor((Math.random() * (1400 - 600)) + 600), 900]
    ]);