Google Chart Tools Walkthrough

This is meant to act as a step by step, tutorial style, walk through introduction into the Google Chart Tools JavaScript library, while attempting to call out and highlight key points to reference whenever you are working with them.

We will explore Google Chart Tools in 7 steps:

The charts themselves are very flexible, but the real power derives from the fact that Google has decoupled the data-sets (named DataTables) and the individual charts.

In most JavaScript charting libraries, you build a chart object, with the data that drives the chart simply being a component of the chart object; almost as a chart property. Not so in with Google Chart Tools. Instead, you will perform two distinct actions, you will first create your DataTable, then you will create you chart(s).

Why do DataTables matter?

When using your data to create a single chart, this different methodology won't change much for you. But the real power lies with the ability to run multiple charts and visualizations off of a single data-set, using all, or selections of the data-set.

1. Loading the Assets

Basics first, ensure you are including the library. This is all we need to create a DataTable. Will will load additional packages later when we add a visualization.

<script type="text/javascript" src="//www.google.com/jsapi"></script>

2. Creating a DataTable

Three easy parts to creating a DataTable. A) Create a new instance of the DataTable object. B) Define the columns of your table. C) Insert the rows of data.

// A. Create new instance of DataTable to add our data to
  var myData = new google.visualization.DataTable();

  // B. Create three columns with DataTable.addColumn(type, label)
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');

  // C. Add rows to column [column-1, column-2]
  // Make sure values match column types
  myData.addRows([
    [new Date(2014, 6, 12), 9],    
    [new Date(2014, 6, 13), 8],    
    [new Date(2014, 6, 14), 10],    
    [new Date(2014, 6, 15), 8],    
    [new Date(2014, 6, 16), 0]  
  ]);

The possible column types are string, number, boolean, date, datetime, timeofday.

It is important to note that when we set the declare the column type that it is the same JavaScript variable type we use when we add rows to the table. So our Place column gets a string, Hours there is passed a number, and Visit date is passed a date object.

Tip: Above is the most straight forward way to build a data table from a readability perspective. Yet, the readability comes at a slight speed cost. According to Google, if you are creating DataTables with over 1,000 rows, you should instead use object literal notation to define your chat's data set. If you are planning on using Google Chart Tools with over 1,000 rows, you can see an example of the literal object notation, and read more from Google here.

3. Creating a "Table" visualization

Now our DataTable is complete. We need to load the visualization package from Google Chart Tools which corresponds with the chart we want to create. The current chart packages available are corechart (enables chart types: Area, Bar, Column, Line, Pie, and Scatter), controls, treemap, table, geochart, and gauge. We only need the table package right now.

google.load('visualization', '1', { packages: ['table'] } );
Then to create the actual visualization
// ID of the div we will draw to
  var target_div = document.getElementById('display_div'),
    // New `Table` object 
    myTable = new google.visualization.Table(target_div);
  
  // Render the table
  myTable.draw(data);
In your body of the document, outside your script tags, you will need the following div.
<div id="display_div"><!-- Table will render here --></div>

Finally, we don't want to attempt to execute the script until our Google visualization packages load, so we will wrap what we've created thus far in a call back function. Here is our final code.

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
// Load assets
google.load('visualization', '1', {packages:['table']});
// Set callback when assets have loaded
google.setOnLoadCallback(createTable);

function createTable() {
  // A. Create new instance of DataTable to add our data to
  var myData = new google.visualization.DataTable();
  
  // B. Create three columns with DataTable.addColumn(type, label)
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');

  // C. Add rows to column [column-1, column-2]
  // Make sure values match column types
  myData.addRows([
    [new Date(2014, 6, 12), 9],    
    [new Date(2014, 6, 13), 8],    
    [new Date(2014, 6, 14), 10],    
    [new Date(2014, 6, 15), 8],    
    [new Date(2014, 6, 16), 0]  
  ]);

  // ID of the div we will draw to
  var target_div = document.getElementById('display_div'),
    // New `Table` object 
    myTable = new google.visualization.Table(target_div); 
  
  // Render the table, passing it our DataTable named `data`
  myTable.draw(myData);
}
</script>
<div id="display_div"><!-- Table will render here --></div>

All we had to do to create the table was create a new visualization object with new google.visualization.Table(div), then call it's built-in draw method, passing it our DataTable object!

Result

Notice that, without any additional plugins or work from us, our table is interactive. Users can sort any column by clicking it's headline & click to highlight rows. The "chart" is smart about handling the sorting of strings, numbers and dates, right out of the box.

In the next step, we will modify our code just a touch to make our first real chart with Google Chart Tools. Google Chart Tools Walkthough – Part 2

Small dog web development studio
View All Our Posts

Web application developers in western Washington, creating user centric web solutions for businesses of all shapes and sizes.

Our projects include ecommerce, event organization, user driven web applications and more.


Small Dog Studios, LLC. Small Dog Studios News