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 | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
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, 0 insertions, 180 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> diff --git a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html deleted file mode 100644 index f594d2aa..00000000 --- a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html +++ /dev/null @@ -1,58 +0,0 @@ -<!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 |
