D3 Examples - Sample Timeline with Bubbles

xxxxxxxxxx
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['motionchart']});
​
    function drawVisualization() {
    
      var time = [['2012W01', '2012W02'],
                  ['2012Q3', '2012Q4'],
                  [2011, 2012],
                  [(new Date(2012, 0, 1)), (new Date(2012, 0, 2))]];
    
      var columnType;
      switch (timeUnits) {
       case 0:
       case 1:
         columnType = 'string';
         break;
       case 2:
       columnType = 'number';
       break;
       case 3:
       columnType = 'date';
       break;
      }
    
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Fruit');
      data.addColumn(columnType, 'Time');
      data.addColumn('number', 'Sales');
      data.addColumn('number', 'Expenses');
      data.addColumn('string', 'Location');
      data.addRows([
        ['Apples', time[timeUnits][0], 1000, 300, 'East'],
        ['Oranges', time[timeUnits][0], 950, 200, 'West'],
        ['Bananas', time[timeUnits][0], 300, 250, 'West'],
        ['Apples', time[timeUnits][1], 1200, 400, 'East'],
        ['Oranges', time[timeUnits][1], 900, 150, 'West'],
        ['Bananas', time[timeUnits][1], 788, 617, 'West']
      ]);
    
      var motionchart = new google.visualization.MotionChart(
          document.getElementById('visualization'));
      motionchart.draw(data, {'width': 800, 'height': 400});
    }
    
    var timeUnits = 0;
    
    
    
​
    google.setOnLoadCallback(drawVisualization);
​
    function changeTimeUnits(value) {
      timeUnits = parseInt(value, 10);  
      drawVisualization();
    }
    
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
    <div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; background-color: buttonface;">
      <form action="">
        <span> Select time units: </span>
        <select style="font-size: 12px" onchange="changeTimeUnits(this.value)">
          <option value=0>Week</option>
          <option value=1>Quarter</option>
          <option value=2>Year</option>
          <option value=3>Date</option>
          </select>
        </form>
      </div>
    <div id="visualization" style="width: 800px; height: 400px;"></div>
  </body>
<body style="font-family: Arial;border: 0 none;">
</body>
</html>
•
    