In this recipe, we will create a new chart with Google Charts API—a candlestick chart—and we will incorporate a variety of configurations into it.
Most of the steps will look almost identical to the past recipes in this chapter. Our main focus will be on our options
parameters:
- Create an HTML file and link it to a JavaScript file (in our case
08.04.candlestick.js):<!DOCTYPE html> <html> <head> <title>Google Charts Getting Started</title> <meta charset="utf-8" /> <script src="https://www.google.com/jsapi"></script> <script src="./08.04.candlestick.js"></script> </head> <body style="background:#fafafa"> <div id="chart"></div> </body> </html> - In the
08.04.candlestick.jsfile, add the APIloadandcallbackfunctions:google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(init); function init(){ - In the
initfunction (from now until the end of this recipe we will remain in theinitfunction), create a newDataTableobject by using thegoogle.visualization.arrayToDataTablemethod:var data = google.visualization.arrayToDataTable([ ['Mon', 10, 24, 18, 21], ['Tue', 31, 38, 55, 74], ['Wed', 50, 55, 20, 103], ['Thu', 77, 77, 77, 77], ['Fri', 68, 66, 22, 15] ], true); - Create an
optionsobject (a configuration object) for the chart:var options = { legend:'none', backgroundColor:{fill:'#eeeeee',strokeWidth:2}, bar:{groupWidth:17}, candlestick:{hollowIsRising:true, fallingColor:{stroke:'red',fill:'#ffaaaa'}, risingColor: {stroke:'blue',fill:'#aaaaff'} }, enableInteractivity:false }; - Draw the chart by using the following code snippet:
var chart = new google.visualization.CandlestickChart(document.getElementById('chart')); chart.draw(data, options); }
When you load the HTML file, you will discover a customized candlestick chart, as shown in the following screenshot:
This is the first time that we have used the method google.visualization.arrayToDataTable. This method takes in an array and returns a data table. When the second parameter of this method is set to true, it will treat the first row in the array as part of the data; and otherwise it will be treated as header data.
There are many options and for a full list of them, review Google Charts documentation. We will focus on the items that we have picked to modify our view. The Google charts enable you to send an object with parameters. Each chart type has a different set of options. In our case, we have many options that enable us to control the details of how our chart looks. Most of the options are style related:
backgroundColor:{fill:'#eeeeee',strokeWidth:2},
bar:{groupWidth:17},
candlestick:{hollowIsRising:true,
fallingColor:{stroke:'red',fill:'#ffaaaa'},
risingColor: {stroke:'blue',fill:'#aaaaff'}
},Some options directly relate to the function such as disabling the legend:
legend:'none',
Or disabling interactive elements:
enableInteractivity:false
The main goal of highlighting this element is not because it's difficult, but because it's easy, and it is the main place where you would find yourself making changes to the charts. One point to note is that it is really important to check that you can do what you need by using Google Charts before working with them, as contrary to other chart systems, you can't go into their source files and change them, as we did in the recipes in Chapter 7, Depending on the Open Source Sphere.