diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-21 12:49:18 -0400 |
| commit | b28028ac4082842143b0f528d6bc539da6ccb419 (patch) | |
| tree | 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/timeline/dataHandling/dataSerialization.html | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/vis/examples/timeline/dataHandling/dataSerialization.html')
| -rw-r--r-- | www/lib/vis/examples/timeline/dataHandling/dataSerialization.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html new file mode 100644 index 00000000..79b6aebf --- /dev/null +++ b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html @@ -0,0 +1,122 @@ +<!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-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + <script src="../../googleAnalytics.js"></script> +</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", "start": "2014-01-01 01:00:00"}, + {"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"}, + {"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"}, + {"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"}, + {"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"}, + {"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"} +] +</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), "ASPDate" or "String" (without timezone!). + // + // 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> |