123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <html>
- <head>
- <title>Timeline demo</title>
- <style>
- body {font: 10pt arial;}
- </style>
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript" src="../timeline.js"></script>
- <link rel="stylesheet" type="text/css" href="../timeline.css">
-
- <script type="text/javascript">
- google.load("visualization", "1");
-
- // Set callback to run when API is loaded
- google.setOnLoadCallback(drawVisualization);
- // Called when the Visualization API is loaded.
- function drawVisualization() {
- // Create and populate a data table.
- var data = new google.visualization.DataTable();
- data.addColumn('datetime', 'start');
- data.addColumn('datetime', 'end');
- data.addColumn('string', 'content');
-
- var t = new Date(2010,07,23,16,30,15);
-
- data.addRows([
- [new Date(t.getTime()+15), , 'Conversation<br>' +
- '<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
- [new Date(t.getTime()+16), , 'Mail from boss<br>' +
- '<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
- [new Date(t.getTime()+18), , 'Report'],
- [new Date(t.getTime()+20), new Date(t.getTime()+26), 'Traject A'],
- [new Date(t.getTime()+22), , 'Memo<br>' +
- '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
- [new Date(t.getTime()+23), , 'Phone call<br>' +
- '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
- [new Date(t.getTime()+24), new Date(t.getTime()+27), 'Traject B'],
- [new Date(t.getTime()+29), , 'Report<br>' +
- '<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
- ]);
- // specify options
- options = {
- width: "100%",
- height: "300px",
- editable: true,
- style: "box"
- };
- // Instantiate our timeline object.
- var vis = new links.Timeline(document.getElementById('mytimeline'));
-
- // Draw our timeline with the created data and options
- vis.draw(data, options);
- }
- </script>
- </head>
- <body>
- <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>
- </body>
- </html>
|