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

Merge remote-tracking branch 'origin/develop' into alex_dev 

Conflicts:
	package.json
	vis.js
	vis.min.js
css_transitions
Alex de Mulder 11 years ago
parent
62205553cf 299b2dd81e
commit
e120083e03
38 changed files with 275 additions and 264 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      HISTORY.md
  2. +7
    -11
      Jakefile.js
  3. +8
    -2
      docs/graph.html
  4. +4
    -1
      docs/index.html
  5. +6
    -3
      docs/timeline.html
  6. +1
    -1
      examples/graph/01_basic_usage.html
  7. +1
    -1
      examples/graph/02_random_nodes.html
  8. +1
    -1
      examples/graph/03_images.html
  9. +1
    -1
      examples/graph/04_shapes.html
  10. +1
    -1
      examples/graph/05_social_network.html
  11. +1
    -1
      examples/graph/06_groups.html
  12. +1
    -1
      examples/graph/07_selections.html
  13. +1
    -1
      examples/graph/08_mobile_friendly.html
  14. +1
    -1
      examples/graph/09_sizing.html
  15. +1
    -1
      examples/graph/10_multiline_text.html
  16. +1
    -1
      examples/graph/11_custom_style.html
  17. +1
    -1
      examples/graph/12_scalable_images.html
  18. +1
    -1
      examples/graph/13_dashed_lines.html
  19. +1
    -1
      examples/graph/14_dot_language.html
  20. +1
    -1
      examples/graph/15_dot_language_playground.html
  21. +1
    -1
      examples/graph/16_dynamic_data.html
  22. +1
    -1
      examples/graph/17_network_info.html
  23. +1
    -1
      examples/graph/graphviz/graphviz_gallery.html
  24. +19
    -18
      examples/timeline/01_basic.html
  25. +51
    -50
      examples/timeline/02_dataset.html
  26. +2
    -1
      examples/timeline/03_much_data.html
  27. +52
    -47
      examples/timeline/04_html_data.html
  28. +51
    -50
      examples/timeline/05_groups.html
  29. +8
    -8
      examples/timeline/index.html
  30. +5
    -3
      examples/timeline/requirejs/requirejs_example.html
  31. +14
    -14
      examples/timeline/requirejs/scripts/main.js
  32. +3
    -3
      src/graph/Graph.js
  33. +1
    -1
      src/timeline/Range.js
  34. +15
    -28
      src/util.js
  35. +1
    -1
      test/dataset.html
  36. +4
    -3
      test/timeline.html
  37. +2
    -1
      test/timeline_groups.html
  38. +2
    -1
      test/timestep.html

+ 2
- 0
HISTORY.md View File

@ -4,6 +4,8 @@ http://visjs.org
## <not yet released>, version 0.3.0
- Moved the generated library to folder `./dist`
- Css stylesheet must be loaded explicitly now.
- Implemented options `showCurrentTime` and `showCustomTime`. Thanks fi0dor.
- Implemented touch support for Timeline.
- Fixed broken Timeline options `min` and `max`.

+ 7
- 11
Jakefile.js View File

