Use of Intervals in Google Charts

Introduction

We know charts play a very important role to represent any data. I think the pictorial representation of data is a hundred times better compared to the showing of data in text format or any other format because if we represent the data in a pictorial format then anyone can easily see what has happened. Google Charts are a very effective and beautiful tool to represent data and compare data.

Here we will discuss the intervals. Intervals are nothing new, it is just a type of Google Chart that also represents data. In simple words I will say that intervals play a major role if we have a series of data and want a pictorial representation of that data. In other words if we have data and with a minimum and maximum value, then we can apply interval charts to those values with a series of data. Here the minimum and maximum values might be anything, it may be numbers, may be percentiles or many other thins.

So intervals are nothing, they are just a simple representation of data for specific periods. There are mainly six types of intervals available in Google Charts. Those intervals are given below and I describe them one by one for you.

Line Interval
Bar Interval
Box Interval
Stick Interval
Point Interval
Area Interval
Combination of intervals

Line Interval

In line intervals we represent some points on the line and when we click on the line then there is a tool tip that occurs that shows the data depending on our needs or our representation. In the line Intervals we have a series of intervals on a line and when we go to these intervals then a pop-up occurs and that shows the data.

Example of Line Interval

<htmL>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval','color':'#D3362D'});
data.addColumn({id:'i1', type:'number', role:'interval','color':'#D3362D'});
data.addColumn({id:'i2', type:'number', role:'interval','color':'#D3362D'});
data.addColumn({id:'i2', type:'number', role:'interval','color':'#D3362D'});
data.addColumn({id:'i2', type:'number', role:'interval','color':'#D3362D'});
data.addColumn({id:'i2', type:'number', role:'interval','color':'#D3362D'});
data.addRows([
[1, 200, 190, 110, 185, 196, 204, 220],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 80, 60, 80, 40, 77, 97, 93],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 330, 339, 322, 321, 328, 334, 340],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 280, 290, 310, 285, 295, 302, 310]]);
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',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_lines);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 600px; height: 500px;"></div>
</body>
</html>

Output

Bar Interval

Bar intervals are simple, like the bar in the bar interval we can create an error bar around our data. We show the two bars, one is in the starting point of our data and the other is used to show the end point of the our data. We use the intervals.barwidth to main the width of the bars with the compare of the first and last bars. The first and last intervals are as wide as the domain axis but the internal intervals are drawn with the ticks.

Example of Bar Interval

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options_bars = {
title: 'Bars, Interval',
curveType: 'function',
series: [{'color': 'Orange'}],
intervals: { style: 'bars' },
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_bars);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 600px; height: 500px;"></div>
</body>
</html>

Output

Box interval

Box intervals create some boxes at your specific intervals. These boxes are present in the form of a rectangle. The color of the boxes at the outermost rectangle is dark Green and the color of the innermost rectangle will be light. To make the box interval more efficient and effective we use the intervals.lineWidth and intervals.barWidth tags.

Example of Box interval

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options = {
title:'Boxes, Interval',
curveType:'function',
lineWidth: 4,
series: [{'color': 'purple'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 600px; height: 500px;"></div>
</body>
</html>

Output

Stick Interval

A Stick interval creates some sticks wherever you specify the intervals. These sticks look like Vertical lines. A stick that has a zero height looks like a point. So we can handle this with the pointSize property.

Example of stick interval

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options_sticks = {
title:'Sticks, Interval',
curveType:'function',
series: [{'color': 'Blue'}],
intervals: { style: 'sticks' },
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_sticks);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 600px; height: 500px;"></div>
</body>
</html>

Output

Point interval

As its name indicates, a point interval creates a point at a specific interval present in you chart. When you see these points it looks like circles. We use the intervals.pointsize property to increase or decrease the size of the points in the point intervals.

Example of points interval

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': 'brown'}],
intervals: { 'style':'points', pointSize: 10 },
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_points);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 600px; height: 500px;"></div>
</body>
</html>

Output

Area Interval

An Area interval shows a series of areas and when we click on the specific area in the area interval there is some shaded area and in that area is presented the intervals.

Example of Area Interval

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options = {
title:'Area, Interval',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 600px; height: 500px;"></div>
</body>
</html>

Output

So these are the six basic Intervals provided by Google Charts to represent intervals between the showing of the data in the pictorial form. Above I decribed that the six intervals. These six intervals play their roles according to the user requirements. Sometimes when we see a Cricket match the representation of the falling of the wickets at the specific time interval, or chasing a run graph, or sometimes we see the comparison of the run rates of boths teams with many wickets as in the example of the Interval charts.

We can also create some interval graphs with the combination of the two or more then the two graphs for understanding it. Please see the example given below in this example. I will tell you how to make an interval using two or more intervals.

Combination of Area and bars intervals

In this example we use the area interval with the bars interval as I discussed above. The bar interval shows the vertical lines at a specific interval and using the Area interval we can select an area and make our intervals within this area. So here I make it in which I inherit both properties.

Example of bar with Area intervals

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options = {
title:'Bar and area interval chart',
curveType:'function',
intervals: { 'color':'series-color' },
interval: {
'i0': { 'color': 'red', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i1': { 'color': '#D3362D', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i2': { 'style':'area','color': '#F1CA3A', 'curveType':'function', 'fillOpacity':0.3 }},
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 700px; height: 500px;"></div>
</body>
</html>

Output

Combination of line interval with box interval

In this example we make the vertical line interval and in the background we make the box interval with this combination at every interval of line interval. In the background there is a box. So this is a box interval with a line interval. Please follow the given example.

Example of line interval with box interval

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', '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([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
var options_boxes_background = {
title:'Background boxes',
curveType:'function',
lineWidth: 4,
series: [{'color': 'Red'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'boxes', 'color':'Green', 'boxWidth': 2.5,
'lineWidth': 0, 'fillOpacity': 0.2 }
},
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_boxes_background);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>

Output

So in this article, I showed the use of intervals. Chart intervals play a very important role in the pictorial representation of data. Intervals tell us the data information at specific positions. There are six main ways to show the data using intervals, but if we want to use more than two intervals in our chart then we can use them. I provided two examples.

Summary

Intervals make intervals in the data, we create some intervals between the first point to the end point and represent the data on that specific intervals so we can say that intervals are used to show the data in the chart at a specific position. It is dependent on you which intervals you prefer to use because there are six main intervals given by the Google Chart control.

When we click on the intervals it shows the data in the pop-up forms so it looks very interesting when you play with it. I hope this article will be useful for everyone that wants to become familiar with intervals in charts.

1 Comment

Join the conversation! Your thoughts help the community grow.

M Mr8y ago
Thanks Rizwan, this is very helpful. Is it possible to display the values on point/sticks on Bar interval chart by default? Instead of showing the values when you hover over, can we show them on points all the time? thanks.