Google Chart API: One data series, two vertical axes

Question

Is it possible to create a line chart with just one data series, showing just one line, but two different vertical axes? The axes differ by a scalar.

Think of a data series of income at different points in time. The first v-axis would correspond the the income levels. The second v-axis would show what percentage that income is of some target or comparison figure. So the values of the second v-axis are just the values of the first divided by the (constant) target values.

I'm currently able to build a chart that is based on two data series, showing two different lines: An income line plotted against the first v-axis, and a percent-of-target line plotted against the second v-axis. These lines follow the same path and are usually almost right on top of each other. The reason they are not directly on top of one another seems to be how the API tends to pick "nice" numbers for the max and min values of each axis. But I think the two lines are confusing and hard to look at. This data can be represented with a single line.

If it is not possible to do directly, can it be hacked? If I have to stick with two different data series, is there a way I can get at the max value for the first v-axis and then set the max-value for the second v-axis so that the two lines fall directly on top of each other? How then might I clean it up so it only looks like there is one line?

asgallant asgallant · Accepted Answer · 2013-08-22T04:21:25

There is no way to make it happen with just one series of data. The easy way to get the two lines to align is to set the max value of the income-level axis as the income target used for the percentage (so it corresponds to 100%), and set the min value equal to the min percentage of that income level that you want to show (0% is the easiest to make work, generally). Something like this:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Year');
    data.addColumn('number', 'Income');

    data.addRows([
        [2000, 35000],
        [2001, 38000],
        [2002, 42000],
        [2003, 44000],
        [2004, 47000],
        [2005, 51000],
        [2006, 55000],
        [2007, 60000],
        [2008, 61000],
        [2009, 65000],
        [2010, 59000],
        [2011, 62000],
        [2012, 63000]
    ]);

    var targetIncome = 80000;
    var minIncomePercent = 0;
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'Percent of Target',
        calc: function (dt, row) {
            return dt.getValue(row, 1) / targetIncome;
        }
    }, 1]);
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        hAxis: {
            format: '####'
        },
        vAxes: {
            0: {
                title: 'Income Level',
                format: '$#,###',
                minValue: targetIncome * minIncomePercent,
                maxValue: targetIncome
            },
            1: {
                title: 'Income Percentage of Target',
                format: '#%',
                minValue: minIncomePercent,
                maxValue: 1
            }
        },
        series: {
            0: {
                targetAxisIndex: 1,
                enableInteractivity: false,
                pointSize: 0,
                lineWidth: 0,
                visibleInLegend: false
            },
            1: {
                targetAxisIndex: 0
            }
        }
    });
}

See http://jsfiddle.net/asgallant/6N5mZ/

Google Chart API: One data series, two vertical axes

1 Answers