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.

66 lines
1.8 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Localization</title>
  5. <style type="text/css">
  6. body, html, select {
  7. font-family: sans-serif;
  8. font-size: 11pt;
  9. }
  10. </style>
  11. <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
  12. <script src="../../../dist/vis.js"></script>
  13. <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  14. <script src="../../googleAnalytics.js"></script>
  15. </head>
  16. <body>
  17. <p>
  18. To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
  19. </p>
  20. <p>
  21. <label for="locale">Select a locale:</label>
  22. <select id="locale">
  23. <option value="en" selected>en</option>
  24. <option value="it">it</option>
  25. <option value="nl">nl</option>
  26. </select>
  27. </p>
  28. <div id="visualization"></div>
  29. <script type="text/javascript">
  30. var DAY = 24 * 60 * 60 * 1000;
  31. // DOM element where the Timeline will be attached
  32. var container = document.getElementById('visualization');
  33. // Create a DataSet (allows two way data-binding)
  34. var items = new vis.DataSet([
  35. {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
  36. {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
  37. ]);
  38. // Configuration for the Timeline
  39. var options = {
  40. showCurrentTime: true
  41. };
  42. // Create a Timeline
  43. var timeline = new vis.Timeline(container, items, options);
  44. timeline.addCustomTime(new Date());
  45. timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
  46. // update the locale when changing the select box value
  47. var select = document.getElementById('locale');
  48. select.onchange = function () {
  49. timeline.setOptions({
  50. locale: this.value
  51. });
  52. };
  53. select.onchange();
  54. </script>
  55. </body>
  56. </html>