D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
owendall
Full window
Github gist
Sample Timeline with Bubbles
<!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>
Modified
http://www.google.com/jsapi
to a secure url
https://www.google.com/jsapi