Google Charts: Scaling each series in line chart

Question

I have a line chart with multiple series on it:

X axis is time
Y axis has speed and vehicle RPM

Speed is in the range -20 to 130 while RPM is in the range 0 to 8000. I'd like to have both of these series scaled separately, so that I can clearly see the trends of both.

My draw function looks something like this:

var do_chart = function (readings) {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Time');
    var fields_using = $('#select-y').val(); 
    // fields are selected from a select dropdown
    _.forEach(fields_using, function(v) {
        data.addColumn('number', v);
    });
    _.forEach(readings, function (v) {
        var row = [new Date(v.timestamp)];
        _.forEach(fields_using, function(f) {
            row.push(v[f]);
        });
        data.addRow(row);
    });
    var options = {
        title: 'Speed vs. Time',
        curveType: 'function',
        animation:{
            duration: 100,
            startup: true
        },
        explorer: {
            actions: ['dragToZoom', 'rightClickToReset'],
            axis: 'horizontal',
            keepInBounds: true,
            maxZoomIn: 0
        },
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

Garrett Garrett · Accepted Answer · 2017-10-12T03:34:02

What you could do is have dual y-axes. You can look at the Google Charts documentation where it talks about it. This way you can preserve the values, as you won't need to scale them.

Google Charts: Scaling each series in line chart

1 Answers