jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added an example on loading external data

v3_develop
jos 10 years ago
parent
4d66916793
commit
b51585043b
5 changed files with 247 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      examples/timeline/25_templates.html
  2. +58
    -0
      examples/timeline/26_external_data.html
  3. +34
    -0
      examples/timeline/data/basic.json
  4. +152
    -0
      examples/timeline/data/wk2014.json
  5. +1
    -0
      examples/timeline/index.html

+ 2
- 1
examples/timeline/25_templates.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<title>Timeline | Templates</title>
<!-- load handlebars for templating, and create a template -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
@ -77,6 +77,7 @@
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
// round of 16
{
player1: 'Brazil',
abbr1: 'br',

+ 58
- 0
examples/timeline/26_external_data.html View File

@ -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.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Load external data</h1>
<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: '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>

+ 34
- 0
examples/timeline/data/basic.json View File

@ -0,0 +1,34 @@
[
{
"id": 1,
"content": "item 1",
"start": "2014-04-20"
},
{
"id": 2,
"content": "item 2",
"start": "2014-04-14"
},
{
"id": 3,
"content": "item 3",
"start": "2014-04-18"
},
{
"id": 4,
"content": "item 4",
"start": "2014-04-16",
"end": "2014-04-19"
},
{
"id": 5,
"content": "item 5",
"start": "2014-04-25"
},
{
"id": 6,
"content": "item 6",
"start": "2014-04-27",
"type": "point"
}
]

+ 152
- 0
examples/timeline/data/wk2014.json View File

@ -0,0 +1,152 @@
[
{
"player1": "Brazil",
"abbr1": "br",
"score1": "1 (3)",
"player2": "Chile",
"abbr2": "cl",
"score2": "1 (2)",
"description": "round of 16",
"start": "2014-06-28 13:00"
},
{
"player1": "Colombia",
"abbr1": "co",
"score1": 2,
"player2": "Uruguay",
"abbr2": "uy",
"score2": 0,
"description": "round of 16",
"start": "2014-06-28 17:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": 2,
"player2": "Mexico",
"abbr2": "mx",
"score2": 1,
"description": "round of 16",
"start": "2014-06-29 13:00"
},
{
"player1": "Costa Rica",
"abbr1": "cr",
"score1": "1 (5)",
"player2": "Greece",
"abbr2": "gr",
"score2": "1 (3)",
"description": "round of 16",
"start": "2014-06-29 17:00"
},
{
"player1": "France",
"abbr1": "fr",
"score1": 2,
"player2": "Nigeria",
"abbr2": "ng",
"score2": 0,
"description": "round of 16",
"start": "2014-06-30 13:00"
},
{
"player1": "Germany",
"abbr1": "de",
"score1": 2,
"player2": "Algeria",
"abbr2": "dz",
"score2": 1,
"description": "round of 16",
"start": "2014-06-30 17:00"
},
{
"player1": "Argentina",
"abbr1": "ar",
"score1": 1,
"player2": "Switzerland",
"abbr2": "ch",
"score2": 0,
"description": "round of 16",
"start": "2014-07-01 13:00"
},
{
"player1": "Belgium",
"abbr1": "be",
"score1": 2,
"player2": "USA",
"abbr2": "us",
"score2": 1,
"description": "round of 16",
"start": "2014-07-01 17:00"
},
{
"player1": "France",
"abbr1": "fr",
"score1": 0,
"player2": "Germany",
"abbr2": "de",
"score2": 1,
"description": "quarter-finals",
"start": "2014-07-04 13:00"
},
{
"player1": "Brazil",
"abbr1": "br",
"score1": 2,
"player2": "Colombia",
"abbr2": "co",
"score2": 1,
"description": "quarter-finals",
"start": "2014-07-04 17:00"
},
{
"player1": "Argentina",
"abbr1": "ar",
"score1": 1,
"player2": "Belgium",
"abbr2": "be",
"score2": 0,
"description": "quarter-finals",
"start": "2014-07-05 13:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": "0 (4)",
"player2": "Costa Rica",
"abbr2": "cr",
"score2": "0 (3)",
"description": "quarter-finals",
"start": "2014-07-05 17:00"
},
{
"player1": "Brazil",
"abbr1": "br",
"score1": 1,
"player2": "Germany",
"abbr2": "de",
"score2": 7,
"description": "semi-finals",
"start": "2014-07-08 17:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": "0 (2)",
"player2": "Argentina",
"abbr2": "ar",
"score2": "0 (4)",
"description": "semi-finals",
"start": "2014-07-09 17:00"
},
{
"player1": "Germany",
"score1": 1,
"abbr1": "de",
"player2": "Argentina",
"abbr2": "ar",
"score2": 0,
"description": "final",
"start": "2014-07-13 16:00"
}
]

+ 1
- 0
examples/timeline/index.html View File

@ -37,6 +37,7 @@
<p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
<p><a href="24_background_areas.html">24_background_areas.html</a></p>
<p><a href="25_templates.html">25_templates.html</a></p>
<p><a href="26_external_data.html">26_external_data.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

Write Preview
Loading…
Cancel
Save