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

Css file must be loaded explicitly now. Library files moved to `dist`

css_transitions
josdejong 11 years ago
parent
f678e076b1
commit
299b2dd81e
38 changed files with 255 additions and 15485 deletions
Unified 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. +51
    -49
      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. +0
    -28
      src/util.js
  33. +1
    -1
      test/dataset.html
  34. +4
    -3
      test/timeline.html
  35. +2
    -1
      test/timeline_groups.html
  36. +2
    -1
      test/timestep.html
  37. +0
    -15194
      vis.js
  38. +0
    -29
      vis.min.js

+ 2
- 0
HISTORY.md View File

@ -4,6 +4,8 @@ http://visjs.org
## <not yet released>, version 0.3.0 ## <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 options `showCurrentTime` and `showCustomTime`. Thanks fi0dor.
- Implemented touch support for Timeline. - Implemented touch support for Timeline.
- Fixed broken Timeline options `min` and `max`. - Fixed broken Timeline options `min` and `max`.

+ 7
- 11
Jakefile.js View File

@ -9,9 +9,10 @@ var jake = require('jake'),
require('jake-utils'); require('jake-utils');
// constants // constants
var VIS = './vis.js';
var VIS = './dist/vis.js';
var VIS_CSS = './dist/vis.css';
var VIS_TMP = './vis.js.tmp'; var VIS_TMP = './vis.js.tmp';
var VIS_MIN = './vis.min.js';
var VIS_MIN = './dist/vis.min.js';
/** /**
* default task * default task
@ -27,7 +28,7 @@ task('default', ['build', 'minify', 'test'], function () {
desc('Build the visualization library vis.js'); desc('Build the visualization library vis.js');
task('build', {async: true}, function () { task('build', {async: true}, function () {
// concatenate and stringify the css files // concatenate and stringify the css files
var result = concat({
concat({
src: [ src: [
'./src/timeline/component/css/timeline.css', './src/timeline/component/css/timeline.css',
'./src/timeline/component/css/panel.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/currenttime.css',
'./src/timeline/component/css/customtime.css' './src/timeline/component/css/customtime.css'
], ],
header: '/* vis.js stylesheet */',
dest: VIS_CSS,
separator: '\n' separator: '\n'
}); });
var cssText = JSON.stringify(result.code);
console.log('created ' + VIS_CSS);
// concatenate the script files // concatenate the script files
concat({ concat({
@ -84,12 +85,7 @@ task('build', {async: true}, function () {
'./src/module/exports.js' './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 // 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> <h2 id="Example">Example</h2>
<p> <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>. <a href="../examples" target="_blank">examples directory</a>.
</p> </p>
@ -62,7 +68,7 @@
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Graph | Basic usage&lt;/title&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;/head&gt;
&lt;body&gt; &lt;body&gt;

+ 4
- 1
docs/index.html View File

@ -84,13 +84,14 @@ bower install vis
<h2 id="Load">Load</h2> <h2 id="Load">Load</h2>
<p> <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> </p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt; <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&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;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;script type="text/javascript"&gt; &lt;script type="text/javascript"&gt;
@ -144,7 +145,9 @@ var timeline = new vis.Timeline(container, data, options);
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
&lt;title&gt;Timeline basic demo&lt;/title&gt; &lt;title&gt;Timeline basic demo&lt;/title&gt;
&lt;script src="components/vis/vis.js"&gt;&lt;/script&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; &lt;style type="text/css"&gt;
body, html { body, html {

+ 6
- 3
docs/timeline.html View File

@ -59,7 +59,8 @@
} }
&lt;/style&gt; &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;/head&gt;
&lt;body&gt; &lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt; &lt;div id="visualization"&gt;&lt;/div&gt;
@ -85,11 +86,13 @@
<h2 id="Loading">Loading</h2> <h2 id="Loading">Loading</h2>
<p> <p>
Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library. 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> </p>
<pre class="prettyprint lang-html"> <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> </pre>
The constructor of the Timeline is <code>vis.Timeline</code> 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> <head>
<title>Graph | Basic usage</title> <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"> <style type="text/css">
#mygraph { #mygraph {

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

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

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

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

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

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

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

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

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

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

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

@ -3,7 +3,7 @@
<head> <head>
<title>Graph | Selections</title> <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"> <style type="text/css">
#mygraph { #mygraph {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -3,7 +3,7 @@
<head> <head>
<title>Graph | DOT language playground</title> <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"> <style type="text/css">
body, html { body, html {

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

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

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

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

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

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

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

@ -1,31 +1,32 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <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> </head>
<body> <body>
<div id="visualization"></div> <div id="visualization"></div>
<script type="text/javascript"> <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> </script>
</body> </body>
</html> </html>

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

@ -1,61 +1,62 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <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> </head>
<body> <body>
<div id="visualization"></div> <div id="visualization"></div>
<script> <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> </script>
</body> </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 --> <!-- 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="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> </head>
<body> <body>
<h1> <h1>

+ 51
- 49
examples/timeline/04_html_data.html View File

@ -1,72 +1,74 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <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> </head>
<body> <body>
<p> <p>
Load HTML contents in the Timeline
Load HTML contents in the Timeline
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
<script> <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>';
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'},
{id: 7, content: item7, start: '2013-04-21'}
];
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> </script>
</body> </body>
</html> </html>

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

@ -1,71 +1,72 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <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> </head>
<body> <body>
<p> <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> </p>
<div id="visualization"></div> <div id="visualization"></div>
<script> <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> </script>
</body> </body>

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

@ -2,21 +2,21 @@
<html> <html>
<head> <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> </head>
<body> <body>
<div id="container"> <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> </div>
</body> </body>

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

@ -1,11 +1,13 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <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> </head>
<body> <body>
<div id="visualization"></div>
<div id="visualization"></div>
</body> </body>
</html> </html>

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

@ -1,19 +1,19 @@
require.config({ require.config({
paths: {
vis: '../../../../vis'
}
paths: {
vis: '../../../../dist/vis'
}
}); });
require(['vis'], function (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);
}); });

+ 0
- 28
src/util.js View File

@ -671,31 +671,3 @@ util.option.asElement = function (value, defaultValue) {
return value || defaultValue || null; 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> <html>
<head> <head>
<title></title> <title></title>
<script src="../vis.js"></script>
<script src="../dist/vis.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head> </head>
<body> <body>

+ 4
- 3
test/timeline.html View File

@ -3,7 +3,8 @@
<head> <head>
<title></title> <title></title>
<script src="../node_modules/moment/moment.js"></script> <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"> <style type="text/css">
body, html { body, html {
@ -69,8 +70,8 @@
height: 200, height: 200,
//start: moment('2013-01-01'), //start: moment('2013-01-01'),
//end: moment('2013-12-31'), //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 zoomMin: 1000 * 60 * 60 * 24, // 1 day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months 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 --> <!-- 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="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> </head>
<body> <body>

+ 2
- 1
test/timestep.html View File

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

+ 0
- 15194
vis.js
File diff suppressed because it is too large
View File


+ 0
- 29
vis.min.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save