jos
10 years ago
4 changed files with 124 additions and 3 deletions
Split View
Diff Options
-
+1 -1examples/timeline/16_navigation_menu.html
-
+120 -0examples/timeline/17_data_serialization.html
-
+1 -0examples/timeline/index.html
-
+2 -2examples/timeline/requirejs/scripts/main.js
+ 1
- 1
examples/timeline/16_navigation_menu.html
View File
+ 120
- 0
examples/timeline/17_data_serialization.html
View File
| @ -0,0 +1,120 @@ | |||
| <!DOCTYPE HTML> | |||
| <html> | |||
| <head> | |||
| <title>Timeline | Data serialization</title> | |||
| <style> | |||
| body, html { | |||
| font-family: arial, sans-serif; | |||
| font-size: 11pt; | |||
| } | |||
| textarea { | |||
| width: 800px; | |||
| height: 200px; | |||
| } | |||
| .buttons { | |||
| margin: 20px 0; | |||
| } | |||
| .buttons input { | |||
| padding: 10px; | |||
| } | |||
| </style> | |||
| <script src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| </head> | |||
| <body> | |||
| <h1>Serialization and deserialization</h1> | |||
| <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> | |||
| <textarea id="data"> | |||
| [ | |||
| {"id": 1, "content": "item 1<br>start", "start": "2014-01-23"}, | |||
| {"id": 2, "content": "item 2", "start": "2014-01-18"}, | |||
| {"id": 3, "content": "item 3", "start": "2014-01-21"}, | |||
| {"id": 4, "content": "item 4", "start": "2014-01-19", "end": "2014-01-24"}, | |||
| {"id": 5, "content": "item 5", "start": "2014-01-28", "type": "point"}, | |||
| {"id": 6, "content": "item 6", "start": "2014-01-26"} | |||
| ] | |||
| </textarea> | |||
| <div class="buttons"> | |||
| <input type="button" id="load" value="↓ Load" title="Load data from textarea into the Timeline"> | |||
| <input type="button" id="save" value="↑ Save" title="Save data from the Timeline into the textarea"> | |||
| </div> | |||
| <div id="visualization"></div> | |||
| <script> | |||
| var txtData = document.getElementById('data'); | |||
| var btnLoad = document.getElementById('load'); | |||
| var btnSave = document.getElementById('save'); | |||
| // Create an empty DataSet. | |||
| // This DataSet is used for two way data binding with the Timeline. | |||
| var items = new vis.DataSet(); | |||
| // create a timeline | |||
| var container = document.getElementById('visualization'); | |||
| var options = { | |||
| editable: true | |||
| }; | |||
| var timeline = new vis.Timeline(container, items, options); | |||
| function loadData () { | |||
| // get and deserialize the data | |||
| var data = JSON.parse(txtData.value); | |||
| // update the data in the DataSet | |||
| // | |||
| // Note: when retrieving updated data from a server instead of a complete | |||
| // new set of data, one can simply update the existing data like: | |||
| // | |||
| // items.update(data); | |||
| // | |||
| // Existing items will then be updated, and new items will be added. | |||
| items.clear(); | |||
| items.add(data); | |||
| // adjust the timeline window such that we see the loaded data | |||
| timeline.fit(); | |||
| } | |||
| btnLoad.onclick = loadData; | |||
| function saveData() { | |||
| // get the data from the DataSet | |||
| // Note that we specify the output type of the fields start and end | |||
| // as ISODate, which is safely serializable. Other serializable types | |||
| // are Number (unix timestamp) or ASPDate. | |||
| // | |||
| // Alternatively, it is possible to configure the DataSet to convert | |||
| // the output automatically to ISODates like: | |||
| // | |||
| // var options = { | |||
| // type: {start: 'ISODate', end: 'ISODate'} | |||
| // }; | |||
| // var items = new vis.DataSet(options); | |||
| // // now items.get() will automatically convert start and end to ISO dates. | |||
| // | |||
| var data = items.get({ | |||
| type: { | |||
| start: 'ISODate', | |||
| end: 'ISODate' | |||
| } | |||
| }); | |||
| // serialize the data and put it in the textarea | |||
| txtData.value = JSON.stringify(data, null, 2); | |||
| } | |||
| btnSave.onclick = saveData; | |||
| // load the initial data | |||
| loadData(); | |||
| </script> | |||
| </body> | |||
| </html> | |||