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.

120 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. <script src="../../googleAnalytics.js"></script>
  24. </head>
  25. <body>
  26. <h1>Serialization and deserialization</h1>
  27. <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>
  28. <textarea id="data">
  29. [
  30. {"id": 1, "content": "item 1<br>start", "start": "2014-01-23"},
  31. {"id": 2, "content": "item 2", "start": "2014-01-18"},
  32. {"id": 3, "content": "item 3", "start": "2014-01-21"},
  33. {"id": 4, "content": "item 4", "start": "2014-01-19", "end": "2014-01-24"},
  34. {"id": 5, "content": "item 5", "start": "2014-01-28", "type": "point"},
  35. {"id": 6, "content": "item 6", "start": "2014-01-26"}
  36. ]
  37. </textarea>
  38. <div class="buttons">
  39. <input type="button" id="load" value="&darr; Load" title="Load data from textarea into the Timeline">
  40. <input type="button" id="save" value="&uarr; Save" title="Save data from the Timeline into the textarea">
  41. </div>
  42. <div id="visualization"></div>
  43. <script>
  44. var txtData = document.getElementById('data');
  45. var btnLoad = document.getElementById('load');
  46. var btnSave = document.getElementById('save');
  47. // Create an empty DataSet.
  48. // This DataSet is used for two way data binding with the Timeline.
  49. var items = new vis.DataSet();
  50. // create a timeline
  51. var container = document.getElementById('visualization');
  52. var options = {
  53. editable: true
  54. };
  55. var timeline = new vis.Timeline(container, items, options);
  56. function loadData () {
  57. // get and deserialize the data
  58. var data = JSON.parse(txtData.value);
  59. // update the data in the DataSet
  60. //
  61. // Note: when retrieving updated data from a server instead of a complete
  62. // new set of data, one can simply update the existing data like:
  63. //
  64. // items.update(data);
  65. //
  66. // Existing items will then be updated, and new items will be added.
  67. items.clear();
  68. items.add(data);
  69. // adjust the timeline window such that we see the loaded data
  70. timeline.fit();
  71. }
  72. btnLoad.onclick = loadData;
  73. function saveData() {
  74. // get the data from the DataSet
  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) or ASPDate.
  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>