Google Chart Tools Walkthrough - Part 2: Customizing & Duplicating

In the previous post, we created a DataTable and populated it with a few rows of data. Then we loaded the "Table" package, and rendered a visualization which displayed all our DataTable data.

In this post, we will show how easy it is to add a second chart, powered off the same underlying data we are using for our table visualization, and how to customize it.

4. Creating a second visualization

To generate a line chart visualization, we will need to do 2 things: 1) Load the corechart package. 2) Create a new line chart object to render.

Modifying our visualization package loader, adding corechart:

google.load('visualization', '1', {packages: ['table', 'corechart'] });

Creating a new line chart visualization object, and rendering it. Appending this code to the end of our createTable() function.

var line_div = document.getElementById("line_div")
  , myLine = new google.visualization.LineChart(line_div);

5. Customizing our visualization

Our line chart now exists, but has not been drawn. If we wanted to render the line chart generically, we could just add one more line of code myLine.draw(myData); and we'd have our second chart. But we want to customize the chart a bit. We will add a title to the chart and to the vertical axis (vAxis). Then draw the chart.

Options
Each visualization type has it's own configurable options, but many overlap for all charts. These options allow you control the size of the chart area; many aspects of each axis including color, formatting of labels and displaying of gridlines; legend existence and options; toolips, and more.

var chartOptions = {
  title: 'My Work Week',
  vAxis: {
    title: 'Hours', 
  }
};
myColumn.draw(myData, chartOptions);

Here is everything together


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

// 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 table_div = document.getElementById('table_div'),  
    // New `Table` object   
    myTable = new google.visualization.Table(table_div);   

  // Render the table, passing it our DataTable named `myData`  
  myTable.draw(myData);  

  // Create the line chart element
  var line_div = document.getElementById('line_div'),
    myLine = new google.visualization.LineChart(line_div);

  // Set some options for the line chart
  var chartOptions = {
    title: 'My Work Week',
    vAxis: {
      title: 'Hours', 
    }
  };
  // Render the line visualization
  myLine.draw(myData, chartOptions);
}  
</script>  
<div id="line_div"></div>
<div id="table_div"></div>

Result

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