example04_format_dot.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <html>
  2. <head>
  3. <title>Timeline demo</title>
  4. <style>
  5. body {font: 10pt arial;}
  6. </style>
  7. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  8. <script type="text/javascript" src="../timeline.js"></script>
  9. <link rel="stylesheet" type="text/css" href="../timeline.css">
  10. <script type="text/javascript">
  11. var timeline;
  12. google.load("visualization", "1");
  13. // Set callback to run when API is loaded
  14. google.setOnLoadCallback(drawVisualization);
  15. // Called when the Visualization API is loaded.
  16. function drawVisualization() {
  17. // Create and populate a data table.
  18. var data = new google.visualization.DataTable();
  19. data.addColumn('datetime', 'start');
  20. data.addColumn('datetime', 'end');
  21. data.addColumn('string', 'content');
  22. data.addRows([
  23. [new Date(1939,8,1), , 'German Invasion of Poland'],
  24. [new Date(1940,4,10), , 'Battle of France and the Low Countries'],
  25. [new Date(1940,7,13), , 'Battle of Britain - RAF vs. Luftwaffe'],
  26. [new Date(1941,1,14), , 'German Afrika Korps arrives in North Africa'],
  27. [new Date(1941,5,22), , 'Third Reich Invades the USSR'],
  28. [new Date(1941,11,7), , 'Japanese Attack Pearl Harbor'],
  29. [new Date(1942,5,4), , 'Battle of Midway in the Pacific'],
  30. [new Date(1942,10,8), , 'Americans open Second Front in North Africa'],
  31. [new Date(1942,10,19), , 'Battle of Stalingrad in Russia'],
  32. [new Date(1943,6,5), , 'Battle of Kursk - Last German Offensive on Eastern Front'],
  33. [new Date(1943,6,10), , 'Anglo-American Landings in Sicily'],
  34. [new Date(1944,2,8), , 'Japanese Attack British India'],
  35. [new Date(1944,5,6), , 'D-Day - Allied Invasion of Normandy'],
  36. [new Date(1944,5,22), , 'Destruction of Army Group Center in Byelorussia'],
  37. [new Date(1944,7,1), , 'The Warsaw Uprising in Occupied Poland'],
  38. [new Date(1944,9,20), , 'American Liberation of the Philippines'],
  39. [new Date(1944,11,16), , 'Battle of the Bulge in the Ardennes'],
  40. [new Date(1944,1,19), , 'American Landings on Iwo Jima'],
  41. [new Date(1945,3,1), , 'US Invasion of Okinawa'],
  42. [new Date(1945,3,16), ,'Battle of Berlin - End of the Third Reich']
  43. ]);
  44. // specify options
  45. var options = {
  46. 'width': '100%',
  47. 'height': 'auto',
  48. 'start': new Date(1942, 6, 1),
  49. 'end': new Date(1946, 6, 1),
  50. 'editable': false,
  51. 'enableKeys': true,
  52. 'animate': false,
  53. 'style': 'dot'
  54. };
  55. // Instantiate our timeline object.
  56. timeline = new links.Timeline(document.getElementById('mytimeline'));
  57. // Draw our timeline with the created data and options
  58. timeline.draw(data, options);
  59. }
  60. </script>
  61. </head>
  62. <body>
  63. <h1>World War II timeline</h1>
  64. <p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>
  65. <div id="mytimeline" style="background-color: #FAFAFA;"></div>
  66. </body>
  67. </html>