@ -9,9 +9,10 @@ var jake = require('jake'),
require('jake-utils');
// constants
var VIS = './vis.js';
var VIS = './dist/vis.js';
var VIS_CSS = './dist/vis.css';
var VIS_TMP = './vis.js.tmp';
var VIS_MIN = './vis.min.js';
var VIS_MIN = './dist/vis.min.js';
/**
* default task
@ -27,7 +28,7 @@ task('default', ['build', 'minify', 'test'], function () {
desc('Build the visualization library vis.js');
task('build', {async: true}, function () {
// concatenate and stringify the css files
var result = concat({
concat({
src: [
'./src/timeline/component/css/timeline.css',
'./src/timeline/component/css/panel.css',
@ -38,10 +39,10 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/currenttime.css',
'./src/timeline/component/css/customtime.css'
],
header: '/* vis.js stylesheet */',
dest: VIS_CSS,
separator: '\n'
});
var cssText = JSON.stringify(result.code);
console.log('created ' + VIS_CSS);
// concatenate the script files
concat({
@ -86,12 +87,7 @@ task('build', {async: true}, function () {
'./src/module/exports.js'
],
separator: '\n',
// Note: we insert the css as a string in the javascript code here
// the css will be injected on load of the javascript library
footer: '// inject css\n' +
'util.loadCss(' + cssText + ');\n'
separator: '\n'
});
// bundle the concatenated script and dependencies into one file

+ 8
- 2
docs/graph.html View File

@ -53,7 +53,13 @@
<h2 id="Example">Example</h2>
<p>
Here a basic graph example. More examples can be found in the
Here a basic graph example. Note that unlike the
<a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
file.
</p>
<p>
More examples can be found in the
<a href="../examples" target="_blank">examples directory</a>.
</p>
@ -62,7 +68,7 @@
&lt;head&gt;
&lt;title&gt;Graph | Basic usage&lt;/title&gt;
&lt;script type="text/javascript" src="../../vis.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

+ 4
- 1
docs/index.html View File

@ -84,13 +84,14 @@ bower install vis
<h2 id="Load">Load</h2>
<p>
To use a component, include the javascript file of vis in your web page:
To load vis.js, include the javascript and css files of vis in your web page:
</p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
@ -144,7 +145,9 @@ var timeline = new vis.Timeline(container, data, options);
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
&lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
body, html {

+ 6
- 3
docs/timeline.html View File

@ -59,7 +59,8 @@
}
&lt;/style&gt;
&lt;script src="../../vis.js"&gt;&lt;/script&gt;
&lt;script src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;
@ -85,11 +86,13 @@
<h2 id="Loading">Loading</h2>
<p>
Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
in a subfolder of your project. Include the library script in the head of your html code:
in a subfolder of your project. Include the libraries script and css files in the
head of your html code:
</p>
<pre class="prettyprint lang-html">
&lt;script type="text/javascript" src="vis/vis.js"&gt;&lt;/script&gt;
&lt;script src="vis/dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="vis/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
</pre>
The constructor of the Timeline is <code>vis.Timeline</code>

+ 1
- 1
examples/graph/01_basic_usage.html View File

@ -3,7 +3,7 @@
<head>
<title>Graph | Basic usage</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
#mygraph {

+ 1
- 1
examples/graph/02_random_nodes.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/03_images.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/04_shapes.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/05_social_network.html View File

@ -15,7 +15,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';

+ 1
- 1
examples/graph/06_groups.html View File

@ -15,7 +15,7 @@
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/07_selections.html View File

@ -3,7 +3,7 @@
<head>
<title>Graph | Selections</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
#mygraph {

+ 1
- 1
examples/graph/08_mobile_friendly.html View File

@ -21,7 +21,7 @@
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/09_sizing.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/10_multiline_text.html View File

@ -11,7 +11,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
function draw() {

+ 1
- 1
examples/graph/11_custom_style.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/12_scalable_images.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var DIR = 'img/soft-scraps-icons/';

+ 1
- 1
examples/graph/13_dashed_lines.html View File

@ -14,7 +14,7 @@
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
// Called on page load

+ 1
- 1
examples/graph/14_dot_language.html View File

@ -2,7 +2,7 @@
<head>
<title>Graph | DOT Language</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
</head>
<body>
<div id="mygraph"></div>

+ 1
- 1
examples/graph/15_dot_language_playground.html View File

@ -3,7 +3,7 @@
<head>
<title>Graph | DOT language playground</title>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<style type="text/css">
body, html {

+ 1
- 1
examples/graph/16_dynamic_data.html View File

@ -53,7 +53,7 @@
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes, edges, graph;

+ 1
- 1
examples/graph/17_network_info.html View File

@ -17,7 +17,7 @@
}
</style>
<script type="text/javascript" src="../../vis.min.js"></script>
<script type="text/javascript" src="../../dist/vis.min.js"></script>
<script type="text/javascript">
var nodes = null;

+ 1
- 1
examples/graph/graphviz/graphviz_gallery.html View File

@ -3,7 +3,7 @@
<title>Graph | Graphviz Gallery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../vis.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<style type="text/css">
p {

+ 19
- 18
examples/timeline/01_basic.html View File

@ -1,31 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../vis.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 51
- 50
examples/timeline/02_dataset.html View File

@ -1,61 +1,62 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Dataset example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
height: 100%;
margin: 0;
padding: 0;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 100%;
}
</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="../../vis.js"></script>
<title>Timeline | Dataset example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
height: 100%;
margin: 0;
padding: 0;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 100%;
}
</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>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
items.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
{id: 2, content: 'item 2', start: now.clone().add('days', -2)},
{id: 3, content: 'item 3', start: now.clone().add('days', 2)},
{id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11)}
]);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 7),
orientation: 'top',
height: '100%',
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
var now = moment().minutes(0).seconds(0).milliseconds(0);
// create a dataset with items
var items = new vis.DataSet({
convert: {
start: 'Date',
end: 'Date'
}
});
items.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
{id: 2, content: 'item 2', start: now.clone().add('days', -2)},
{id: 3, content: 'item 3', start: now.clone().add('days', 2)},
{id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11)}
]);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3),
end: now.clone().add('days', 7),
orientation: 'top',
height: '100%',
showCurrentTime: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>

