JavaScript
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'min', type:'number', role:'interval'});
data.addColumn({id:'max', type:'number', role:'interval'});
data.addColumn({id:'25th', type:'number', role:'interval'});
data.addColumn({id:'med', type:'number', role:'interval'});
data.addColumn({id:'75th', type:'number', role:'interval'});
data.addColumn({id:'value', type:'number', role:'interval'});
data.addRows([
['a', 100, 50, 130, 85, 96, 104, 120],
['b', 120, 95, 130, 90, 113, 124, 140],
['c', 130, 105, 140, 100, 117, 133, 139],
['d', 90, 85, 95, 85, 88, 92, 95],
['e', 70, 74, 63, 67, 69, 70, 72],
['f', 30, 39, 22, 21, 28, 34, 40],
['g', 80, 77, 83, 70, 77, 85, 90],
['h', 100, 90, 110, 85, 95, 102, 110]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, {
type: 'number',
sourceColumn: 4,
id: '25th-to-med',
role: 'interval'
}, {
type: 'number',
sourceColumn: 5,
id: 'med-to-75th',
role: 'interval'
}, {
type: 'number',
sourceColumn: 6,
id: 'med-to-75th',
role: 'interval'
}, {
type: 'number',
sourceColumn: 5,
id: '25th-to-med',
role: 'interval'
}, 7]);
// Focus is the error bars, but boxes are visible in the background.
var options_boxes_background = {
title:'Background boxes',
curveType:'function',
lineWidth: 0,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'25th-to-med': {
'style':'boxes',
'color':'grey',
'boxWidth': 0.5,
'lineWidth': 0,
'fillOpacity': 0.4
...