Having fun with Google charts: double y-axes and more!

Posted on by Marina Mele

This is my first post about Google Charts, an amazing tool to create simple charts in your html files. It is free and really powerful, with a lot of options and easy to implement.

In this first post you’ll learn how to create a simple LineChart with three different data series. Two of them follow one y-axis, and the other one follows a second y-axis. I’ll show you how you can configure each of them separately, as well as other cool things 🙂 Keep reading!

LineChart with two y-axes.

First, I’ll show the chart we’re going to generate:

google_charts

where the green and red lines (data1 and data2) follow the left y-axis, and the orange line (data3) follows the right y-axis. Here, I also specify the max and min values of the left y-axis, and the number format of the right y-axis.

Note: the graph shown here is actually an image, without the cool interactivity that Google Charts have. I encourage you to copy the following html code and open it with your browser to see it more clearly ;-).

The code that generates the graph is:

<html>
<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 = google.visualization.arrayToDataTable([
['date', 'data1', 'data2', 'percentage'],
[ "1 Mar", 289, 94, 0.10], [ "2 Mar", 295, 96, 0.20], [ "3 Mar", 300, 104, 0.30],
[ "4 Mar", 306, 124, 0.40], [ "5 Mar", 311, 142, 0.50], [ "6 Mar", 317, 153, 0.60],
[ "7 Mar", 322, 158, 0.70], [ "8 Mar", 328, 164, 0.80], [ "09Mar", 334, 164, 0.90],
["10 Mar", 339, 168, 0.80], ["11 Mar", 345, 169, 0.70], ["12 Mar", 351, 180, 0.60],
["13 Mar", 357, 190, 0.50], ["14 Mar", 363, 200, 0.40], ["15 Mar", 369, 210, 0.30],
["16 Mar", 375, 220, 0.20], ["17 Mar", 381, 230, 0.10], ["18 Mar", 387, 235, 0.00],
["19 Mar", 393, 240, -0.10], ["20 Mar", 399, 250, -0.20], ["21 Mar", 406, 245, -0.30],
["22 Mar", 412, 235, -0.40], ["23 Mar", 418, 235, -0.50], ["24 Mar", 425, 240, -0.60],
["25 Mar", 431, 245, -0.70], ["26 Mar", 438, 255, -0.80], ["27 Mar", 444, 260, -0.90],
["28 Mar", 451, 276, -0.80], ["29 Mar", 458, 280, -0.70], ["30 Mar", 464, 295, -0.60],
["31 Mar", 471, 310, -0.50],
]);
var options = {
title: 'Leads',
hAxis: {showTextEvery: 5},
vAxes: {0: {viewWindowMode:'explicit',
viewWindow:{
max:510,
min:82
},
gridlines: {color: 'transparent'},
},
1: {gridlines: {color: 'transparent'},
format:"#%"},
},
series: {0: {targetAxisIndex:0},
1:{targetAxisIndex:0},
2:{targetAxisIndex:1},
},
colors: ["red", "green", "orange"],
chartArea:{left:100,top:100, width:500, height:150},
};

var chart = new google.visualization.LineChart(document.getElementById('chart_id'));
chart.draw(data, options);
}
</script>

<div id="chart_id" style="width: 800px; height: 300px;"></div>
</html>
</code></pre>But let’s go step by step explaining the code:

  • The main function behind this graph is the drawChart function, which as you can see, has three different variables defined: data, options and chart.
  • There are multiple ways of defining the data variable, here I show you one of them, and in another post I’ll show you another 🙂 The idea is to define an array of arrays: the first array contains the labels of the data and the rest of them the data itself. Also note that the first element of the arrays defines the x-axis.
  • The options variable contains all the data to control the display and format of your chart.
    • the title of the graph is defined using title
    • hAxis and vAxis contain the options of the horizontal and vertical axes, respectively. And if you want multiple vertical axes, you have to use vAxes (not vAxis).
    • showTextEvery is used to display less elements in the x-axis, to improve readability.
    • as I mentioned before, vAxes is used to define two different y-axes: 0 is the left one and 1 is the right one.
    • the left y-axis has a max and min values defined using viewWindow and  viewWindowMode.
    • The right y-axis has a percentage format, which automatically changes the labels. For example, the number 0.1 is automatically displayed as 10%.
    • The gridlines are removed by defining them with a transparent color
    • series is used to indicate which series goes with which y-axis. We have tree different data sets, with indices 0, 1 and 2, and two different y-axes, with indices 0 and 1.
    • colors is an array of colors for the different data series, like “red” or “#ffffff”.
    • and chartArea and the inline style in the <div> containing the graph define the size of the chart.
  • The chart variable contains the LineChart, which is drawn using the previous data and options. Note that it looks for the <div> element with id=”chart_id” and draws the chart there.

Hope it’s clear!

Soon I’ll post another example 🙂

And don’t forget to share and +1 if useful! Thaaanks!

Leave a Reply