123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <html>
- <head>
- <title>Timeline JSON data</title>
- <style>
- body {
- font-size: 10pt;
- font-family: verdana, sans, arial;
- }
- </style>
- <script type="text/javascript" src="../timeline.js"></script>
- <link rel="stylesheet" type="text/css" href="../timeline.css">
-
- <script type="text/javascript">
- var timeline;
- var data;
-
- // Called when the Visualization API is loaded.
- function drawVisualization() {
- // Create a JSON data table
- data = [
- {
- 'start': new Date(2010,7,23),
- 'content': 'Conversation<br><img src="img/comments-icon.png" style="width:32px; height:32px;">'
- },
- {
- 'start': new Date(2010,7,23,23,0,0),
- 'content': 'Mail from boss<br><img src="img/mail-icon.png" style="width:32px; height:32px;">'
- },
- {
- 'start': new Date(2010,7,24,16,0,0),
- 'content': 'Report'
- },
- {
- 'start': new Date(2010,7,26),
- 'end': new Date(2010,8,2),
- 'content': 'Traject A'
- },
- {
- 'start': new Date(2010,7,28),
- 'content': 'Memo<br><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'
- },
- {
- 'start': new Date(2010,7,29),
- 'content': 'Phone call<br><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
- },
- {
- 'start': new Date(2010,7,31),
- 'end': new Date(2010,8,3),
- 'content': 'Traject B'
- },
- {
- 'start': new Date(2010,8,4,12,0,0),
- 'content': 'Report<br><img src="img/attachment-icon.png" style="width:32px; height:32px;">'
- }
- ];
- // specify options
- var options = {
- 'width': '100%',
- 'height': '300px',
- 'editable': true, // enable dragging and editing events
- 'style': 'box'
- };
- // Instantiate our timeline object.
- timeline = new links.Timeline(document.getElementById('mytimeline'));
-
- function onRangeChanged(properties) {
- document.getElementById('info').innerHTML += 'rangechanged ' +
- properties.start + ' - ' + properties.end + '<br>';
- }
-
- // attach an event listener using the links events handler
- links.events.addListener(timeline, 'rangechanged', onRangeChanged);
- // Draw our timeline with the created data and options
- timeline.draw(data, options);
- }
- </script>
- </head>
- <body onload="drawVisualization();">
- <h1>Timeline JSON data</h1>
- <p>
- This demo shows how to feed the Timeline with JSON data.
- No Google DataTable is used, and therefore the Google JSAPI is
- not needed by the Timeline, which can thus be used offline.
- </p>
-
- <div id="mytimeline"></div>
-
- <!-- Information about where the used icons come from -->
- <p style="color:gray; font-size:10px; font-style:italic;">
- Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
- and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
- </p>
- <div id="info"></div>
- </body>
- </html>
|