Google Visualization - Dashboard w/ Combo Chart (Bubble & Line)

Question

I am creating a dashboard with a bubble chart that compares test scores from this year to last year. The x-axis is the average 2012 percentile score (from 0 to 100) and the y-axis is the average 2013 percentile score (also from 0 to 100). I am trying to show change in performance with this plot, so a school whose students scored at the 50th percentile on the 2012 test and at the 60th percentile on the 2013 test would represent growth. Similarly, a school whose students averaged at the 50th percentile last year but at the 42nd percentile this year would show decline (relative to the reference group). The size of the bubble is a proportional to the number of students. The line y=x describes schools whose 2013 percentile score matches their 2012 score and represents the same performance as last year. So, visually, the bubbles with a center above this line show growth, bubbles below the line show decline, and bubbles at the line show stagnation.

It is much easier if my users see the line y=x [which is the line from (0,0) to (100,100)]. This way they can easily see bubbles that are above, on, or below the line. If the line is not there, then it is difficult to see growth/decline unless they know the points.

Is it possible to overlay the y=x line on a bubble chart? If so, how? I have tried doing a ComboChart, but have not been successful. Thanks.

This is how I am trying to draw the combo chart:

    var table = new google.visualization.ChartWrapper({
        chartType: 'ComboChart',
        containerId: 'table_div',
        options: {
            height: 800,
            width: 800,
            bubble: {opacity: 0.2, stroke: 'transparent'},
            hAxis: {minValue: 0, maxValue: 100},
            vAxis: {minValue: 0, maxValue: 100},
            colors: ['blue','red','green'],
            seriesType: 'bubble',
            series: {2: {type: 'line', pointSize: 0, lineWidth: 1, enableInteractivity: false, visibleInLegend: false}},
            animation: {duration:1500, easing:'out'},
            sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
        }
    });

asgallant asgallant · Accepted Answer · 2013-12-16T03:57:48

[edit: answer does not apply to BubbleCharts, see update below for work-around]

You could add the 3rd data series with two data points (0, 0) and (100, 100). Then set the series.<series index> options for this series like this:

series: {
    2: {
        // options for the 3rd series
        pointSize: 0, // makes the points in this series invisible
        lineWidth: 1, // connects the points in this series with a line
        enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series
        visibleInLegend: false // hides this series from the legend
    }
}

[edit: here's a work-around for BubbleCharts]

Since BubbleCharts are not compatible with other chart types, and cannot be mixed in with a COmboChart, if you need a line like this, you have to resort to work-arounds. Here's one example that draws a second chart with just a line, sets the background of the BubbleChart to "transparent", and uses CSS positioning to layer the line under the BubbleChart:

[javascript]

var table = new google.visualization.ChartWrapper({
    chartType: 'BubbleChart',
    containerId: 'table_div',
    options: {
        height: 800,
        width: 800,
        backgroundColor: 'transparent',
        bubble: {opacity: 0.2, stroke: 'transparent'},
        hAxis: {minValue: 0, maxValue: 100},
        vAxis: {minValue: 0, maxValue: 100},
        colors: ['blue','red','green'],
        animation: {duration:1500, easing:'out'},
        sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
    }
});

var hackChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'hack_chart_div',
    dataTable: [['x', 'y'],[0, 0], [100, 100]],
    options: {
        height: 800,
        width: 800,
        hAxis: {
            minValue: 0,
            maxValue: 100,
            textPosition: 'none',
            gridlines: {
                count: 0
            },
            baselineColor: 'none'
        },
        vAxis: {
            minValue: 0,
            maxValue: 100,
            textPosition: 'none',
            gridlines: {
                count: 0
            },
            baselineColor: 'none'
        },
        colors: ['blue'],
        pointSize: 0,
        lineWidth: 1,
        enableInteractivity: false,
        legend: {
            position: 'none'
        }
    }
});
hackChart.draw();

[HTML]

<div id="chart_container">
    <div id="table_div"></div>
    <div id="hack_chart_div"></div>
</div>

[CSS]

#chart_container {
    position: relative;
}
#table_div {
    z-index: 1;
}
#hack_chart_div {
    position: absolute;
    top: 0px;
    z-index: 0;
}

See it working here: http://jsfiddle.net/asgallant/t5rkJ/

Google Visualization - Dashboard w/ Combo Chart (Bubble & Line)

1 Answers