vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

74 lines
2.7 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script src="../dist/vis.js"></script>
  6. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  7. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  8. <body>
  9. <script>
  10. var dataset = new vis.DataSet({
  11. fieldId: 'id',
  12. convert: {
  13. start: 'Date'
  14. }
  15. });
  16. // create an anonymous event listener
  17. dataset.subscribe('*', function (event, params, id) {
  18. if (id != undefined) {
  19. console.log('anonymous listener ', event, params, id);
  20. }
  21. });
  22. // create a named event listener
  23. var entityId = '123';
  24. dataset.subscribe('*', function (event, params, id) {
  25. if (id != entityId) {
  26. console.log('named listener ', event, params, id);
  27. }
  28. }, entityId);
  29. // anonymous put
  30. dataset.add([
  31. {id: 1, content: 'item 1', start: new Date()},
  32. {id: 2, content: 'item 2', start: (new Date()).valueOf()},
  33. {id: '3', content: 'item 3', start: (new Date()).toISOString()},
  34. {id: 4, content: 'item 4', start: '/Date(1198908717056)/'},
  35. {id: 5, content: 'item 5', start: undefined},
  36. {content: 'item 6', start: new Date()}
  37. ]);
  38. // named update
  39. dataset.update([
  40. {id: 1, foo: 'bar'}
  41. ], entityId);
  42. google.load("visualization", "1");
  43. google.setOnLoadCallback(function () {
  44. var table = new google.visualization.DataTable();
  45. table.addColumn('datetime', 'start');
  46. table.addColumn('datetime', 'end');
  47. table.addColumn('string', 'content');
  48. table.addRows([
  49. [new Date(2010,7,23), , 'Conversation<br>' +
  50. '<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
  51. [new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
  52. '<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
  53. [new Date(2010,7,24,16,0,0), , 'Report'],
  54. [new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
  55. [new Date(2010,7,28), , 'Memo<br>' +
  56. '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
  57. [new Date(2010,7,29), , 'Phone call<br>' +
  58. '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
  59. [new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
  60. [new Date(2010,8,4,12,0,0), , 'Report<br>' +
  61. '<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
  62. ]);
  63. dataset.add(table);
  64. });
  65. </script>
  66. </body>
  67. </html>