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.

122 lines
3.4 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Timeline | Data serialization</title>
  5. <style>
  6. body, html {
  7. font-family: arial, sans-serif;
  8. font-size: 11pt;
  9. }
  10. textarea {
  11. width: 800px;
  12. height: 200px;
  13. }
  14. .buttons {
  15. margin: 20px 0;
  16. }
  17. .buttons input {
  18. padding: 10px;
  19. }
  20. </style>
  21. <script src="../../../dist/vis.js"></script>
  22. <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  23. </head>
  24. <body>
  25. <h1>Serialization and deserialization</h1>
  26. <p>This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.</p>
  27. <textarea id="data">
  28. [
  29. {"id": 1, "content": "item 1", "start": "2014-01-01 01:00:00"},
  30. {"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"},
  31. {"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"},
  32. {"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"},
  33. {"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"},
  34. {"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"}
  35. ]
  36. </textarea>
  37. <div class="buttons">
  38. <input type="button" id="load" value="&darr; Load" title="Load data from textarea into the Timeline">
  39. <input type="button" id="save" value="&uarr; Save" title="Save data from the Timeline into the textarea">
  40. </div>
  41. <div id="visualization"></div>
  42. <script>
  43. var txtData = document.getElementById('data');
  44. var btnLoad = document.getElementById('load');
  45. var btnSave = document.getElementById('save');
  46. // Create an empty DataSet.
  47. // This DataSet is used for two way data binding with the Timeline.
  48. var items = new vis.DataSet();
  49. // create a timeline
  50. var container = document.getElementById('visualization');
  51. var options = {
  52. editable: true
  53. };
  54. var timeline = new vis.Timeline(container, items, options);
  55. function loadData () {
  56. // get and deserialize the data
  57. var data = JSON.parse(txtData.value);
  58. // update the data in the DataSet
  59. //
  60. // Note: when retrieving updated data from a server instead of a complete
  61. // new set of data, one can simply update the existing data like:
  62. //
  63. // items.update(data);
  64. //
  65. // Existing items will then be updated, and new items will be added.
  66. items.clear();
  67. items.add(data);
  68. // adjust the timeline window such that we see the loaded data
  69. timeline.fit();
  70. }
  71. btnLoad.onclick = loadData;
  72. function saveData() {
  73. // get the data from the DataSet
  74. //
  75. // Note that we specify the output type of the fields start and end
  76. // as "ISODate", which is safely serializable. Other serializable types
  77. // are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!).
  78. //
  79. // Alternatively, it is possible to configure the DataSet to convert
  80. // the output automatically to ISODates like:
  81. //
  82. // var options = {
  83. // type: {start: 'ISODate', end: 'ISODate'}
  84. // };
  85. // var items = new vis.DataSet(options);
  86. // // now items.get() will automatically convert start and end to ISO dates.
  87. //
  88. var data = items.get({
  89. type: {
  90. start: 'ISODate',
  91. end: 'ISODate'
  92. }
  93. });
  94. // serialize the data and put it in the textarea
  95. txtData.value = JSON.stringify(data, null, 2);
  96. }
  97. btnSave.onclick = saveData;
  98. // load the initial data
  99. loadData();
  100. </script>
  101. </body>
  102. </html>