diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/dataHandling')
| -rw-r--r-- | www/lib/vis/examples/timeline/dataHandling/dataSerialization.html | 122 | ||||
| -rw-r--r-- | www/lib/vis/examples/timeline/dataHandling/loadExternalData.html | 58 |
2 files changed, 180 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> diff --git a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html new file mode 100644 index 00000000..f594d2aa --- /dev/null +++ b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | External data</title> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + </style> + + <!-- Load jquery for ajax support --> + <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> + + <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> +<p> + This demo shows how to load external data via an ajax call. +</p> +<div id="visualization"></div> +<div id="loading">loading...</div> + +<script type="text/javascript"> + // load data via an ajax request. When the data is in, load the timeline + $.ajax({ + url: '../resources/data/basic.json', + success: function (data) { + // hide the "loading..." message + document.getElementById('loading').style.display = 'none'; + + // DOM element where the Timeline will be attached + var container = document.getElementById('visualization'); + + // Create a DataSet (allows two way data-binding) + var items = new vis.DataSet(data); + + // Configuration for the Timeline + var options = {}; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + }, + error: function (err) { + console.log('Error', err); + if (err.status === 0) { + alert('Failed to load data/basic.json.\nPlease run this example on a server.'); + } + else { + alert('Failed to load data/basic.json.'); + } + } + }); +</script> +</body> +</html>
\ No newline at end of file |