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

Released version 3.6.1. Added new screenshots

gh-pages
jos 10 years ago
parent
ee636e42cc
commit
bd28944a10
16 changed files with 4536 additions and 4798 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4466
    -4451
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +14
    -14
      dist/vis.min.js
  4. +8
    -0
      docs/timeline.html
  5. BIN
      download/vis.zip
  6. +0
    -61
      examples/timeline/24_background_areas.html
  7. +0
    -250
      examples/timeline/25_templates.html
  8. +2
    -2
      examples/timeline/29_hiding_times.html
  9. +15
    -13
      examples/timeline/30_subgroups.html
  10. BIN
      img/gallery/timeline/24_all_data_attributes.png
  11. +0
    -0
      img/gallery/timeline/25_background_areas.png
  12. +0
    -0
      img/gallery/timeline/27_templates.png
  13. BIN
      img/gallery/timeline/29_hiding_times.png
  14. BIN
      img/gallery/timeline/30_subgroups.png
  15. BIN
      img/gallery/timeline/31_background_areas_with_groups.png
  16. +30
    -6
      index.html

+ 4466
- 4451
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 14
- 14
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 8
- 0
docs/timeline.html View File

@ -347,6 +347,14 @@ var groups = [
The title can only contain plain text.
</td>
</tr>
<tr>
<td>subgroupOrder</td>
<td>String | Function</td>
<td>none</td>
<td>Order the subgroups by a field name or custom sort function.
By default, groups are ordered by first-come, first-show.
</td>
</tr>
</table>

BIN
download/vis.zip View File


+ 0
- 61
examples/timeline/24_background_areas.html View File

@ -1,61 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Background areas</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis.timeline .item.background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
.vis.timeline .item.background.marker {
border-left: 2px solid green;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
{id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 0
- 250
examples/timeline/25_templates.html View File

@ -1,250 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<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>
<script id="item-template" type="text/x-handlebars-template">
<table class="score">
<tr>
<td colspan="3" class="description">{{description}}</td>
</tr>
<tr>
<td>{{player1}}</td>
<th>{{score1}} - {{score2}}</th>
<td>{{player2}}</td>
</tr>
<tr>
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
<th></th>
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
</tr>
</table>
</script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 10pt;
}
.vis.timeline .item {
border-color: #acacac;
background-color: #efefef;
box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
}
table .description {
font-style: italic;
}
#visualization {
position: relative;
overflow: hidden;
}
.logo {
position: absolute;
right: 10px;
top: 10px;
}
.logo img {
width: 120px;
}
</style>
</head>
<body>
<h1>WK 2014</h1>
<p style="max-width: 600px;">
This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
</p>
<div id="visualization">
<div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
</div>
<script type="text/javascript">
// create a handlebars template
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
// 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([
// round of 16
{
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'
},
// quarter-finals
{
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'
},
// semi-finals
{
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'
},
// final
{
player1: 'Germany',
score1: 1,
abbr1: 'de',
player2: 'Argentina',
abbr2: 'ar',
score2: 0,
description: 'final',
start: '2014-07-13 16:00'
}
]);
// Configuration for the Timeline
var options = {
// specify a template for the items
template: template
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 2
- 2
examples/timeline/29_hiding_times.html View File

@ -32,8 +32,8 @@
var options = {
hiddenDates: [
{start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
{start: '2013-03-29 00:00:00', end: '2013-03-31 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly
{start: '2013-03-29 20:00:00', end: '2013-03-31 9:00:00', repeat: 'daily'} // daily weekly monthly yearly
{start: '2013-10-26 00:00:00', end: '2013-10-28 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly
{start: '2013-03-29 20:00:00', end: '2013-03-30 09:00:00', repeat: 'daily'} // daily weekly monthly yearly
],
start: '2014-04-17',
end: '2014-05-01',

+ 15
- 13
examples/timeline/30_subgroups.html View File

@ -25,7 +25,7 @@
</head>
<body>
<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
<p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>
<div id="visualization"></div>
@ -38,23 +38,25 @@
type: { start: 'ISODate', end: 'ISODate' }
});
var groups = new vis.DataSet([{
id: 'bar', content:'bar'
id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}
},{
id: 'foo', content:'foo'
id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
}]);
// add items to the DataSet
items.add([
{id: 'A', content:'1',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'},
{id: 'B', content:'1',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
{id: 0, content: 'item 4', start: '2014-01-20', end: '2014-01-22',group:'foo'},
{id: 'A',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'},
{id: 'B',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
{id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22',group:'foo'},
{id: 'ab', content:'1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'banana'},
{id: 'bb', content:'1',start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'banana'},
{id: 1, content: '0', start: '2014-01-25 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'banana'},
{id: 'aab', content:'1',start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'putty'},
{id: 'bab', content:'1',start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'putty'},
{id: 'bdab', content:'1',start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
{id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'putty'},
{id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 1, content: 'subgroup0', start: '2014-01-23 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
{id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'},
]);
var container = document.getElementById('visualization');

BIN
img/gallery/timeline/24_all_data_attributes.png View File

Before After
Width: 484  |  Height: 209  |  Size: 15 KiB

img/gallery/timeline/24_background_areas.png → img/gallery/timeline/25_background_areas.png View File


img/gallery/timeline/25_templates.png → img/gallery/timeline/27_templates.png View File


BIN
img/gallery/timeline/29_hiding_times.png View File

Before After
Width: 411  |  Height: 214  |  Size: 8.5 KiB

BIN
img/gallery/timeline/30_subgroups.png View File

Before After
Width: 930  |  Height: 232  |  Size: 20 KiB

BIN
img/gallery/timeline/31_background_areas_with_groups.png View File

Before After
Width: 715  |  Height: 202  |  Size: 15 KiB

+ 30
- 6
index.html View File

@ -267,15 +267,15 @@ The source code of the examples can be found in the
</a>
</div>
<div class="thumb">
<a href="examples/timeline/24_background_areas.html">
<img src="img/gallery/timeline/24_background_areas.png">
<div>background areas</div>
<a href="examples/timeline/24_all_data_attributes.html">
<img src="img/gallery/timeline/24_all_data_attributes.png">
<div>all data attributes</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/25_templates.html">
<img src="img/gallery/timeline/25_templates.png">
<div>templates</div>
<a href="examples/timeline/25_background_areas.html">
<img src="img/gallery/timeline/25_background_areas.png">
<div>background areas</div>
</a>
</div>
<div class="thumb">
@ -284,6 +284,30 @@ The source code of the examples can be found in the
<div>external data</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/27_templates.html">
<img src="img/gallery/timeline/27_templates.png">
<div>templates</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/29_hiding_times.html">
<img src="img/gallery/timeline/29_hiding_times.png">
<div>hiding times</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/30_subgroups.html">
<img src="img/gallery/timeline/30_subgroups.png">
<div>subgroups</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/31_background_areas_with_groups.html">
<img src="img/gallery/timeline/31_background_areas_with_groups.png">
<div>31 background areas with groups</div>
</a>
</div>
</div>
<h3 id="network">Network</h3>

Write Preview
Loading…
Cancel
Save