Google Chart Tools Walkthrough - Part 3: Dashboards & Controls

In the previous two posts, we created a DataTable and populated it with a few rows of data. We loaded the "Table" and "Corechart" packages, then rendered a table and line chart which displayed all of the data in our DataTable.

In this post, we will create a visualization dashboard that will house our two charts. Plus, we will create a control chart which allows users to change the date range they wish to see.

6. Creating a dashboard & controls

We are going to run multiple visualizations, as a group, off of a single underlying DataTable. Google calls this a Dashboard.

A plus about the Dashboard library, it only requires a single package load: controls. This package will auto-detect which charts you are attempting to create and load them for you dynamically.

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

Next, we need to initialize our dashboard object. All of our DataTable code stays the same. After our DataTable, we add:

 // Create a dashboard.
 var dash_container = document.getElementById('dashboard_div'),
   myDashboard = new google.visualization.Dashboard(dash_container);

In order to create visualizations on the new dashboard, we will leverage a new two new visualization methods, ChartWrapper and ControlWrapper.

Important note: You cannot use a dashboard without creating controls. If you simply want to run multiple charts off of the same DataTable, you must draw each table individually and must leverage the entire dataset (as we did in Google Chart Tools Walkthrough - Part 2)

We will create a way for a user to select the date range they want to see, effectively allowing them to "zoom in" on the time chart. In order to give the user control over the chart's date range, we need to create a ControlWrapper that will... control, the dashboard display.

// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
  'controlType': 'ChartRangeFilter',
  'containerId': 'control_div',
  'options': {
    'filterColumnLabel': 'Date'
  }
});

That's it for the controls. Now, we revisit our previous visualizations and shape them into the dashboard using our new ChartWrapper() method.

The ChartWrapper is a powerful wrapping layer over the basic visualization library, which will enable us to modify the data view being displayed and tie the chart to a control system.

7. Add charts to the dashboard

We will take our previously two visualizations, the table and line chart, and convert them to be part of the dashboard

// Display all our data as text for reference
var myTable = new google.visualization.ChartWrapper({
  'chartType' : 'Table',
  'containerId' : 'table_div'
});

// Bind myTable to the dashboard, and to the controls
// this will make sure our table is update when our date changes
myDashboard.bind(myDateSlider, myTable);

Now, the same thing for the line chart visualization.

var myLine = new google.visualization.ChartWrapper({
  'chartType' : 'Line',
  'containerId' : 'line_div',
});

// Bind myLine to the dashboard, and to the controls
// this will make sure our line chart is update when our date changes
myDashboard.bind(myDateSlider, myLine );

Now that we have added both table, trigger the dashboard to render width draw(DataTable), we are still using the same data-set as we did in our last example!

myDashboard.draw(data);

Lastly, we need to update our HTML, as the dashboard needs to literally wrap around our chart elements

<div id="dashboard_div">
  <div id="control_div"> </div>
  <div id="line_div"> </div>
  <div id="table_div"> </div>
</div>

Here is everything together

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

function createTable() {
  // Create the dataset (DataTable)
  var myData = new google.visualization.DataTable();
  myData.addColumn('date', 'Date');
  myData.addColumn('number', 'Hours Worked');
  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]
  ]);

  // Create a dashboard.
  var dash_container = document.getElementById('dashboard_div'),
    myDashboard = new google.visualization.Dashboard(dash_container);

  // Create a date range slider
  var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnLabel': 'Date'
    }
  });

  // Table visualization
  var myTable = new google.visualization.ChartWrapper({
    'chartType' : 'Table',
    'containerId' : 'table_div'
  });

  // Bind myTable to the dashboard, and to the controls
  // this will make sure our table is update when our date changes
  myDashboard.bind(myDateSlider, myTable);

  // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'line_div',
  });
  
  // Bind myLine to the dashboard, and to the controls
  // this will make sure our line chart is update when our date changes
  myDashboard.bind(myDateSlider, myLine );

  myDashboard.draw(myData);
}
</script>

<div id="dashboard_div">
  <div id="control_div"> </div>
  <div id="line_div"> </div>
  <div id="table_div"> </div>
</div>

Result

Try changing the date range on the slider control chart. Notice how it automatically updates the line chart & the table?

Date range slider dashboard controls
Line chart visualization
Table visualization
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