diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/timeline/dataHandling/dataSerialization.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
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, 0 insertions, 122 deletions
diff --git a/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html deleted file mode 100644 index 79b6aebf..00000000 --- a/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html +++ /dev/null @@ -1,122 +0,0 @@ -<!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> |