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
1.7 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.css" rel="stylesheet" type="text/css" />
  14. </head>
  15. <body>
  16. <p>
  17. 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>.
  18. </p>
  19. <p>
  20. <label for="locale">Select a locale:</label>
  21. <select id="locale">
  22. <option value="en" selected>en</option>
  23. <option value="nl">nl</option>
  24. </select>
  25. </p>
  26. <div id="visualization"></div>
  27. <script type="text/javascript">
  28. var DAY = 24 * 60 * 60 * 1000;
  29. // DOM element where the Timeline will be attached
  30. var container = document.getElementById('visualization');
  31. // Create a DataSet (allows two way data-binding)
  32. var items = new vis.DataSet([
  33. {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
  34. {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
  35. ]);
  36. // Configuration for the Timeline
  37. var options = {
  38. showCurrentTime: true,
  39. showCustomTime: true
  40. };
  41. // Create a Timeline
  42. var timeline = new vis.Timeline(container, items, options);
  43. timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
  44. // update the locale when changing the select box value
  45. var select = document.getElementById('locale');
  46. select.onchange = function () {
  47. timeline.setOptions({
  48. locale: this.value
  49. });
  50. };
  51. select.onchange();
  52. </script>
  53. </body>
  54. </html>