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.

64 lines
2.0 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | performance</title>
  5. <style>
  6. body, html {
  7. font-family: arial, sans-serif;
  8. font-size: 11pt;
  9. }
  10. </style>
  11. <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  12. <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  13. <script src="../../dist/vis.js"></script>
  14. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  15. <script src="../googleAnalytics.js"></script>
  16. </head>
  17. <body>
  18. <p>
  19. Test the performance with a lot of items. The Timeline can load hundreds of thousands of items, but the performance of rendering them in the browser is limited. Rendering typically runs smooth for up to a few hundreds of items at once (you can set a <code>zoomMax</code> to prevent the user from zooming out too far).
  20. </p>
  21. <p>
  22. <label for="count">Number of items</label>
  23. <input id="count" value="10000">
  24. <input id="draw" type="button" value="draw">
  25. </p>
  26. <div id="visualization"></div>
  27. <script>
  28. // create a dataset with items
  29. var now = moment().minutes(0).seconds(0).milliseconds(0);
  30. var items = new vis.DataSet({
  31. type: {start: 'ISODate', end: 'ISODate' }
  32. });
  33. // create data
  34. function createData() {
  35. var count = parseInt(document.getElementById('count').value) || 100;
  36. var newData = [];
  37. var start = now;
  38. for (var i = 0; i < count; i++) {
  39. newData.push({id: i, content: 'item ' + i, start: start + 24*3600*1000 * i}); // much much faster than now.clone add days
  40. }
  41. items.clear();
  42. items.add(newData);
  43. }
  44. createData();
  45. document.getElementById('draw').onclick = createData;
  46. var container = document.getElementById('visualization');
  47. var options = {
  48. editable: true,
  49. start: now.clone().add(-3, 'days'),
  50. end: now.clone().add(11, 'days'),
  51. zoomMin: 1000 * 60 * 60 * 24, // a day
  52. zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
  53. };
  54. var timeline = new vis.Timeline(container, items, options);
  55. </script>
  56. </body>
  57. </html>