Timeline Example

An example of a Google Timeline.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>
       
<div id="dashboard_div">
    <div id="filter_sex_div"></div>
    <div id="filter_name_div"></div>
<div id="chart_div"></div>
</div>

JavaScript

// Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {'packages':['controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Sex', 'Name', 'Donuts eaten'],
          ['Male', 'Michael' , 5],
          ['Female', 'Elisa', 7],
          ['Male', 'Robert', 3],
          ['Male', 'John', 2],
          ['Female', 'Jessica', 6],
          ['Male', 'Aaron', 1],
          ['Female', 'Margareth', 8]
        ]);

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

        var filterSex = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_sex_div',
          'options': {
            'filterColumnLabel': 'Sex'
          }
        });
          
        var filterName = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_name_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });
        
         var filterd = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_name_div',
          'options': {
            'filterColumnLabel': 'Name'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height':...