Browse Source

Updated some examples

css_transitions
jos 10 years ago
parent
commit
f4661c0274
4 changed files with 52 additions and 57 deletions
  1. +1
    -1
      HISTORY.md
  2. +1
    -5
      examples/timeline/02_dataset.html
  3. +42
    -44
      examples/timeline/03_much_data.html
  4. +8
    -7
      examples/timeline/09_order_groups.html

+ 1
- 1
HISTORY.md View File

@ -25,12 +25,12 @@ http://visjs.org
- A DataSet can now be constructed with initial data, like - A DataSet can now be constructed with initial data, like
`new DataSet(data, options)`. `new DataSet(data, options)`.
### Graph ### Graph
- added recalculate hierarchical layout to update node event. - added recalculate hierarchical layout to update node event.
- added arrowScaleFactor to scale the arrows on the edges. - added arrowScaleFactor to scale the arrows on the edges.
## 2014-04-18, version 0.7.4 ## 2014-04-18, version 0.7.4
### Graph ### Graph

+ 1
- 5
examples/timeline/02_dataset.html View File

@ -19,9 +19,6 @@
} }
</style> </style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script> <script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>
@ -29,8 +26,6 @@
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items // create a dataset with items
var items = new vis.DataSet({ var items = new vis.DataSet({
convert: { convert: {
@ -53,6 +48,7 @@
end: '2014-02-10', end: '2014-02-10',
orientation: 'top', orientation: 'top',
height: '100%', height: '100%',
editable: true,
showCurrentTime: true showCurrentTime: true
}; };

+ 42
- 44
examples/timeline/03_much_data.html View File

@ -1,68 +1,66 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Timeline | a lot of data</title>
<title>Timeline | a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="../../dist/vis.js"></script> <script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<h1> <h1>
Test with a lot of data
Test with a lot of data
</h1> </h1>
<p> <p>
<label for="count">Number of items</label>
<input id="count" value="1000">
<input id="draw" type="button" value="draw">
<label for="count">Number of items</label>
<input id="count" value="1000">
<input id="draw" type="button" value="draw">
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
}
items.clear();
items.add(newData);
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
} }
createData();
});
document.getElementById('draw').onclick = createData;
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
}
items.clear();
items.add(newData);
}
createData();
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,
//height: '300px',
//orientation: 'top'
};
document.getElementById('draw').onclick = createData;
var timeline = new vis.Timeline(container, items, options);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300,
//height: '300px',
//orientation: 'top'
};
</script> </script>
</body> </body>
</html> </html>

+ 8
- 7
examples/timeline/09_order_groups.html View File

@ -34,12 +34,12 @@
// create a dataset with items // create a dataset with items
var items = new vis.DataSet([ var items = new vis.DataSet([
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24)}
{id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
{id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
{id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
{id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
{id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
{id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
]); ]);
// create visualization // create visualization
@ -52,7 +52,8 @@
// 0 when a == b // 0 when a == b
groupOrder: function (a, b) { groupOrder: function (a, b) {
return a.value - b.value; return a.value - b.value;
}
},
editable: true
}; };
var timeline = new vis.Timeline(container); var timeline = new vis.Timeline(container);

Loading…
Cancel
Save