Difference between revisions of "Web Element: Timeline"
(Created page with "{| ! A ! B ! C |- | | | |- | | | |}") |
|||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | <small> | ||
{| | {| | ||
− | ! | + | ! Begin |
− | ! | + | ! End |
− | ! | + | ! Event |
|- | |- | ||
− | | | + | | January 2000 |
− | | | + | | May 2001 |
− | | | + | | ABC |
|- | |- | ||
− | | | + | | 3M BC |
− | | | + | | 20.000 BC |
− | | | + | | DEF |
|} | |} | ||
+ | </small> | ||
+ | |||
+ | <html> | ||
+ | <head> | ||
+ | <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | google.charts.load('current', {'packages':['timeline']}); | ||
+ | google.charts.setOnLoadCallback(drawChart); | ||
+ | function drawChart() { | ||
+ | var container = document.getElementById('timeline'); | ||
+ | var chart = new google.visualization.Timeline(container); | ||
+ | var dataTable = new google.visualization.DataTable(); | ||
+ | |||
+ | dataTable.addColumn({ type: 'string', id: 'President' }); | ||
+ | dataTable.addColumn({ type: 'date', id: 'Start' }); | ||
+ | dataTable.addColumn({ type: 'date', id: 'End' }); | ||
+ | dataTable.addRows([ | ||
+ | [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], | ||
+ | [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], | ||
+ | [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); | ||
+ | |||
+ | chart.draw(dataTable); | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="timeline" style="height: 180px;"></div> | ||
+ | </body> | ||
+ | </html> |
Begin | End | Event |
---|---|---|
January 2000 | May 2001 | ABC |
3M BC | 20.000 BC | DEF |
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter