Google Charts

Intervals

Overview

Google Charts can display intervals around a series. They might be used to portray confidence intervals, minimum and maximum values around a value, percentile sampling, or anything else that requires a varying margin around a series.

There are six styles of interval: line, bar, box, stick, point, and area. Below, you'll see examples of each. In each example, we'll use the same dataset, here shown without any intervals:

The above chart is simple: it has seven series of data, all equal in importance. In what follows, we'll assume that the first series is the primary series, and the other six are being compared to it via intervals.

Line Intervals

Line intervals are sometimes used to show the raw data from which a trendline was extracted. Here's an example:

To draw a trendline on a chart, use the trendlines option and specify which data series to use:

<html>
<body>
<script type="text/javascript"
        src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1',
                                                                 'packages':['corechart']}]}"></script>
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'values');
    data.addColumn({id:'i0', type:'number', role:'interval'});
    data.addColumn({id:'i1', type:'number', role:'interval'});
    data.addColumn({id:'i2', type:'number', role:'interval'});
    data.addColumn({id:'i2', type:'number', role:'interval'});
    data.addColumn({id:'i2', type:'number', role:'interval'});
    data.addColumn({id:'i2', type:'number', role:'interval'});

    data.addRows([
        ['a', 100, 90, 110, 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]]);

    // The intervals data as narrow lines (useful for showing raw source
    // data)
    var options_lines = {
        title: 'Line intervals, default',
        curveType:'function',
        lineWidth: 2,
        intervals: { 'style':'line' }, // Use line intervals.
        legend: 'none',
    };

    var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
    chart_lines.draw(data, options_lines);
}
</script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>

In the data above, you can see that we attached three different identifiers to the supplementary series: i0, i2, and i3. We can use those to style those series differently; below, we give them different colors and thicknesses.

The only difference is in the options:

    var options_lines = {
        title: 'Line intervals, tailored',
        lineWidth: 4,
        curveType:'function',
        interval: {
            'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
            'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
            'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
        },
        legend: 'none',
    };

Bar Intervals

Bar intervals create error bars around your data. The first and last columns of the interval are drawn as wide bars parallel to the domain-axis, and inner columns are drawn as shorter "ticks". A "stick" is added to join the wide bars (if these two bars have the same value then the stick is rendered as a point, unless the pointSize option is zero).

The width of the horizontal bars corresponding to the first and last columns is controlled with intervals.barWidth, and the width of the horizontal bars corresponding to the inner columns is controlled with intervals.shortBarWidth. When those are omitted, you'll get a chart like the one above with the options below:

    var options_bars = {
        title: 'Bars, default',
        curveType: 'function',
        series: [{'color': '#D9544C'}],
        intervals: { style: 'bars' },
        legend: 'none',
    };

Box Intervals

Box intervals rendered columns in your data table as a set of nested rectangles: the first and last columns form the outermost rectangle, and inner columns render as darker rectangles within their containing box.

Here's how to specify box intervals:

    var options = {
        series: [{'color': '#1A8763'}],
        intervals: { style: 'boxes' },
        legend: 'none',
    };

You can make the boxes more prominent with the intervals.lineWidth and intervals.barWidth options:

The relevant options:

    var options = {
        title:'Boxes, thick',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
        legend: 'none',
    };

Stick Intervals

Stick intervals display pairs of columns as a set of sticks parallel to the target axis. A stick of zero height is rendered as a point, which can be suppressed by setting the pointSize option to zero.

You can create these with a style of 'sticks':

    var options_sticks = {
        title:'Sticks, default',
        curveType:'function',
        series: [{'color': '#E7711B'}],
        intervals: { style: 'sticks' },
        legend: 'none',
    };

Point Intervals

Point intervals display interval data as small circles:

The point size can be controlled with the intervals.pointSize option. Here, it's 2:

    var options_points = {
        title:'Points, default',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'style':'points', pointSize: 2 },
        legend: 'none',
    };

Here's what it looks like at 8:

Area Intervals

An area interval renders interval data as a set of nested shaded areas. Nesting of pairs of columns is similar to that of box intervals, except that an even number of columns is required.

This is accomplished by setting style to 'area':

    var options = {
        title:'Area, default',
        curveType:'function',
        series: [{'color': '#F1CA3A'}],
        intervals: { 'style':'area' },
        legend: 'none',
    };

Combining Interval Styles

For even greater customization, you can combine intervals styles inside one chart.

Here's a chart that combines area and bar intervals:

In the above chart, we specify a style of 'bars' for intervals tagged with i0 and i1, and an 'area' style for i2. Then we use pointSize to cap the bars:

    var options = {
        title:'Bar/area interval chart',
        curveType:'function',
        intervals: { 'color':'series-color' },
        interval: {
            'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
        legend: 'none',
    };

Here's a bar interval line chart with the i2 intervals represented as sticks:

    var options = {
        title:'Sticks, horizontal',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#E7711B'}],
        intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 1 }
        },
        legend: 'none',
    };

Here's an interval line chart that uses low opacity boxes to place selected intervals in the background:

    // Focus is the error bars, but boxes are visible in the background.
    var options_boxes_background = {
        title:'Background boxes',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 0, 'fillOpacity': 0.2 }
        },
        legend: 'none',
    };

Finally, we can create a "points and whiskers" interval chart by specifying a low opacity 'points' style for one interval along with a boxWidth:

    var options = {
        title:'Points and whiskers',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
            'lineWidth': 0, 'fillOpacity': 0.3 }
        },
        legend: 'none',
    };

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.