presidents

You find below the HTML code of the visualisation.
You can copy and paste the code into an existing HTML page.
For more information see also ?print.gvis

<script type="text/javascript"> // jsData function gvisDatapresidents () { var data = new google.visualization.DataTable(); var datajson = [ [ "Washington", "President", new Date(1789,2,29), new Date(1797,1,3) ], [ "Adams", "President", new Date(1797,1,3), new Date(1801,1,3) ], [ "Jefferson", "President", new Date(1801,1,3), new Date(1809,1,3) ], [ "Adams", "Vice", new Date(1789,2,29), new Date(1797,1,3) ], [ "Jefferson", "Vice", new Date(1797,1,3), new Date(1801,1,3) ], [ "Burr", "Vice", new Date(1801,1,3), new Date(1809,1,3) ] ]; data.addColumn('string','Name'); data.addColumn('string','Position'); data.addColumn('date','start'); data.addColumn('date','end'); data.addRows(datajson); return(data); } // jsDrawChart function drawChartpresidents() { var data = gvisDatapresidents(); var options = {}; options["width"] = 590; options["height"] = 220; options["timeline"] = {rowLabelStyle: {fontName: 'Helvetica', fontSize: 10, color: '#603913' }, barLabelStyle: { fontName: 'Garamond', fontSize: 12 }}; options["backgroundColor"] = "#ffd"; options["colors"] = ['#cbb69d', '#603913', '#c69c6e']; var chart = new google.visualization.Timeline( document.getElementById('presidents') ); chart.draw(data,options); } // jsDisplayChart (function() { var pkgs = window.__gvisPackages = window.__gvisPackages || []; var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || []; var chartid = "timeline"; // Manually see if chartid is in pkgs (not all browsers support Array.indexOf) var i, newPackage = true; for (i = 0; newPackage && i < pkgs.length; i++) { if (pkgs[i] === chartid) newPackage = false; } if (newPackage) pkgs.push(chartid); // Add the drawChart function to the global list of callbacks callbacks.push(drawChartpresidents); })(); function displayChartpresidents() { var pkgs = window.__gvisPackages = window.__gvisPackages || []; var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || []; window.clearTimeout(window.__gvisLoad); // The timeout is set to 100 because otherwise the container div we are // targeting might not be part of the document yet window.__gvisLoad = setTimeout(function() { var pkgCount = pkgs.length; google.load("visualization", "1", { packages:pkgs, callback: function() { if (pkgCount != pkgs.length) { // Race condition where another setTimeout call snuck in after us; if // that call added a package, we must not shift its callback return; } while (callbacks.length > 0) callbacks.shift()(); } }); }, 100); } // jsFooter </script>  <script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartpresidents"></script>  <div id="presidents" style="width: 590px; height: 220px;"> </div>