+ 2
- 1
examples/timeline/03_much_data.html View File

@ -13,7 +13,8 @@
<!-- 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="../../vis.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>

+ 52
- 47
examples/timeline/04_html_data.html View File

@ -1,69 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | HTML data</title>
<title>Timeline | HTML data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
</style>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../vis.js"></script>
</head>
<body>
<p>
Load HTML contents in the Timeline
Load HTML contents in the Timeline
</p>
<div id="visualization"></div>
<script>
// create a couple of HTML items in various ways
// create a couple of HTML items in various ways
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item2 = document.createElement('div');
item2.innerHTML = '<span>item 2</span>';
var item2 = document.createElement('div');
item2.innerHTML = '<span>item 2</span>';
var item3 = document.createElement('div');
var span3 = document.createElement('span');
span3.className = 'large';
span3.appendChild(document.createTextNode('item 3'));
item3.appendChild(span3);
var item3 = document.createElement('div');
var span3 = document.createElement('span');
span3.className = 'large';
span3.appendChild(document.createTextNode('item 3'));
item3.appendChild(span3);
var item4 = 'item <span class="large">4</span>';
var item4 = 'item <span class="large">4</span>';
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
img5.src = 'img/attachment-icon.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
img5.src = 'img/attachment-icon.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
// create data and a Timeline
var container = document.getElementById('visualization');
var items = [
{id: 1, content: item1, start: '2013-04-20'},
{id: 2, content: item2, start: '2013-04-14'},
{id: 3, content: item3, start: '2013-04-18'},
{id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: item5, start: '2013-04-25'},
{id: 6, content: item6, start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
// create data and a Timeline
var container = document.getElementById('visualization');
var items = [
{id: 1, content: item1, start: '2013-04-20'},
{id: 2, content: item2, start: '2013-04-14'},
{id: 3, content: item3, start: '2013-04-18'},
{id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: item5, start: '2013-04-25'},
{id: 6, content: item6, start: '2013-04-27'},
{id: 7, content: item7, start: '2013-04-21'}
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 51
- 50
examples/timeline/05_groups.html View File

@ -1,71 +1,72 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Group example</title>
<title>Timeline | Group example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</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="../../vis.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content'
};
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content'
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>

+ 8
- 8
examples/timeline/index.html View File

@ -2,21 +2,21 @@
<html>
<head>
<title>vis.js | timeline examples</title>
<title>vis.js | timeline examples</title>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
</head>
<body>
<div id="container">
<h1>vis.js timeline examples</h1>
<h1>vis.js timeline examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_dataset.html">02_dataset.html</a></p>
<p><a href="03_much_data.html">03_much_data.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_dataset.html">02_dataset.html</a></p>
<p><a href="03_much_data.html">03_much_data.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p>
</div>
</body>

+ 5
- 3
examples/timeline/requirejs/requirejs_example.html View File

@ -1,11 +1,13 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline requirejs demo</title>
<title>Timeline requirejs demo</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
<script data-main="scripts/main" src="scripts/require.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<div id="visualization"></div>
</body>
</html>

+ 14
- 14
examples/timeline/requirejs/scripts/main.js View File

@ -1,19 +1,19 @@
require.config({
paths: {
vis: '../../../../vis'
}
paths: {
vis: '../../../../dist/vis'
}
});
require(['vis'], function (vis) {
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
});

+ 3
- 3
src/graph/Graph.js View File

@ -725,7 +725,7 @@ Graph.prototype._onMouseWheel = function(event) {
scale *= (1 + zoom);
// calculate the pointer location
var gesture = Hammer.event.collectEventData(this, 'scroll', event);
var gesture = util.fakeGesture(this, event);
var pointer = this._getPointer(gesture.center);
// apply the new scale
@ -746,7 +746,7 @@ Graph.prototype._onMouseWheel = function(event) {
* @private
*/
Graph.prototype._onMouseMoveTitle = function (event) {
var gesture = Hammer.event.collectEventData(this, 'mousemove', event);
var gesture = util.fakeGesture(this, event);
var pointer = this._getPointer(gesture.center);
// check if the previously selected node is still selected
@ -1920,4 +1920,4 @@ Graph.prototype.toggleFreeze = function() {
this.start();
}
console.log('freezeSimulation',this.freezeSimulation)
}
}

+ 1
- 1
src/timeline/Range.js View File

@ -389,7 +389,7 @@ Range.prototype._onMouseWheel = function(event, component, direction) {
}
// calculate center, the date to zoom around
var gesture = Hammer.event.collectEventData(this, 'scroll', event),
var gesture = util.fakeGesture(this, event),
pointer = getPointer(gesture.touches[0], component.frame),
pointerDate = this._pointerToDate(component, direction, pointer);

+ 15
- 28
src/util.js View File

@ -548,6 +548,21 @@ util.stopPropagation = function stopPropagation(event) {
}
};
/**
* Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
* @param {Element} element
* @param {Event} event
*/
util.fakeGesture = function fakeGesture (element, event) {
var eventType = null;
// for hammer.js 1.0.5
return Hammer.event.collectEventData(this, eventType, event);
// for hammer.js 1.0.6
//var touches = Hammer.event.getTouchList(event, eventType);
//return Hammer.event.collectEventData(this, eventType, touches, event);
};
/**
* Cancels the event if it is cancelable, without stopping further propagation of the event.
@ -656,31 +671,3 @@ util.option.asElement = function (value, defaultValue) {
return value || defaultValue || null;
};
/**
* load css from text
* @param {String} css Text containing css
*/
util.loadCss = function (css) {
if (typeof document === 'undefined') {
return;
}
// get the script location, and built the css file name from the js file name
// http://stackoverflow.com/a/2161748/1262753
// var scripts = document.getElementsByTagName('script');
// var jsFile = scripts[scripts.length-1].src.split('?')[0];
// var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
// inject css
// http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
};

+ 1
- 1
test/dataset.html View File

@ -2,7 +2,7 @@
<html>
<head>
<title></title>
<script src="../vis.js"></script>
<script src="../dist/vis.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>

+ 4
- 3
test/timeline.html View File

@ -3,7 +3,8 @@
<head>
<title></title>
<script src="../node_modules/moment/moment.js"></script>
<script src="../vis.js"></script>
<script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
@ -69,8 +70,8 @@
height: 200,
//start: moment('2013-01-01'),
//end: moment('2013-12-31'),
min: moment('2013-01-01'),
max: moment('2013-12-31'),
//min: moment('2013-01-01'),
//max: moment('2013-12-31'),
zoomMin: 1000 * 60 * 60 * 24, // 1 day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months
};

+ 2
- 1
test/timeline_groups.html View File

@ -19,7 +19,8 @@
<!-- 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="../vis.js"></script>
<script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>

+ 2
- 1
test/timestep.html View File

@ -2,7 +2,8 @@
<html>
<head>
<title></title>
<script src="../vis.js"></script>
<script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>

Write Preview
Loading…
Cancel
Save