Browse Source

Merge branch 'graph2d' into develop

css_transitions
jos 10 years ago
parent
commit
91fc389921
42 changed files with 13941 additions and 4914 deletions
  1. +1
    -0
      .gitignore
  2. +5
    -0
      HISTORY.md
  3. +11
    -0
      Jakefile.js
  4. +170
    -0
      dist/vis.css
  5. +8023
    -4606
      dist/vis.js
  6. +1
    -1
      dist/vis.min.css
  7. +13
    -12
      dist/vis.min.js
  8. +55
    -3
      docs/graph.html
  9. +862
    -0
      docs/graph2d.html
  10. +4
    -0
      docs/index.html
  11. +181
    -181
      docs/timeline.html
  12. +53
    -0
      examples/graph2d/01_basic.html
  13. +57
    -0
      examples/graph2d/02_bars.html
  14. +112
    -0
      examples/graph2d/03_groups.html
  15. +126
    -0
      examples/graph2d/04_rightAxis.html
  16. +138
    -0
      examples/graph2d/05_bothAxis.html
  17. +101
    -0
      examples/graph2d/06_interpolation.html
  18. +74
    -0
      examples/graph2d/07_scrollingAndSorting.html
  19. +150
    -0
      examples/graph2d/08_performance.html
  20. +87
    -0
      examples/graph2d/default.css
  21. +22
    -0
      examples/graph2d/index.html
  22. +1
    -0
      examples/index.html
  23. +2
    -1
      examples/timeline/03_a_lot_of_data.html
  24. +162
    -0
      src/DOMutil.js
  25. +3
    -2
      src/graph/Graph.js
  26. +1
    -1
      src/graph/graphMixins/physics/BarnesHut.js
  27. +87
    -18
      src/graph/graphMixins/physics/HierarchialRepulsion.js
  28. +11
    -2
      src/graph/graphMixins/physics/PhysicsMixin.js
  29. +2
    -1
      src/module/exports.js
  30. +215
    -0
      src/timeline/DataStep.js
  31. +893
    -0
      src/timeline/Graph2d.js
  32. +0
    -5
      src/timeline/Range.js
  33. +0
    -0
      src/timeline/Stack.js
  34. +35
    -4
      src/timeline/Timeline.js
  35. +468
    -0
      src/timeline/component/DataAxis.js
  36. +116
    -0
      src/timeline/component/GraphGroup.js
  37. +3
    -68
      src/timeline/component/Group.js
  38. +177
    -0
      src/timeline/component/Legend.js
  39. +1067
    -0
      src/timeline/component/Linegraph.js
  40. +61
    -0
      src/timeline/component/css/dataaxis.css
  41. +108
    -0
      src/timeline/component/css/pathStyles.css
  42. +283
    -9
      src/util.js

+ 1
- 0
.gitignore View File

@ -6,3 +6,4 @@ node_modules
.settings/org.eclipse.wst.jsdt.ui.superType.container .settings/org.eclipse.wst.jsdt.ui.superType.container
.settings/org.eclipse.wst.jsdt.ui.superType.name .settings/org.eclipse.wst.jsdt.ui.superType.name
npm-debug.log npm-debug.log
examples/graph/24_hierarchical_layout_userdefined2.html

+ 5
- 0
HISTORY.md View File

@ -23,6 +23,11 @@ http://visjs.org
- Fixed graph.storePositions() - Fixed graph.storePositions()
- Extended Selection API with selectNodes and selectEdges, deprecating setSelection. - Extended Selection API with selectNodes and selectEdges, deprecating setSelection.
- Fixed multiline labels. - Fixed multiline labels.
- Changed hierarchical physics solver and updated docs.
### Graph2D
- Added first iteration of the Graph2D.
### Graph3d ### Graph3d

+ 11
- 0
Jakefile.js View File

@ -46,6 +46,9 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/customtime.css', './src/timeline/component/css/customtime.css',
'./src/timeline/component/css/animation.css', './src/timeline/component/css/animation.css',
'./src/timeline/component/css/dataaxis.css',
'./src/timeline/component/css/pathStyles.css',
'./src/graph/css/graph-manipulation.css', './src/graph/css/graph-manipulation.css',
'./src/graph/css/graph-navigation.css' './src/graph/css/graph-navigation.css'
], ],
@ -62,9 +65,16 @@ task('build', {async: true}, function () {
'./src/shim.js', './src/shim.js',
'./src/util.js', './src/util.js',
'./src/DOMutil.js',
'./src/DataSet.js', './src/DataSet.js',
'./src/DataView.js', './src/DataView.js',
'./src/timeline/component/GraphGroup.js',
'./src/timeline/component/Legend.js',
'./src/timeline/component/DataAxis.js',
'./src/timeline/component/Linegraph.js',
'./src/timeline/DataStep.js',
'./src/timeline/stack.js', './src/timeline/stack.js',
'./src/timeline/TimeStep.js', './src/timeline/TimeStep.js',
'./src/timeline/Range.js', './src/timeline/Range.js',
@ -76,6 +86,7 @@ task('build', {async: true}, function () {
'./src/timeline/component/item/*.js', './src/timeline/component/item/*.js',
'./src/timeline/component/Group.js', './src/timeline/component/Group.js',
'./src/timeline/Timeline.js', './src/timeline/Timeline.js',
'./src/timeline/Graph2d.js',
'./src/graph/dotparser.js', './src/graph/dotparser.js',
'./src/graph/shapes.js', './src/graph/shapes.js',

+ 170
- 0
dist/vis.css View File

@ -340,6 +340,176 @@
transition: height .4s ease-in-out, top .4s ease-in-out; transition: height .4s ease-in-out, top .4s ease-in-out;
} }
/**/ /**/
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}
.vis.timeline .graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis.timeline .outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
fill-opacity:0.3;
stroke: none;
}
div.graph-manipulationDiv { div.graph-manipulationDiv {
border-width:0px; border-width:0px;
border-bottom: 1px; border-bottom: 1px;

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


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


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


+ 55
- 3
docs/graph.html View File

@ -1384,7 +1384,8 @@ var nodes = [
The original simulation method was based on particel physics with a repulsion field (potential) around each node, The original simulation method was based on particel physics with a repulsion field (potential) around each node,
and the edges were modelled as springs. The new system employed the <a href="http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation">Barnes-Hut</a> gravitational simulation model. The edges are still modelled as springs. and the edges were modelled as springs. The new system employed the <a href="http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation">Barnes-Hut</a> gravitational simulation model. The edges are still modelled as springs.
To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters. To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. <br/>
When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
<p class="important_note">Note: if the behaviour of your graph is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.</p> <p class="important_note">Note: if the behaviour of your graph is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.</p>
</p> </p>
@ -1408,6 +1409,13 @@ var options = {
nodeDistance: 100, nodeDistance: 100,
damping: 0.09 damping: 0.09
}, },
hierarchicalRepulsion: {
centralGravity: 0.5,
springLength: 150,
springConstant: 0.01,
nodeDistance: 60,
damping: 0.09
}
} }
</pre> </pre>
<h5>barnesHut:</h5> <h5>barnesHut:</h5>
@ -1471,6 +1479,12 @@ var options = {
<td>0.1</td> <td>0.1</td>
<td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td> <td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td>
</tr> </tr>
<tr>
<td>nodeDistance</td>
<td>Number</td>
<td>100</td>
<td>This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero.</td>
</tr>
<tr> <tr>
<td>springLength</td> <td>springLength</td>
<td>Number</td> <td>Number</td>
@ -1478,17 +1492,55 @@ var options = {
<td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields. <td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td> To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr> </tr>
<tr>
<td>springConstant</td>
<td>Number</td>
<td>0.05</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>0.09</td>
<td>This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available <a href="http://en.wikipedia.org/wiki/Damping" target="_blank">here</a>.</td>
</tr>
</table>
<h5>hierarchicalRepulsion:</h5>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>centralGravity</td>
<td>Number</td>
<td>0.5</td>
<td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td>
</tr>
<tr> <tr>
<td>nodeDistance</td> <td>nodeDistance</td>
<td>Number</td> <td>Number</td>
<td>100</td>
<td>60</td>
<td>This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero.</td> <td>This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero.</td>
</tr> </tr>
<tr>
<td>springLength</td>
<td>Number</td>
<td>100</td>
<td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr>
<tr> <tr>
<td>springConstant</td> <td>springConstant</td>
<td>Number</td> <td>Number</td>
<td>0.05</td>
<td>0.01</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td> <td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
</tr> </tr>
<tr> <tr>

+ 862
- 0
docs/graph2d.html View File

@ -0,0 +1,862 @@
<html>
<head>
<title>vis.js | Graph2D documentation</title>
<style>
td.greenField {
background-color: #c9ffc7;
}
</style>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>Graph2D documentation</h1>
<h2 id="Overview">Overview</h2>
<p>
Graph2D is an interactive visualization chart to draw data in a 2D graph.
You can freely move and zoom in the graph by dragging and scrolling in the
window.
</p>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Loading">Loading</a></li>
<li><a href="#Data_Format">Data Format</a>
<ul>
<li><a href="#items">Items</a></li>
<li><a href="#groups">Groups</a></li>
</ul>
</li>
<li><a href="#Configuration_Options">Configuration Options</a>
<ul>
<li><a href="#graph2dOptions">Graph2D options</a></li>
<li><a href="#timelineOptions">Timeline options</a></li>
</ul>
</li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Example">Example</h2>
<p>
The following code shows how to create a Graph2D and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph2D | Basic Example&lt;/title&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&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;
&lt;script type="text/javascript"&gt;
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2D(container, dataset, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Loading">Loading</h2>
<p>
The class name of the Graph2D is <code>vis.Graph2D</code>.
When constructing a Graph2D, an HTML DOM container must be provided to attach
the graph to. Optionally, data an options can be provided.
Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
section <a href="#Data_Format">Data Format</a>.
Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>.
Groups is a vis <code>DataSet</code> containing groups. The available options and the method of construction
are described in section <a href="#Group_Options">Data Format</a>.
</p>
<pre class="prettyprint lang-js">var graph = new vis.Graph2D(container [, data] [, options] [,groups]);</pre>
<p>
Data, options and groups can be set or changed later on using the functions
<code>Graph2D.setData(data)</code>, <code>Graph2D.setOptions(options)</code> and <code>Graph2D.setGroups(groups)</code>.
</p>
<h2 id="Data_Format">Data Format</h2>
<p>
Graph2D can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
JSON objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<p>
Graph2D can be provided with two types of data:
</p>
<ul>
<li><a href="#items">Items</a> containing a set of points to be displayed.</li>
<li><a href="#groups">Groups</a> containing a set of groups used to group items
together. All items belonging to a group will be drawn as a single graph.</li>
</ul>
<h3 id="items">Items</h3>
<pre class="prettyprint lang-js">
var items = [
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1}
];
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>x</td>
<td>number</td>
<td>yes</td>
<td>Location on the x-axis.</td>
</tr>
<tr>
<td>y</td>
<td>number</td>
<td>yes</td>
<td>Location on the y-axis.</td>
</tr>
</tr>
<tr>
<td>group</td>
<td>number | string</td>
<td>no</td>
<td>The ID of the group this point belongs to.</td>
</tr>
</table>
<h3 id="Groups">Groups</h3>
<p>
Like the items, groups are regular JavaScript Arrays and Objects.
Using groups, items can be grouped together.
Items are filtered per group, and displayed as individual graphs. Groups can contain the properties <code>id</code>,
<code>content</code>, <code>className</code> (optional) and <code>options</code> (optional).
</p>
<p>
Groups can be applied to a timeline using the method <code>setGroups</code>.
A table with groups can be created like:
</p>
<pre class="prettyprint lang-js">
var groups = new vis.DataSet();
groups.add({
id: 1,
content: 'Group 1'
// Optional: a field 'className'
// Optional: options
})
groups.add({
// more groups...
});
</pre>
<p>
Groups can have the following properties:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>id</td>
<td>String | Number</td>
<td>yes</td>
<td>An id for the group. The group will display all items having a
property <code>group</code> which matches the <code>id</code>
of the group.</td>
</tr>
<tr>
<td>content</td>
<td>String</td>
<td>yes</td>
<td>The contents of the group. This can be plain text or html code.</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>no</td>
<td>This field is optional. A className can be used to give groups
an individual css style.
</td>
</tr>
<tr>
<td>options</td>
<td>JSON object</td>
<td>no</td>
<td>This field is optional. The options can be used to give a group a specific draw style.
Any options that are colored green in the Configuration Options can be used as options here.
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
<h3 id="graph2dOptions">Graph2D Options</h3>
Options can be used to customize the Graph2D to your purposes. These options can be passed to the Graph2D object either in
the constructor, or by the <code>setOptions</code> function.
<pre class="prettyprint lang-js">
var options = {
width: '100%',
height: '400px',
style: 'surface'
};
</pre>
The options colored in green can also be used as options for the groups. All options are optional.
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td class="greenField">yAxisOrientation</td>
<td>String</td>
<td>'left'</td>
<td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
with an axis, it will not be shown.</td>
</tr>
<tr>
<td>defaultGroup</td>
<td>String</td>
<td>'default'</td>
<td>This is the label for the default, ungrouped items when shown in a legend.</td>
</tr>
<tr>
<td class="greenField">sort</td>
<td>Boolean</td>
<td>true</td>
<td>This determines if the items are sorted automatically.
They are sorted by the x value. If sort is enabled, more optimizations are possible, increasing the performance.</td>
</tr>
<tr>
<td class="greenField">sampling</td>
<td>Boolean</td>
<td>true</td>
<td>If sampling is enabled, graph2D will automatically determine the amount of points per pixel.
If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.</td>
</tr>
<tr>
<td>graphHeight</td>
<td>Number | String</td>
<td>'400px'</td>
<td>This is the height of the graph SVG canvas.
If it is larger than the height of the outer frame, you can drag up and down
the vertical direction as well as the usual horizontal direction.</td>
</tr>
<tr>
<td class="greenField">shaded</td>
<td>Boolean | Object</td>
<td>false</td>
<td>Toggle a shaded area with the default settings.</td>
</tr>
<tr>
<td class="greenField">shaded.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>This toggles the shading.</td>
</tr>
<tr>
<td class="greenField">shaded.orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.</td>
</tr>
<tr>
<td class="greenField">style</td>
<td>String</td>
<td>'line'</td>
<td>This allows the user to define if this should be a linegraph or a barchart. The options are: 'line' or 'bar'.</td>
</tr>
<tr>
<td class="greenField">barChart.width</td>
<td>Number</td>
<td>50</td>
<td>The width of the bars.</td>
</tr>
<tr>
<td class="greenField">barChart.align</td>
<td>String</td>
<td>'center'</td>
<td>The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'.</td>
</tr>
<tr>
<td class="greenField">catmullRom</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the interpolation with the default settings. For more customization use the JSON format.</td>
</tr>
<tr>
<td class="greenField">catmullRom.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the interpolation.</td>
</tr>
<tr>
<td class="greenField">catmullRom.parametrization</td>
<td>String</td>
<td>'centripetal'</td>
<td>Define the type of parametrizaion. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.</td>
</tr>
<tr>
<td class="greenField">drawPoints</td>
<td>Boolean | Object</td>
<td>true</td>
<td>Toggle the drawing of the datapoints with the default settings.</td>
</tr>
<tr>
<td class="greenField">drawPoints.enabled</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the datapoints.</td>
</tr>
<tr>
<td class="greenField">drawPoints.size</td>
<td>Number</td>
<td>6</td>
<td>Determine the size at which the data points are drawn.</td>
</tr>
<tr>
<td class="greenField">drawPoints.style</td>
<td>String</td>
<td>'square'</td>
<td>Determine the shape of the data points. The options are 'square' or 'circle'.</td>
</tr>
<tr>
<td>dataAxis.showMinorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the minor labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.showMajorLabels</td>
<td>Boolean</td>
<td>true</td>
<td>Toggle the drawing of the major labels on the Y axis.</td>
</tr>
<tr>
<td>dataAxis.icons</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the drawing of automatically generated icons the Y axis.</td>
</tr>
<tr>
<td>dataAxis.width</td>
<td>Number | String</td>
<td>'40px'</td>
<td>Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values.</td>
</tr>
<tr>
<td>dataAxis.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Show or hide the data axis.</td>
</tr>
<tr>
<td>legend</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend with the default settings.</td>
</tr>
<tr>
<td>legend.enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Toggle the legend.</td>
</tr>
<tr>
<td>legend.icons</td>
<td>Boolean</td>
<td>true</td>
<td>Show automatically generated icons on the legend.</td>
</tr>
<tr>
<td>legend.left.visible</td>
<td>Boolean</td>
<td>true</td>
<td>Both axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis.</td>
</tr>
<tr>
<td>legend.left.position</td>
<td>String</td>
<td>'top-left'</td>
<td>Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
</tr>
<tr>
<td>legend.right.visible</td>
<td>Boolean</td>
<td>true</td>
<td>This toggles the visibility of the legend that is coupled with the right axis.</td>
</tr>
<tr>
<td>legend.right.position</td>
<td>String</td>
<td>'top-right'</td>
<td>Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.</td>
</tr>
</table>
<h3 id="timelineOptions">Timeline Options</h3>
<p>
Graph2D is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
All options are optional.
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>redraw()</code>.</td>
</tr>
<tr>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
</tr>
<tr>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
</tr>
<tr>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
</tr>
<tr>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
</tr>
<tr>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
</tr>
<tr>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
</tr>
<tr>
<td>minHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
</tr>
<tr>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
</tr>
<tr>
<td>showCustomTime</td>
<td>boolean</td>
<td>false</td>
<td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
</tr>
<tr>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr>
<tr>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
</tr>
<tr>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
</tr>
<tr>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
</tr>
<tr>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
</tr>
<tr>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
The Graph2D supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>clear([what])</td>
<td>none</td>
<td>
Clear the Graph2D. An object can be passed specifying which sections to clear: items, groups,
and/or options. By Default, items, groups and options are cleared, i.e. <code>what = {items: true, groups: true, options: true}</code>. Example usage:
<pre class="prettyprint lang-js">Graph2D.clear(); // clear items, groups, and options
Graph2D.clear({options: true}); // clear options only
</pre>
</td>
</tr>
<tr>
<td>destroy()</td>
<td>none</td>
<td>Destroy the Graph2D. The Graph2D is removed from memory. all DOM elements and event listeners are cleaned up.
</td>
</tr>
<tr>
<td>getCustomTime()</td>
<td>Date</td>
<td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true.
</td>
</tr>
<tr>
<td>setCustomTime(time)</td>
<td>none</td>
<td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. <code>time</code> is a Date object.
</td>
</tr>
<tr>
<td>getWindow()</td>
<td>Object</td>
<td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
<td>Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: <code>rangechange</code>, <code>rangechanged</code>, <code>select</code>. The callback function is invoked as <code>callback(properties)</code>, where <code>properties</code> is an object containing event specific properties. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>off(event, callback)</td>
<td>none</td>
<td>Remove an event listener created before via function <code>on(event, callback)</code>. See section <a href="#Events">Events for more information</a>.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Force a redraw of the Graph2D. Can be useful to manually redraw when option autoResize=false.
</td>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>
<td>Set a data set with groups for the Graph2D.
<code>groups</code> can be an Array with Objects,
a DataSet, or a DataView. For each of the groups, the items of the
Graph2D are filtered on the property <code>group</code>, which
must correspond with the id of the group.
</td>
</tr>
<tr>
<td>setItems(items)</td>
<td>none</td>
<td>Set a data set with items for the Graph2D.
<code>items</code> can be an Array with Objects,
a DataSet, or a DataView.
</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Set or update options. It is possible to change any option of the Graph2D at any time. You can for example switch orientation on the fly.
</td>
</tr>
<tr>
<td>setSelection([ids])</td>
<td>none</td>
<td>Select or deselect items. Currently selected items will be unselected.
</td>
</tr>
<tr>
<td>setWindow(start, end)</td>
<td>none</td>
<td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged.</td>
</tr>
</table>
<h2 id="Events">Events</h2>
<p>
Graph2D fires events when changing the visible window by dragging, when
selecting items, and when dragging the custom time bar.
</p>
<p>
Here an example on how to listen for a <code>rangeChanged</code> event.
</p>
<pre class="prettyprint lang-js">
Graph2D.on('select', function (properties) {
alert('selected items: ' + properties.nodes);
});
</pre>
<p>
A listener can be removed via the function <code>off</code>:
</p>
<pre class="prettyprint lang-js">
function onChange (properties) {
alert('changed!');
}
// add event listener
Graph2D.on('rangechanged', onChange);
// do stuff...
// remove event listener
Graph2D.off('rangechanged', onChange);
</pre>
<p>
The following events are available.
</p>
<table>
<colgroup>
<col style="width: 20%;">
<col style="width: 40%;">
<col style="width: 40%;">
</colgroup>
<tr>
<th>name</th>
<th>Description</th>
<th>Properties</th>
</tr>
<tr>
<td>rangechange</td>
<td>Fired repeatedly when the user is dragging the Graph2D window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>rangechanged</td>
<td>Fired once after the user has dragged the Graph2D window.
</td>
<td>
<ul>
<li><code>start</code> (Number): timestamp of the current start of the window.</li>
<li><code>end</code> (Number): timestamp of the current end of the window.</li>
</ul>
</td>
</tr>
<tr>
<td>timechange</td>
<td>Fired repeatedly when the user is dragging the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
<tr>
<td>timechanged</td>
<td>Fired once after the user has dragged the custom time bar.
Only available when the custom time bar is enabled.
</td>
<td>
<ul>
<li><code>time</code> (Date): the current time.</li>
</ul>
</td>
</tr>
</table>
<h2 id="Styles">Styles</h2>
<p>
All parts of the Graph2D have a class name and a default css style just like the Timeline.
The styles can be overwritten, which enables full customization of the layout
of the Graph2D.
</p>
<p>
Additionally, Graph2D has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
as well, along with defining your own classes to style the graphs! <a href="../examples/graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
</p>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.
No data is sent to any server.
</p>
</div>
</body>
</html>

+ 4
- 0
docs/index.html View File

@ -56,6 +56,10 @@
<a href="graph.html"><b>Graph</b></a>. <a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges. Display a graph or network with nodes and edges.
</li> </li>
<li>
<a href="graph2d.html"><b>Graph2d</b></a>.
Plot data on a timeline with lines or barcharts.
</li>
<li> <li>
<a href="graph3d.html"><b>Graph3d</b></a>. <a href="graph3d.html"><b>Graph3d</b></a>.
Display data in a three dimensional graph. Display data in a three dimensional graph.

+ 181
- 181
docs/timeline.html View File

@ -330,132 +330,132 @@ var options = {
<table> <table>
<tr> <tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr> </tr>
<tr> <tr>
<td>align</td>
<td>String</td>
<td>"center"</td>
<td>Alignment of items with type 'box'. Available values are
'center' (default), 'left', or 'right').</td>
<td>align</td>
<td>String</td>
<td>"center"</td>
<td>Alignment of items with type 'box'. Available values are
'center' (default), 'left', or 'right').</td>
</tr> </tr>
<tr> <tr>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>repaint()</code>.</td>
<td>autoResize</td>
<td>boolean</td>
<td>true</td>
<td>If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function <code>repaint()</code>.</td>
</tr> </tr>
<tr> <tr>
<td>editable</td>
<td>Boolean | Object</td>
<td>false</td>
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
<td>editable</td>
<td>Boolean | Object</td>
<td>false</td>
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</tr> </tr>
<tr> <tr>
<td>editable.add</td>
<td>Boolean</td>
<td>false</td>
<td>If true, new items can be created by double tapping an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.add</td>
<td>Boolean</td>
<td>false</td>
<td>If true, new items can be created by double tapping an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>editable.remove</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.remove</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>editable.updateGroup</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.updateGroup</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>editable.updateTime</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>editable.updateTime</td>
<td>Boolean</td>
<td>false</td>
<td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr> </tr>
<tr> <tr>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
<td>end</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial end date for the axis of the timeline.
If not provided, the latest date present in the items set is taken as
end date.</td>
</tr> </tr>
<tr> <tr>
<td>groupOrder</td>
<td>String | Function</td>
<td>none</td>
<td>Order the groups by a field name or custom sort function.
By default, groups are not ordered.
</td>
<td>groupOrder</td>
<td>String | Function</td>
<td>none</td>
<td>Order the groups by a field name or custom sort function.
By default, groups are not ordered.
</td>
</tr> </tr>
<tr> <tr>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
<td>height</td>
<td>Number | String</td>
<td>none</td>
<td>The height of the timeline in pixels or as a percentage.
When height is undefined or null, the height of the timeline is automatically
adjusted to fit the contents.
It is possible to set a maximum height using option <code>maxHeight</code>
to prevent the timeline from getting too high in case of automatically
calculated height.
</td>
</tr> </tr>
<tr> <tr>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
<td>margin.axis</td>
<td>Number</td>
<td>20</td>
<td>The minimal margin in pixels between items and the time axis.</td>
</tr> </tr>
<tr> <tr>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
<td>margin.item</td>
<td>Number</td>
<td>10</td>
<td>The minimal margin in pixels between items.</td>
</tr> </tr>
<tr> <tr>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
<td>max</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a maximum Date for the visible range.
It will not be possible to move beyond this maximum.
</td>
</tr> </tr>
<tr> <tr>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
<td>maxHeight</td>
<td>Number | String</td>
<td>none</td>
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr> </tr>
<tr> <tr>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
<td>min</td>
<td>Date | Number | String</td>
<td>none</td>
<td>Set a minimum Date for the visible range.
It will not be possible to move beyond this minimum.
</td>
</tr> </tr>
<tr> <tr>
@ -470,41 +470,41 @@ var options = {
<td>Boolean</td> <td>Boolean</td>
<td>true</td> <td>true</td>
<td> <td>
Specifies whether the Timeline can be moved and zoomed by dragging the window.
See also option <code>zoomable</code>.
Specifies whether the Timeline can be moved and zoomed by dragging the window.
See also option <code>zoomable</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onAdd</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
</td>
<td>onAdd</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
</td>
</tr> </tr>
<tr> <tr>
<td>onUpdate</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
<td>onUpdate</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr> </tr>
<tr> <tr>
<td>onMove</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
<td>onMove</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr> </tr>
<tr> <tr>
<td>onRemove</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
</td>
<td>onRemove</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
</td>
</tr> </tr>
<!-- TODO: cleanup option order <!-- TODO: cleanup option order
@ -521,128 +521,128 @@ var options = {
--> -->
<tr> <tr>
<td>orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
<td>orientation</td>
<td>String</td>
<td>'bottom'</td>
<td>Orientation of the timeline: 'top' or 'bottom' (default). If orientation is 'bottom', the time axis is drawn at the bottom, and if 'top', the axis is drawn on top.</td>
</tr> </tr>
<tr> <tr>
<td>padding</td>
<td>Number</td>
<td>5</td>
<td>The padding of items, needed to correctly calculate the size
of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
<td>padding</td>
<td>Number</td>
<td>5</td>
<td>The padding of items, needed to correctly calculate the size
of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
<pre class="prettyprint lang-css"> <pre class="prettyprint lang-css">
.vis.timeline .item { .vis.timeline .item {
padding: 10px; padding: 10px;
}</pre> }</pre>
</td>
</td>
</tr> </tr>
<tr> <tr>
<td>selectable</td>
<td>Boolean</td>
<td>true</td>
<td>If true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event <code>select</code> is fired each time the selection has changed (see section <a href="#Events">Events</a>).</td>
<td>selectable</td>
<td>Boolean</td>
<td>true</td>
<td>If true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event <code>select</code> is fired each time the selection has changed (see section <a href="#Events">Events</a>).</td>
</tr> </tr>
<tr> <tr>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
<td>showCurrentTime</td>
<td>boolean</td>
<td>true</td>
<td>Show a vertical bar at the current time.</td>
</tr> </tr>
<tr> <tr>
<td>showCustomTime</td>
<td>boolean</td>
<td>false</td>
<td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
<td>showCustomTime</td>
<td>boolean</td>
<td>false</td>
<td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
</tr> </tr>
<tr> <tr>
<tr> <tr>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
<td>showMajorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td>
</tr> </tr>
<tr> <tr>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
<td>showMinorLabels</td>
<td>boolean</td>
<td>true</td>
<td>By default, the timeline shows both minor and major date labels on the
time axis.
For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td>
</tr> </tr>
<tr> <tr>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
<td>stack</td>
<td>Boolean</td>
<td>true</td>
<td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
</tr> </tr>
<tr> <tr>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
<td>start</td>
<td>Date | Number | String</td>
<td>none</td>
<td>The initial start date for the axis of the timeline.
If not provided, the earliest date present in the events is taken as start date.</td>
</tr> </tr>
<tr> <tr>
<td>type</td>
<td>String</td>
<td>none</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
</td>
<td>type</td>
<td>String</td>
<td>none</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
</td>
</tr> </tr>
<tr> <tr>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
<td>width</td>
<td>String</td>
<td>'100%'</td>
<td>The width of the timeline in pixels or as a percentage.</td>
</tr> </tr>
<tr> <tr>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
<td>zoomable</td>
<td>Boolean</td>
<td>true</td>
<td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td>
</tr> </tr>
<tr> <tr>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
<td>zoomMax</td>
<td>Number</td>
<td>315360000000000</td>
<td>Set a maximum zoom interval for the visible range in milliseconds.
It will not be possible to zoom out further than this maximum.
Default value equals about 10000 years.
</td>
</tr> </tr>
<tr> <tr>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
<td>zoomMin</td>
<td>Number</td>
<td>10</td>
<td>Set a minimum zoom interval for the visible range in milliseconds.
It will not be possible to zoom in further than this minimum.
</td>
</tr> </tr>

+ 53
- 0
examples/graph2d/01_basic.html View File

@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2D | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2D module. An array or a vis.Dataset can be used as input.
In the following examples we'll explore the options Graph2D offest for customization. This example uses all default settings.
There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2D is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2D.
In these examples however, we will focus on what's new in Graph2D!
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 57
- 0
examples/graph2d/02_bars.html View File

@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Bar Graph Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2D | Bar Graph Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most the same data as the first example, except we plot the data as bars! The
dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
<br /><br />
The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
This example uses the default center alignment.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
style:'bar',
barChart: {width:50, align:'center'}, // align: left, center, right
drawPoints: false,
dataAxis: {
icons:true
},
orientation:'top',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

+ 112
- 0
examples/graph2d/03_groups.html View File

@ -0,0 +1,112 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Groups Example</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2D | Groups Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the groups functionality within Graph2D. This works in the same way as it does in Timeline,
We have however simplified the constructor to accept groups as well to shorten the code. These groups are the
method used in Graph2D to define individual graphs. These groups can be given an individual class as well as all the
styling options you can supply to Graph2D! This example, as well as the ones that follow will showcase a few different usages
of these options. <br /> <br />
This example also introduces the automatically generated legend. The icons are automatically generated and the label is the
content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'.
In this example, the setting <code>defaultGroup</code> is used to rename the default group to 'ungrouped'.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
options: {
style:'bar'
}});
groups.add({
id: 2,
content: names[2],
options: {drawPoints: false}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 60},
{x: '2014-06-14', y: 40},
{x: '2014-06-15', y: 55},
{x: '2014-06-16', y: 40},
{x: '2014-06-17', y: 50},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 25, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
defaultGroup: 'ungrouped',
legend: true,
start: '2014-06-10',
end: '2014-07-04'
};
var graph2d = new vis.Graph2d(container, dataset, options, groups);
</script>
</body>
</html>

+ 126
- 0
examples/graph2d/04_rightAxis.html View File

@ -0,0 +1,126 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Right Axis Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #0df200;
fill-opacity:0;
stroke-width:2px;
stroke: #0df200;
}
.customStyle2 {
fill: #f23303;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0004;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2D | Right Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 50, group: 2},
{x: '2014-06-25', y: 30, group: 2},
{x: '2014-06-26', y: 20, group: 3},
{x: '2014-06-27', y: 60, group: 3},
{x: '2014-06-28', y: 10, group: 3},
{x: '2014-06-29', y: 85, group: 3},
{x: '2014-06-30', y: 30, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
legend: {right: {position: 'top-left'}},
yAxisOrientation: 'right', // right, left
dataAxis: {icons: true},
start: '2014-06-10',
end: '2014-07-04',
movable: false
};
var graph2d = new vis.Graph2d(container, dataset, options, groups);
</script>
</body>
</html>

+ 138
- 0
examples/graph2d/05_bothAxis.html View File

@ -0,0 +1,138 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Both Axis Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2D | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
legend: {left:{position:"bottom-left"}},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, options, groups);
</script>
</body>
</html>

+ 101
- 0
examples/graph2d/06_interpolation.html View File

@ -0,0 +1,101 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Interpolation</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2D | Interpolation</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
The Graph2D makes use of <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of
the curves. The options are <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
<br /><br />
For both the <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
if there are very many points. The <code>uniform</code> parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the
linear interpolation is the fastest method. For more on the Catmull-Rom method, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'centripetal'
}
}});
groups.add({
id: 1,
content: names[1],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'chordal'
}
}});
groups.add({
id: 2,
content: names[2],
options: {
drawPoints: false,
catmullRom: {
parametrization: 'uniform'
}
}
});
groups.add({
id: 3,
content: names[3],
options: {
drawPoints: { style: 'circle' },
catmullRom: false
}});
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
for (var i = 0; i < names.length; i++) {
dataset.add( [
{x: '2014-06-12', y: 0 , group: i},
{x: '2014-06-13', y: 40, group: i},
{x: '2014-06-14', y: 10, group: i},
{x: '2014-06-15', y: 15, group: i},
{x: '2014-06-15', y: 30, group: i},
{x: '2014-06-17', y: 10, group: i},
{x: '2014-06-18', y: 15, group: i},
{x: '2014-06-19', y: 52, group: i},
{x: '2014-06-20', y: 10, group: i},
{x: '2014-06-21', y: 20, group: i}
]);
}
var options = {
dataPoints: false,
dataAxis: {visible: false},
legend: true,
start: '2014-06-11',
end: '2014-06-22'
};
var graph2d = new vis.Graph2d(container, dataset, options, groups);
</script>
</body>
</html>

+ 74
- 0
examples/graph2d/07_scrollingAndSorting.html View File

@ -0,0 +1,74 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Scrolling and Sorting</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2D | Scrolling and Sorting</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
You can determine the height of the Graph2D seperately from the height of the frame. If the <code>graphHeight</code>
is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
<br /><br />
Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
<br /><br />
You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. However, doing so does reduce the optimization
of the drawing so if you have a lot of points, keep <code>sort</code> turned on for the best results.
</div>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30},
{x: '2014-06-11', y: 100},
{x: '2014-06-12', y: 250},
{x: '2014-06-13', y: 300},
{x: '2014-06-14', y: 100},
{x: '2014-06-15', y: 150},
{x: '2014-06-16', y: 300},
{x: '2014-06-11', y: 400},
{x: '2014-06-12', y: 450},
{x: '2014-06-13', y: 400},
{x: '2014-06-14', y: 500},
{x: '2014-06-15', y: 420},
{x: '2014-06-16', y: 600},
{x: '2014-06-11', y: 810},
{x: '2014-06-12', y: 825},
{x: '2014-06-13', y: 830},
{x: '2014-06-14', y: 810},
{x: '2014-06-15', y: 815},
{x: '2014-06-16', y: 900}
];
var dataset = new vis.DataSet(items);
var options = {
legend: true,
sort: false,
defaultGroup: 'doodle',
graphHeight: '1500px',
height: '500px',
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 150
- 0
examples/graph2d/08_performance.html View File

@ -0,0 +1,150 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2D | Performance</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span.label {
width:150px;
display:inline-block;
}
</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>
<h2>Graph2D | Performance</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example is a test of the performance of the Graph2D. Select the amount of datapoints you want to plot and press draw.
You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
<br /><br />
Linear interpolation and no points are the settings that will render quickest. By default, graph2D will downsample when there are more
than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
</div>
<br />
<p>
<span class="label">Number of items:</span><input id="count" value="50000">
<input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
<br />
<span class="label">Interpolation method:</span><input id="interpolation" value="linear">
<input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
<br />
<span class="label">Points style:</span><input id="points" value="none">
<input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
</p>
<div id="visualization"></div>
<script>
var points = 'none';
var interpolation = 'linear';
function togglePoints() {
var pointsOptions = {};
var pointsField = document.getElementById("points");
if (points == "none") {
points = 'circle';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "circle") {
points = 'square';
pointsOptions = {drawPoints: {style: points}};
}
else if (points == "square") {
points = 'none';
pointsOptions = {drawPoints: false};
}
pointsField.value = points;
graph2d.setOptions(pointsOptions);
}
function toggleInterpolation() {
var interpolationOptions = {};
var interpolationField = document.getElementById("interpolation");
if (interpolation == "linear") {
interpolation = 'centripetal';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "centripetal") {
interpolation = 'chordal';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "chordal") {
interpolation = 'uniform';
interpolationOptions = {catmullRom: {parametrization: interpolation}};
}
else if (interpolation == "uniform") {
interpolation = 'linear';
interpolationOptions = {catmullRom: false};
}
interpolationField.value = interpolation;
graph2d.setOptions(interpolationOptions);
}
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var dataset = new vis.DataSet({
type: {start: 'ISODate', end: 'ISODate' }
});
var startPoint = now;
var endPoint = now + 3600000 * 5000;
// create data -- this is seperated into 3 functions so we can update the span.
function createData() {
var span = document.getElementById("description");
span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
setTimeout(generateData,10);
}
function generateData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
var span = document.getElementById("description");
var start = now;
for (var i = 0; i < count; i++) {
var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
newData.push({id: i, x: start + 3600000 * i, y: yval});
}
span.innerHTML = 'Loading data into Graph2D...';
setTimeout(function() {loadDataIntoVis(newData);},10);
}
function loadDataIntoVis(newData) {
var span = document.getElementById("description");
dataset.clear();
dataset.add(newData);
span.innerHTML = 'Done!';
}
document.getElementById('draw').onclick = createData;
document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
document.getElementById('togglePoints').onclick = togglePoints;
var container = document.getElementById('visualization');
var options = {
sampling: true,
drawPoints: {enabled:false, size:3},
catmullRom: false,
start: startPoint,
end: endPoint
};
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

+ 87
- 0
examples/graph2d/default.css View File

@ -0,0 +1,87 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 22
- 0
examples/graph2d/index.html View File

@ -0,0 +1,22 @@
<html>
<head>
<link rel='stylesheet' href='default.css' type='text/css'>
</head>
<body>
<div id="container">
<h1>Graph2D Examples</h1>
<p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_bars.html">02_bars.html</a></p>
<p><a href="03_groups.html">03_groups.html</a></p>
<p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
<p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
<p><a href="06_interpolation.html">06_interpolation.html</a></p>
<p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
<p><a href="08_performance.html">08_performance.html</a></p>
</div>
</body>
</html>

+ 1
- 0
examples/index.html View File

@ -13,6 +13,7 @@
<h1>vis.js examples</h1> <h1>vis.js examples</h1>
<p><a href="graph">graph</a></p> <p><a href="graph">graph</a></p>
<p><a href="graph2d">graph2d</a></p>
<p><a href="graph3d">graph3d</a></p> <p><a href="graph3d">graph3d</a></p>
<p><a href="timeline">timeline</a></p> <p><a href="timeline">timeline</a></p>

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

@ -38,8 +38,9 @@
function createData() { function createData() {
var count = parseInt(document.getElementById('count').value) || 100; var count = parseInt(document.getElementById('count').value) || 100;
var newData = []; var newData = [];
var start = now;
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
newData.push({id: i, content: 'item ' + i, start: start + 24*3600*1000 * i}); // much much faster than now.clone add days
} }
items.clear(); items.clear();
items.add(newData); items.add(newData);

+ 162
- 0
src/DOMutil.js View File

@ -0,0 +1,162 @@
/**
* Created by Alex on 6/20/14.
*/
var DOMutil = {}
/**
* this prepares the JSON container for allocating SVG elements
* @param JSONcontainer
* @private
*/
DOMutil.prepareElements = function(JSONcontainer) {
// cleanup the redundant svgElements;
for (var elementType in JSONcontainer) {
if (JSONcontainer.hasOwnProperty(elementType)) {
JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
JSONcontainer[elementType].used = [];
}
}
};
/**
* this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
* which to remove the redundant elements.
*
* @param JSONcontainer
* @private
*/
DOMutil.cleanupElements = function(JSONcontainer) {
// cleanup the redundant svgElements;
for (var elementType in JSONcontainer) {
if (JSONcontainer.hasOwnProperty(elementType)) {
if (JSONcontainer[elementType].redundant) {
for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
}
JSONcontainer[elementType].redundant = [];
}
}
}
};
/**
* Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
* the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
*
* @param elementType
* @param JSONcontainer
* @param svgContainer
* @returns {*}
* @private
*/
DOMutil.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
var element;
// allocate SVG element, if it doesnt yet exist, create one.
if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
// check if there is an redundant element
if (JSONcontainer[elementType].redundant.length > 0) {
element = JSONcontainer[elementType].redundant[0];
JSONcontainer[elementType].redundant.shift();
}
else {
// create a new element and add it to the SVG
element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
svgContainer.appendChild(element);
}
}
else {
// create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
JSONcontainer[elementType] = {used: [], redundant: []};
svgContainer.appendChild(element);
}
JSONcontainer[elementType].used.push(element);
return element;
};
/**
* Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
* the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
*
* @param elementType
* @param JSONcontainer
* @param DOMContainer
* @returns {*}
* @private
*/
DOMutil.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
var element;
// allocate SVG element, if it doesnt yet exist, create one.
if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
// check if there is an redundant element
if (JSONcontainer[elementType].redundant.length > 0) {
element = JSONcontainer[elementType].redundant[0];
JSONcontainer[elementType].redundant.shift();
}
else {
// create a new element and add it to the SVG
element = document.createElement(elementType);
DOMContainer.appendChild(element);
}
}
else {
// create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
element = document.createElement(elementType);
JSONcontainer[elementType] = {used: [], redundant: []};
DOMContainer.appendChild(element);
}
JSONcontainer[elementType].used.push(element);
return element;
};
/**
* draw a point object. this is a seperate function because it can also be called by the legend.
* The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
* as well.
*
* @param x
* @param y
* @param group
* @param JSONcontainer
* @param svgContainer
* @returns {*}
*/
DOMutil.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
var point;
if (group.options.drawPoints.style == 'circle') {
point = DOMutil.getSVGElement('circle',JSONcontainer,svgContainer);
point.setAttributeNS(null, "cx", x);
point.setAttributeNS(null, "cy", y);
point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
point.setAttributeNS(null, "class", group.className + " point");
}
else {
point = DOMutil.getSVGElement('rect',JSONcontainer,svgContainer);
point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
point.setAttributeNS(null, "width", group.options.drawPoints.size);
point.setAttributeNS(null, "height", group.options.drawPoints.size);
point.setAttributeNS(null, "class", group.className + " point");
}
return point;
};
/**
* draw a bar SVG element centered on the X coordinate
*
* @param x
* @param y
* @param className
*/
DOMutil.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
rect = DOMutil.getSVGElement('rect',JSONcontainer, svgContainer);
rect.setAttributeNS(null, "x", x - 0.5 * width);
rect.setAttributeNS(null, "y", y);
rect.setAttributeNS(null, "width", width);
rect.setAttributeNS(null, "height", height);
rect.setAttributeNS(null, "class", className);
};

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

@ -35,6 +35,7 @@ function Graph (container, data, options) {
// these functions are triggered when the dataset is edited // these functions are triggered when the dataset is edited
this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null}; this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
// set constant values // set constant values
this.constants = { this.constants = {
nodes: { nodes: {
@ -110,8 +111,8 @@ function Graph (container, data, options) {
}, },
hierarchicalRepulsion: { hierarchicalRepulsion: {
enabled: false, enabled: false,
centralGravity: 0.0,
springLength: 100,
centralGravity: 0.5,
springLength: 150,
springConstant: 0.01, springConstant: 0.01,
nodeDistance: 60, nodeDistance: 60,
damping: 0.09 damping: 0.09

+ 1
- 1
src/graph/graphMixins/physics/BarnesHut.js View File

@ -256,7 +256,7 @@ var barnesHutMixin = {
* @private * @private
*/ */
_splitBranch : function(parentBranch) { _splitBranch : function(parentBranch) {
// if the branch is filled with a node, replace the node in the new subset.
// if the branch is shaded with a node, replace the node in the new subset.
var containedNode = null; var containedNode = null;
if (parentBranch.childrenCount == 1) { if (parentBranch.childrenCount == 1) {
containedNode = parentBranch.children.data; containedNode = parentBranch.children.data;

+ 87
- 18
src/graph/graphMixins/physics/HierarchialRepulsion.js View File

@ -26,6 +26,7 @@ var hierarchalRepulsionMixin = {
// repulsing forces between nodes // repulsing forces between nodes
var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance; var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
var minimumDistance = nodeDistance; var minimumDistance = nodeDistance;
var a = a_base / minimumDistance;
// we loop from i over all but the last entree in the array // we loop from i over all but the last entree in the array
// j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
@ -34,29 +35,97 @@ var hierarchalRepulsionMixin = {
node1 = nodes[nodeIndices[i]]; node1 = nodes[nodeIndices[i]];
for (j = i + 1; j < nodeIndices.length; j++) { for (j = i + 1; j < nodeIndices.length; j++) {
node2 = nodes[nodeIndices[j]]; node2 = nodes[nodeIndices[j]];
if (node1.level == node2.level) {
dx = node2.x - node1.x;
dy = node2.y - node1.y;
distance = Math.sqrt(dx * dx + dy * dy);
dx = node2.x - node1.x;
dy = node2.y - node1.y;
distance = Math.sqrt(dx * dx + dy * dy);
var a = a_base / minimumDistance;
if (distance < 2 * minimumDistance) {
repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
// normalize force with
if (distance == 0) {
distance = 0.01;
}
else {
repulsingForce = repulsingForce / distance;
if (distance < 2 * minimumDistance) {
repulsingForce = a * distance + b;
var c = 0.05;
var d = 2 * minimumDistance * 2 * c;
repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
// normalize force with
if (distance == 0) {
distance = 0.01;
}
else {
repulsingForce = repulsingForce / distance;
}
fx = dx * repulsingForce;
fy = dy * repulsingForce;
node1.fx -= fx;
node1.fy -= fy;
node2.fx += fx;
node2.fy += fy;
} }
fx = dx * repulsingForce;
fy = dy * repulsingForce;
}
}
}
},
/**
* this function calculates the effects of the springs in the case of unsmooth curves.
*
* @private
*/
_calculateHierarchicalSpringForces: function () {
var edgeLength, edge, edgeId;
var dx, dy, fx, fy, springForce, distance;
var edges = this.edges;
// forces caused by the edges, modelled as springs
for (edgeId in edges) {
if (edges.hasOwnProperty(edgeId)) {
edge = edges[edgeId];
if (edge.connected) {
// only calculate forces if nodes are in the same sector
if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
// this implies that the edges between big clusters are longer
edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
dx = (edge.from.x - edge.to.x);
dy = (edge.from.y - edge.to.y);
distance = Math.sqrt(dx * dx + dy * dy);
if (distance == 0) {
distance = 0.01;
}
distance = Math.max(0.8*edgeLength,Math.min(1.2*edgeLength, distance));
// the 1/distance is so the fx and fy can be calculated without sine or cosine.
springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
node1.fx -= fx;
node1.fy -= fy;
node2.fx += fx;
node2.fy += fy;
fx = dx * springForce;
fy = dy * springForce;
edge.to.fx -= fx;
edge.to.fy -= fy;
edge.from.fx += fx;
edge.from.fy += fy;
var factor = 5;
if (distance > edgeLength) {
factor = 25;
}
if (edge.from.level > edge.to.level) {
edge.to.fx -= factor*fx;
edge.to.fy -= factor*fy;
}
else if (edge.from.level < edge.to.level) {
edge.from.fx += factor*fx;
edge.from.fy += factor*fy;
}
}
} }
} }
} }

+ 11
- 2
src/graph/graphMixins/physics/PhysicsMixin.js View File

@ -101,7 +101,12 @@ var physicsMixin = {
this._calculateSpringForcesWithSupport(); this._calculateSpringForcesWithSupport();
} }
else { else {
this._calculateSpringForces();
if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
this._calculateHierarchicalSpringForces();
}
else {
this._calculateSpringForces();
}
} }
}, },
@ -181,6 +186,8 @@ var physicsMixin = {
}, },
/** /**
* this function calculates the effects of the springs in the case of unsmooth curves. * this function calculates the effects of the springs in the case of unsmooth curves.
* *
@ -227,6 +234,8 @@ var physicsMixin = {
}, },
/** /**
* This function calculates the springforces on the nodes, accounting for the support nodes. * This function calculates the springforces on the nodes, accounting for the support nodes.
* *
@ -303,7 +312,7 @@ var physicsMixin = {
_loadPhysicsConfiguration: function () { _loadPhysicsConfiguration: function () {
if (this.physicsConfiguration === undefined) { if (this.physicsConfiguration === undefined) {
this.backupConstants = {}; this.backupConstants = {};
util.copyObject(this.constants, this.backupConstants);
util.deepExtend(this.backupConstants,this.constants);
var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"]; var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
this.physicsConfiguration = document.createElement('div'); this.physicsConfiguration = document.createElement('div');

+ 2
- 1
src/module/exports.js View File

@ -34,7 +34,8 @@ var vis = {
Timeline: Timeline, Timeline: Timeline,
Graph: Graph, Graph: Graph,
Graph3d: Graph3d
Graph3d: Graph3d,
Graph2d: Graph2d
}; };
/** /**

+ 215
- 0
src/timeline/DataStep.js View File

@ -0,0 +1,215 @@
/**
* @constructor DataStep
* The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
* end data point. The class itself determines the best scale (step size) based on the
* provided start Date, end Date, and minimumStep.
*
* If minimumStep is provided, the step size is chosen as close as possible
* to the minimumStep but larger than minimumStep. If minimumStep is not
* provided, the scale is set to 1 DAY.
* The minimumStep should correspond with the onscreen size of about 6 characters
*
* Alternatively, you can set a scale by hand.
* After creation, you can initialize the class by executing first(). Then you
* can iterate from the start date to the end date via next(). You can check if
* the end date is reached with the function hasNext(). After each step, you can
* retrieve the current date via getCurrent().
* The DataStep has scales ranging from milliseconds, seconds, minutes, hours,
* days, to years.
*
* Version: 1.2
*
* @param {Date} [start] The start date, for example new Date(2010, 9, 21)
* or new Date(2010, 9, 21, 23, 45, 00)
* @param {Date} [end] The end date
* @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/
function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
// variables
this.current = 0;
this.autoScale = true;
this.stepIndex = 0;
this.step = 1;
this.scale = 1;
this.marginStart;
this.marginEnd;
this.majorSteps = [1, 2, 5, 10];
this.minorSteps = [0.25, 0.5, 1, 2];
this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
}
/**
* Set a new range
* If minimumStep is provided, the step size is chosen as close as possible
* to the minimumStep but larger than minimumStep. If minimumStep is not
* provided, the scale is set to 1 DAY.
* The minimumStep should correspond with the onscreen size of about 6 characters
* @param {Number} [start] The start date and time.
* @param {Number} [end] The end date and time.
* @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/
DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
this._start = start;
this._end = end;
if (this.autoScale) {
this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
}
this.setFirst();
};
/**
* Automatically determine the scale that bests fits the provided minimum step
* @param {Number} [minimumStep] The minimum step size in milliseconds
*/
DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
// round to floor
var size = this._end - this._start;
var safeSize = size * 1.1;
var minimumStepValue = minimumStep * (safeSize / containerHeight);
var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
var minorStepIdx = -1;
var magnitudefactor = Math.pow(10,orderOfMagnitude);
var start = 0;
if (orderOfMagnitude < 0) {
start = orderOfMagnitude;
}
var solutionFound = false;
for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
magnitudefactor = Math.pow(10,i);
for (var j = 0; j < this.minorSteps.length; j++) {
var stepSize = magnitudefactor * this.minorSteps[j];
if (stepSize >= minimumStepValue) {
solutionFound = true;
minorStepIdx = j;
break;
}
}
if (solutionFound == true) {
break;
}
}
this.stepIndex = minorStepIdx;
this.scale = magnitudefactor;
this.step = magnitudefactor * this.minorSteps[minorStepIdx];
};
/**
* Set the range iterator to the start date.
*/
DataStep.prototype.first = function() {
this.setFirst();
};
/**
* Round the current date to the first minor date value
* This must be executed once when the current date is set to start Date
*/
DataStep.prototype.setFirst = function() {
var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
this.marginEnd = this.roundToMinor(niceEnd);
this.marginStart = this.roundToMinor(niceStart);
this.marginRange = this.marginEnd - this.marginStart;
this.current = this.marginEnd;
};
DataStep.prototype.roundToMinor = function(value) {
var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
return rounded + (this.scale * this.minorSteps[this.stepIndex]);
}
else {
return rounded;
}
}
/**
* Check if the there is a next step
* @return {boolean} true if the current date has not passed the end date
*/
DataStep.prototype.hasNext = function () {
return (this.current >= this.marginStart);
};
/**
* Do the next step
*/
DataStep.prototype.next = function() {
var prev = this.current;
this.current -= this.step;
// safety mechanism: if current time is still unchanged, move to the end
if (this.current == prev) {
this.current = this._end;
}
};
/**
* Do the next step
*/
DataStep.prototype.previous = function() {
this.current += this.step;
this.marginEnd += this.step;
this.marginRange = this.marginEnd - this.marginStart;
};
/**
* Get the current datetime
* @return {Number} current The current date
*/
DataStep.prototype.getCurrent = function() {
var toPrecision = '' + Number(this.current).toPrecision(5);
for (var i = toPrecision.length-1; i > 0; i--) {
if (toPrecision[i] == "0") {
toPrecision = toPrecision.slice(0,i);
}
else if (toPrecision[i] == "." || toPrecision[i] == ",") {
toPrecision = toPrecision.slice(0,i);
break;
}
else{
break;
}
}
return toPrecision;
};
/**
* Snap a date to a rounded value.
* The snap intervals are dependent on the current scale and step.
* @param {Date} date the date to be snapped.
* @return {Date} snappedDate
*/
DataStep.prototype.snap = function(date) {
};
/**
* Check if the current value is a major value (for example when the step
* is DAY, a major value is each first day of the MONTH)
* @return {boolean} true if current date is major, else false.
*/
DataStep.prototype.isMajor = function() {
return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
};

+ 893
- 0
src/timeline/Graph2d.js View File

@ -0,0 +1,893 @@
/**
* Create a timeline visualization
* @param {HTMLElement} container
* @param {vis.DataSet | Array | google.visualization.DataTable} [items]
* @param {Object} [options] See Graph2d.setOptions for the available options.
* @constructor
*/
function Graph2d (container, items, options, groups) {
var me = this;
this.defaultOptions = {
start: null,
end: null,
autoResize: true,
orientation: 'bottom',
width: null,
height: null,
maxHeight: null,
minHeight: null
};
this.options = util.deepExtend({}, this.defaultOptions);
// Create the DOM, props, and emitter
this._create(container);
// all components listed here will be repainted automatically
this.components = [];
this.body = {
dom: this.dom,
domProps: this.props,
emitter: {
on: this.on.bind(this),
off: this.off.bind(this),
emit: this.emit.bind(this)
},
util: {
snap: null, // will be specified after TimeAxis is created
toScreen: me._toScreen.bind(me),
toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
toTime: me._toTime.bind(me),
toGlobalTime : me._toGlobalTime.bind(me)
}
};
// range
this.range = new Range(this.body);
this.components.push(this.range);
this.body.range = this.range;
// time axis
this.timeAxis = new TimeAxis(this.body);
this.components.push(this.timeAxis);
this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
// current time bar
this.currentTime = new CurrentTime(this.body);
this.components.push(this.currentTime);
// custom time bar
// Note: time bar will be attached in this.setOptions when selected
this.customTime = new CustomTime(this.body);
this.components.push(this.customTime);
// item set
this.linegraph = new Linegraph(this.body);
this.components.push(this.linegraph);
this.itemsData = null; // DataSet
this.groupsData = null; // DataSet
// apply options
if (options) {
this.setOptions(options);
}
// IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
if (groups) {
this.setGroups(groups);
}
// create itemset
if (items) {
this.setItems(items);
}
else {
this.redraw();
}
}
// turn Graph2d into an event emitter
Emitter(Graph2d.prototype);
/**
* Create the main DOM for the Graph2d: a root panel containing left, right,
* top, bottom, content, and background panel.
* @param {Element} container The container element where the Graph2d will
* be attached.
* @private
*/
Graph2d.prototype._create = function (container) {
this.dom = {};
this.dom.root = document.createElement('div');
this.dom.background = document.createElement('div');
this.dom.backgroundVertical = document.createElement('div');
this.dom.backgroundHorizontalContainer = document.createElement('div');
this.dom.centerContainer = document.createElement('div');
this.dom.leftContainer = document.createElement('div');
this.dom.rightContainer = document.createElement('div');
this.dom.backgroundHorizontal = document.createElement('div');
this.dom.center = document.createElement('div');
this.dom.left = document.createElement('div');
this.dom.right = document.createElement('div');
this.dom.top = document.createElement('div');
this.dom.bottom = document.createElement('div');
this.dom.shadowTop = document.createElement('div');
this.dom.shadowBottom = document.createElement('div');
this.dom.shadowTopLeft = document.createElement('div');
this.dom.shadowBottomLeft = document.createElement('div');
this.dom.shadowTopRight = document.createElement('div');
this.dom.shadowBottomRight = document.createElement('div');
this.dom.background.className = 'vispanel background';
this.dom.backgroundVertical.className = 'vispanel background vertical';
this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
this.dom.centerContainer.className = 'vispanel center';
this.dom.leftContainer.className = 'vispanel left';
this.dom.rightContainer.className = 'vispanel right';
this.dom.top.className = 'vispanel top';
this.dom.bottom.className = 'vispanel bottom';
this.dom.left.className = 'content';
this.dom.center.className = 'content';
this.dom.right.className = 'content';
this.dom.shadowTop.className = 'shadow top';
this.dom.shadowBottom.className = 'shadow bottom';
this.dom.shadowTopLeft.className = 'shadow top';
this.dom.shadowBottomLeft.className = 'shadow bottom';
this.dom.shadowTopRight.className = 'shadow top';
this.dom.shadowBottomRight.className = 'shadow bottom';
this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.backgroundVertical);
this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
this.dom.root.appendChild(this.dom.centerContainer);
this.dom.root.appendChild(this.dom.leftContainer);
this.dom.root.appendChild(this.dom.rightContainer);
this.dom.root.appendChild(this.dom.top);
this.dom.root.appendChild(this.dom.bottom);
this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
this.dom.centerContainer.appendChild(this.dom.center);
this.dom.leftContainer.appendChild(this.dom.left);
this.dom.rightContainer.appendChild(this.dom.right);
this.dom.centerContainer.appendChild(this.dom.shadowTop);
this.dom.centerContainer.appendChild(this.dom.shadowBottom);
this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
this.on('rangechange', this.redraw.bind(this));
this.on('change', this.redraw.bind(this));
this.on('touch', this._onTouch.bind(this));
this.on('pinch', this._onPinch.bind(this));
this.on('dragstart', this._onDragStart.bind(this));
this.on('drag', this._onDrag.bind(this));
// create event listeners for all interesting events, these events will be
// emitted via emitter
this.hammer = Hammer(this.dom.root, {
prevent_default: true
});
this.listeners = {};
var me = this;
var events = [
'touch', 'pinch',
'tap', 'doubletap', 'hold',
'dragstart', 'drag', 'dragend',
'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
];
events.forEach(function (event) {
var listener = function () {
var args = [event].concat(Array.prototype.slice.call(arguments, 0));
me.emit.apply(me, args);
};
me.hammer.on(event, listener);
me.listeners[event] = listener;
});
// size properties of each of the panels
this.props = {
root: {},
background: {},
centerContainer: {},
leftContainer: {},
rightContainer: {},
center: {},
left: {},
right: {},
top: {},
bottom: {},
border: {},
scrollTop: 0,
scrollTopMin: 0
};
this.touch = {}; // store state information needed for touch events
// attach the root panel to the provided container
if (!container) throw new Error('No container provided');
container.appendChild(this.dom.root);
};
/**
* Destroy the Graph2d, clean up all DOM elements and event listeners.
*/
Graph2d.prototype.destroy = function () {
// unbind datasets
this.clear();
// remove all event listeners
this.off();
// stop checking for changed size
this._stopAutoResize();
// remove from DOM
if (this.dom.root.parentNode) {
this.dom.root.parentNode.removeChild(this.dom.root);
}
this.dom = null;
// cleanup hammer touch events
for (var event in this.listeners) {
if (this.listeners.hasOwnProperty(event)) {
delete this.listeners[event];
}
}
this.listeners = null;
this.hammer = null;
// give all components the opportunity to cleanup
this.components.forEach(function (component) {
component.destroy();
});
this.body = null;
};
/**
* Set options. Options will be passed to all components loaded in the Graph2d.
* @param {Object} [options]
* {String} orientation
* Vertical orientation for the Graph2d,
* can be 'bottom' (default) or 'top'.
* {String | Number} width
* Width for the timeline, a number in pixels or
* a css string like '1000px' or '75%'. '100%' by default.
* {String | Number} height
* Fixed height for the Graph2d, a number in pixels or
* a css string like '400px' or '75%'. If undefined,
* The Graph2d will automatically size such that
* its contents fit.
* {String | Number} minHeight
* Minimum height for the Graph2d, a number in pixels or
* a css string like '400px' or '75%'.
* {String | Number} maxHeight
* Maximum height for the Graph2d, a number in pixels or
* a css string like '400px' or '75%'.
* {Number | Date | String} start
* Start date for the visible window
* {Number | Date | String} end
* End date for the visible window
*/
Graph2d.prototype.setOptions = function (options) {
if (options) {
// copy the known options
var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
util.selectiveExtend(fields, this.options, options);
// enable/disable autoResize
this._initAutoResize();
}
// propagate options to all components
this.components.forEach(function (component) {
component.setOptions(options);
});
// TODO: remove deprecation error one day (deprecated since version 0.8.0)
if (options && options.order) {
throw new Error('Option order is deprecated. There is no replacement for this feature.');
}
// redraw everything
this.redraw();
};
/**
* Set a custom time bar
* @param {Date} time
*/
Graph2d.prototype.setCustomTime = function (time) {
if (!this.customTime) {
throw new Error('Cannot get custom time: Custom time bar is not enabled');
}
this.customTime.setCustomTime(time);
};
/**
* Retrieve the current custom time.
* @return {Date} customTime
*/
Graph2d.prototype.getCustomTime = function() {
if (!this.customTime) {
throw new Error('Cannot get custom time: Custom time bar is not enabled');
}
return this.customTime.getCustomTime();
};
/**
* Set items
* @param {vis.DataSet | Array | google.visualization.DataTable | null} items
*/
Graph2d.prototype.setItems = function(items) {
var initialLoad = (this.itemsData == null);
// convert to type DataSet when needed
var newDataSet;
if (!items) {
newDataSet = null;
}
else if (items instanceof DataSet || items instanceof DataView) {
newDataSet = items;
}
else {
// turn an array into a dataset
newDataSet = new DataSet(items, {
type: {
start: 'Date',
end: 'Date'
}
});
}
// set items
this.itemsData = newDataSet;
this.linegraph && this.linegraph.setItems(newDataSet);
if (initialLoad && ('start' in this.options || 'end' in this.options)) {
this.fit();
var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
var end = ('end' in this.options) ? util.convert(this.options.end, 'Date') : null;
this.setWindow(start, end);
}
};
/**
* Set groups
* @param {vis.DataSet | Array | google.visualization.DataTable} groups
*/
Graph2d.prototype.setGroups = function(groups) {
// convert to type DataSet when needed
var newDataSet;
if (!groups) {
newDataSet = null;
}
else if (groups instanceof DataSet || groups instanceof DataView) {
newDataSet = groups;
}
else {
// turn an array into a dataset
newDataSet = new DataSet(groups);
}
this.groupsData = newDataSet;
this.linegraph.setGroups(newDataSet);
};
/**
* Clear the Graph2d. By Default, items, groups and options are cleared.
* Example usage:
*
* timeline.clear(); // clear items, groups, and options
* timeline.clear({options: true}); // clear options only
*
* @param {Object} [what] Optionally specify what to clear. By default:
* {items: true, groups: true, options: true}
*/
Graph2d.prototype.clear = function(what) {
// clear items
if (!what || what.items) {
this.setItems(null);
}
// clear groups
if (!what || what.groups) {
this.setGroups(null);
}
// clear options of timeline and of each of the components
if (!what || what.options) {
this.components.forEach(function (component) {
component.setOptions(component.defaultOptions);
});
this.setOptions(this.defaultOptions); // this will also do a redraw
}
};
/**
* Set Graph2d window such that it fits all items
*/
Graph2d.prototype.fit = function() {
// apply the data range as range
var dataRange = this.getItemRange();
// add 5% space on both sides
var start = dataRange.min;
var end = dataRange.max;
if (start != null && end != null) {
var interval = (end.valueOf() - start.valueOf());
if (interval <= 0) {
// prevent an empty interval
interval = 24 * 60 * 60 * 1000; // 1 day
}
start = new Date(start.valueOf() - interval * 0.05);
end = new Date(end.valueOf() + interval * 0.05);
}
// skip range set if there is no start and end date
if (start === null && end === null) {
return;
}
this.range.setRange(start, end);
};
/**
* Get the data range of the item set.
* @returns {{min: Date, max: Date}} range A range with a start and end Date.
* When no minimum is found, min==null
* When no maximum is found, max==null
*/
Graph2d.prototype.getItemRange = function() {
// calculate min from start filed
var itemsData = this.itemsData,
min = null,
max = null;
if (itemsData) {
// calculate the minimum value of the field 'start'
var minItem = itemsData.min('start');
min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
// Note: we convert first to Date and then to number because else
// a conversion from ISODate to Number will fail
// calculate maximum value of fields 'start' and 'end'
var maxStartItem = itemsData.max('start');
if (maxStartItem) {
max = util.convert(maxStartItem.start, 'Date').valueOf();
}
var maxEndItem = itemsData.max('end');
if (maxEndItem) {
if (max == null) {
max = util.convert(maxEndItem.end, 'Date').valueOf();
}
else {
max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
}
}
}
return {
min: (min != null) ? new Date(min) : null,
max: (max != null) ? new Date(max) : null
};
};
/**
* Set selected items by their id. Replaces the current selection
* Unknown id's are silently ignored.
* @param {Array} [ids] An array with zero or more id's of the items to be
* selected. If ids is an empty array, all items will be
* unselected.
*/
Graph2d.prototype.setSelection = function(ids) {
this.linegraph && this.linegraph.setSelection(ids);
};
/**
* Get the selected items by their id
* @return {Array} ids The ids of the selected items
*/
Graph2d.prototype.getSelection = function() {
return this.linegraph && this.linegraph.getSelection() || [];
};
/**
* Set the visible window. Both parameters are optional, you can change only
* start or only end. Syntax:
*
* TimeLine.setWindow(start, end)
* TimeLine.setWindow(range)
*
* Where start and end can be a Date, number, or string, and range is an
* object with properties start and end.
*
* @param {Date | Number | String | Object} [start] Start date of visible window
* @param {Date | Number | String} [end] End date of visible window
*/
Graph2d.prototype.setWindow = function(start, end) {
if (arguments.length == 1) {
var range = arguments[0];
this.range.setRange(range.start, range.end);
}
else {
this.range.setRange(start, end);
}
};
/**
* Get the visible window
* @return {{start: Date, end: Date}} Visible range
*/
Graph2d.prototype.getWindow = function() {
var range = this.range.getRange();
return {
start: new Date(range.start),
end: new Date(range.end)
};
};
/**
* Force a redraw of the Graph2d. Can be useful to manually redraw when
* option autoResize=false
*/
Graph2d.prototype.redraw = function() {
var resized = false,
options = this.options,
props = this.props,
dom = this.dom;
if (!dom) return; // when destroyed
// update class names
dom.root.className = 'vis timeline root ' + options.orientation;
// update root width and height options
dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
dom.root.style.width = util.option.asSize(options.width, '');
// calculate border widths
props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
props.border.right = props.border.left;
props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
props.border.bottom = props.border.top;
var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
// calculate the heights. If any of the side panels is empty, we set the height to
// minus the border width, such that the border will be invisible
props.center.height = dom.center.offsetHeight;
props.left.height = dom.left.offsetHeight;
props.right.height = dom.right.offsetHeight;
props.top.height = dom.top.clientHeight || -props.border.top;
props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
// TODO: compensate borders when any of the panels is empty.
// apply auto height
// TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
var autoHeight = props.top.height + contentHeight + props.bottom.height +
borderRootHeight + props.border.top + props.border.bottom;
dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
// calculate heights of the content panels
props.root.height = dom.root.offsetHeight;
props.background.height = props.root.height - borderRootHeight;
var containerHeight = props.root.height - props.top.height - props.bottom.height -
borderRootHeight;
props.centerContainer.height = containerHeight;
props.leftContainer.height = containerHeight;
props.rightContainer.height = props.leftContainer.height;
// calculate the widths of the panels
props.root.width = dom.root.offsetWidth;
props.background.width = props.root.width - borderRootWidth;
props.left.width = dom.leftContainer.clientWidth || -props.border.left;
props.leftContainer.width = props.left.width;
props.right.width = dom.rightContainer.clientWidth || -props.border.right;
props.rightContainer.width = props.right.width;
var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
props.center.width = centerWidth;
props.centerContainer.width = centerWidth;
props.top.width = centerWidth;
props.bottom.width = centerWidth;
// resize the panels
dom.background.style.height = props.background.height + 'px';
dom.backgroundVertical.style.height = props.background.height + 'px';
dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
dom.centerContainer.style.height = props.centerContainer.height + 'px';
dom.leftContainer.style.height = props.leftContainer.height + 'px';
dom.rightContainer.style.height = props.rightContainer.height + 'px';
dom.background.style.width = props.background.width + 'px';
dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
dom.backgroundHorizontalContainer.style.width = props.background.width + 'px';
dom.backgroundHorizontal.style.width = props.background.width + 'px';
dom.centerContainer.style.width = props.center.width + 'px';
dom.top.style.width = props.top.width + 'px';
dom.bottom.style.width = props.bottom.width + 'px';
// reposition the panels
dom.background.style.left = '0';
dom.background.style.top = '0';
dom.backgroundVertical.style.left = props.left.width + 'px';
dom.backgroundVertical.style.top = '0';
dom.backgroundHorizontalContainer.style.left = '0';
dom.backgroundHorizontalContainer.style.top = props.top.height + 'px';
dom.centerContainer.style.left = props.left.width + 'px';
dom.centerContainer.style.top = props.top.height + 'px';
dom.leftContainer.style.left = '0';
dom.leftContainer.style.top = props.top.height + 'px';
dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
dom.rightContainer.style.top = props.top.height + 'px';
dom.top.style.left = props.left.width + 'px';
dom.top.style.top = '0';
dom.bottom.style.left = props.left.width + 'px';
dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
// update the scrollTop, feasible range for the offset can be changed
// when the height of the Graph2d or of the contents of the center changed
this._updateScrollTop();
// reposition the scrollable contents
var offset = this.props.scrollTop;
// if (options.orientation == 'bottom') {
// offset += Math.max(this.props.centerContainer.height - this.props.center.height, 0);
// }
dom.center.style.left = '0';
dom.center.style.top = offset + 'px';
dom.backgroundHorizontal.style.left = '0';
dom.backgroundHorizontal.style.top = offset + 'px';
dom.left.style.left = '0';
dom.left.style.top = offset + 'px';
dom.right.style.left = '0';
dom.right.style.top = offset + 'px';
// show shadows when vertical scrolling is available
var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
dom.shadowTop.style.visibility = visibilityTop;
dom.shadowBottom.style.visibility = visibilityBottom;
dom.shadowTopLeft.style.visibility = visibilityTop;
dom.shadowBottomLeft.style.visibility = visibilityBottom;
dom.shadowTopRight.style.visibility = visibilityTop;
dom.shadowBottomRight.style.visibility = visibilityBottom;
// redraw all components
this.components.forEach(function (component) {
resized = component.redraw() || resized;
});
if (resized) {
// keep redrawing until all sizes are settled
this.redraw();
}
};
// TODO: deprecated since version 1.1.0, remove some day
Graph2d.prototype.repaint = function () {
throw new Error('Function repaint is deprecated. Use redraw instead.');
};
/**
* Convert a position on screen (pixels) to a datetime
* @param {int} x Position on the screen in pixels
* @return {Date} time The datetime the corresponds with given position x
* @private
*/
// TODO: move this function to Range
Graph2d.prototype._toTime = function(x) {
var conversion = this.range.conversion(this.props.center.width);
return new Date(x / conversion.scale + conversion.offset);
};
/**
* Convert a datetime (Date object) into a position on the root
* This is used to get the pixel density estimate for the screen, not the center panel
* @param {Date} time A date
* @return {int} x The position on root in pixels which corresponds
* with the given date.
* @private
*/
// TODO: move this function to Range
Graph2d.prototype._toGlobalTime = function(x) {
var conversion = this.range.conversion(this.props.root.width);
return new Date(x / conversion.scale + conversion.offset);
};
/**
* Convert a datetime (Date object) into a position on the screen
* @param {Date} time A date
* @return {int} x The position on the screen in pixels which corresponds
* with the given date.
* @private
*/
// TODO: move this function to Range
Graph2d.prototype._toScreen = function(time) {
var conversion = this.range.conversion(this.props.center.width);
return (time.valueOf() - conversion.offset) * conversion.scale;
};
/**
* Convert a datetime (Date object) into a position on the root
* This is used to get the pixel density estimate for the screen, not the center panel
* @param {Date} time A date
* @return {int} x The position on root in pixels which corresponds
* with the given date.
* @private
*/
// TODO: move this function to Range
Graph2d.prototype._toGlobalScreen = function(time) {
var conversion = this.range.conversion(this.props.root.width);
return (time.valueOf() - conversion.offset) * conversion.scale;
};
/**
* Initialize watching when option autoResize is true
* @private
*/
Graph2d.prototype._initAutoResize = function () {
if (this.options.autoResize == true) {
this._startAutoResize();
}
else {
this._stopAutoResize();
}
};
/**
* Watch for changes in the size of the container. On resize, the Panel will
* automatically redraw itself.
* @private
*/
Graph2d.prototype._startAutoResize = function () {
var me = this;
this._stopAutoResize();
this._onResize = function() {
if (me.options.autoResize != true) {
// stop watching when the option autoResize is changed to false
me._stopAutoResize();
return;
}
if (me.dom.root) {
// check whether the frame is resized
if ((me.dom.root.clientWidth != me.props.lastWidth) ||
(me.dom.root.clientHeight != me.props.lastHeight)) {
me.props.lastWidth = me.dom.root.clientWidth;
me.props.lastHeight = me.dom.root.clientHeight;
me.emit('change');
}
}
};
// add event listener to window resize
util.addEventListener(window, 'resize', this._onResize);
this.watchTimer = setInterval(this._onResize, 1000);
};
/**
* Stop watching for a resize of the frame.
* @private
*/
Graph2d.prototype._stopAutoResize = function () {
if (this.watchTimer) {
clearInterval(this.watchTimer);
this.watchTimer = undefined;
}
// remove event listener on window.resize
util.removeEventListener(window, 'resize', this._onResize);
this._onResize = null;
};
/**
* Start moving the timeline vertically
* @param {Event} event
* @private
*/
Graph2d.prototype._onTouch = function (event) {
this.touch.allowDragging = true;
};
/**
* Start moving the timeline vertically
* @param {Event} event
* @private
*/
Graph2d.prototype._onPinch = function (event) {
this.touch.allowDragging = false;
};
/**
* Start moving the timeline vertically
* @param {Event} event
* @private
*/
Graph2d.prototype._onDragStart = function (event) {
this.touch.initialScrollTop = this.props.scrollTop;
};
/**
* Move the timeline vertically
* @param {Event} event
* @private
*/
Graph2d.prototype._onDrag = function (event) {
// refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen
if (!this.touch.allowDragging) return;
var delta = event.gesture.deltaY;
var oldScrollTop = this._getScrollTop();
var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
if (newScrollTop != oldScrollTop) {
this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
}
};
/**
* Apply a scrollTop
* @param {Number} scrollTop
* @returns {Number} scrollTop Returns the applied scrollTop
* @private
*/
Graph2d.prototype._setScrollTop = function (scrollTop) {
this.props.scrollTop = scrollTop;
this._updateScrollTop();
return this.props.scrollTop;
};
/**
* Update the current scrollTop when the height of the containers has been changed
* @returns {Number} scrollTop Returns the applied scrollTop
* @private
*/
Graph2d.prototype._updateScrollTop = function () {
// recalculate the scrollTopMin
var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
if (scrollTopMin != this.props.scrollTopMin) {
// in case of bottom orientation, change the scrollTop such that the contents
// do not move relative to the time axis at the bottom
if (this.options.orientation == 'bottom') {
this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
}
this.props.scrollTopMin = scrollTopMin;
}
// limit the scrollTop to the feasible scroll range
if (this.props.scrollTop > 0) this.props.scrollTop = 0;
if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
return this.props.scrollTop;
};
/**
* Get the current scrollTop
* @returns {number} scrollTop
* @private
*/
Graph2d.prototype._getScrollTop = function () {
return this.props.scrollTop;
};

+ 0
- 5
src/timeline/Range.js View File

@ -293,21 +293,16 @@ Range.prototype._onDragStart = function(event) {
Range.prototype._onDrag = function (event) { Range.prototype._onDrag = function (event) {
// only allow dragging when configured as movable // only allow dragging when configured as movable
if (!this.options.moveable) return; if (!this.options.moveable) return;
var direction = this.options.direction; var direction = this.options.direction;
validateDirection(direction); validateDirection(direction);
// refuse to drag when we where pinching to prevent the timeline make a jump // refuse to drag when we where pinching to prevent the timeline make a jump
// when releasing the fingers in opposite order from the touch screen // when releasing the fingers in opposite order from the touch screen
if (!this.props.touch.allowDragging) return; if (!this.props.touch.allowDragging) return;
var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY, var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
interval = (this.props.touch.end - this.props.touch.start), interval = (this.props.touch.end - this.props.touch.start),
width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height, width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
diffRange = -delta / width * interval; diffRange = -delta / width * interval;
this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange); this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
this.body.emitter.emit('rangechange', { this.body.emitter.emit('rangechange', {
start: new Date(this.start), start: new Date(this.start),
end: new Date(this.end) end: new Date(this.end)

src/timeline/stack.js → src/timeline/Stack.js View File


+ 35
- 4
src/timeline/Timeline.js View File

@ -42,7 +42,9 @@ function Timeline (container, items, options) {
util: { util: {
snap: null, // will be specified after TimeAxis is created snap: null, // will be specified after TimeAxis is created
toScreen: me._toScreen.bind(me), toScreen: me._toScreen.bind(me),
toTime: me._toTime.bind(me)
toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
toTime: me._toTime.bind(me),
toGlobalTime : me._toGlobalTime.bind(me)
} }
}; };
@ -639,9 +641,9 @@ Timeline.prototype.redraw = function() {
// reposition the scrollable contents // reposition the scrollable contents
var offset = this.props.scrollTop; var offset = this.props.scrollTop;
if (options.orientation == 'bottom') {
offset += Math.max(this.props.centerContainer.height - this.props.center.height, 0);
}
// if (options.orientation == 'bottom') {
// offset += Math.max(this.props.centerContainer.height - this.props.center.height, 0);
// }
dom.center.style.left = '0'; dom.center.style.left = '0';
dom.center.style.top = offset + 'px'; dom.center.style.top = offset + 'px';
dom.left.style.left = '0'; dom.left.style.left = '0';
@ -686,6 +688,19 @@ Timeline.prototype._toTime = function(x) {
return new Date(x / conversion.scale + conversion.offset); return new Date(x / conversion.scale + conversion.offset);
}; };
/**
* Convert a position on the global screen (pixels) to a datetime
* @param {int} x Position on the screen in pixels
* @return {Date} time The datetime the corresponds with given position x
* @private
*/
// TODO: move this function to Range
Timeline.prototype._toGlobalTime = function(x) {
var conversion = this.range.conversion(this.props.root.width);
return new Date(x / conversion.scale + conversion.offset);
};
/** /**
* Convert a datetime (Date object) into a position on the screen * Convert a datetime (Date object) into a position on the screen
* @param {Date} time A date * @param {Date} time A date
@ -699,6 +714,22 @@ Timeline.prototype._toScreen = function(time) {
return (time.valueOf() - conversion.offset) * conversion.scale; return (time.valueOf() - conversion.offset) * conversion.scale;
}; };
/**
* Convert a datetime (Date object) into a position on the root
* This is used to get the pixel density estimate for the screen, not the center panel
* @param {Date} time A date
* @return {int} x The position on root in pixels which corresponds
* with the given date.
* @private
*/
// TODO: move this function to Range
Graph2d.prototype._toGlobalScreen = function(time) {
var conversion = this.range.conversion(this.props.root.width);
return (time.valueOf() - conversion.offset) * conversion.scale;
};
/** /**
* Initialize watching when option autoResize is true * Initialize watching when option autoResize is true
* @private * @private

+ 468
- 0
src/timeline/component/DataAxis.js View File

@ -0,0 +1,468 @@
/**
* A horizontal time axis
* @param {Object} [options] See DataAxis.setOptions for the available
* options.
* @constructor DataAxis
* @extends Component
* @param body
*/
function DataAxis (body, options, svg) {
this.id = util.randomUUID();
this.body = body;
this.defaultOptions = {
orientation: 'left', // supported: 'left', 'right'
showMinorLabels: true,
showMajorLabels: true,
icons: true,
majorLinesOffset: 7,
minorLinesOffset: 4,
labelOffsetX: 10,
labelOffsetY: 2,
iconWidth: 20,
width: '40px',
visible: true
};
this.linegraphSVG = svg;
this.props = {};
this.DOMelements = { // dynamic elements
lines: {},
labels: {}
};
this.dom = {};
this.range = {start:0, end:0};
this.options = util.extend({}, this.defaultOptions);
this.conversionFactor = 1;
this.setOptions(options);
this.width = Number(('' + this.options.width).replace("px",""));
this.minWidth = this.width;
this.height = this.linegraphSVG.offsetHeight;
this.stepPixels = 25;
this.stepPixelsForced = 25;
this.lineOffset = 0;
this.master = true;
this.svgElements = {};
this.groups = {};
this.amountOfGroups = 0;
// create the HTML DOM
this._create();
}
DataAxis.prototype = new Component();
DataAxis.prototype.addGroup = function(label, graphOptions) {
if (!this.groups.hasOwnProperty(label)) {
this.groups[label] = graphOptions;
}
this.amountOfGroups += 1;
};
DataAxis.prototype.updateGroup = function(label, graphOptions) {
this.groups[label] = graphOptions;
};
DataAxis.prototype.removeGroup = function(label) {
if (this.groups.hasOwnProperty(label)) {
delete this.groups[label];
this.amountOfGroups -= 1;
}
};
DataAxis.prototype.setOptions = function (options) {
if (options) {
var redraw = false;
if (this.options.orientation != options.orientation && options.orientation !== undefined) {
redraw = true;
}
var fields = [
'orientation',
'showMinorLabels',
'showMajorLabels',
'icons',
'majorLinesOffset',
'minorLinesOffset',
'labelOffsetX',
'labelOffsetY',
'iconWidth',
'width',
'visible'];
util.selectiveExtend(fields, this.options, options);
this.minWidth = Number(('' + this.options.width).replace("px",""));
if (redraw == true && this.dom.frame) {
this.hide();
this.show();
}
}
};
/**
* Create the HTML DOM for the DataAxis
*/
DataAxis.prototype._create = function() {
this.dom.frame = document.createElement('div');
this.dom.frame.style.width = this.options.width;
this.dom.frame.style.height = this.height;
this.dom.lineContainer = document.createElement('div');
this.dom.lineContainer.style.width = '100%';
this.dom.lineContainer.style.height = this.height;
// create svg element for graph drawing.
this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
this.svg.style.position = "absolute";
this.svg.style.top = '0px';
this.svg.style.height = '100%';
this.svg.style.width = '100%';
this.svg.style.display = "block";
this.dom.frame.appendChild(this.svg);
};
DataAxis.prototype._redrawGroupIcons = function () {
DOMutil.prepareElements(this.svgElements);
var x;
var iconWidth = this.options.iconWidth;
var iconHeight = 15;
var iconOffset = 4;
var y = iconOffset + 0.5 * iconHeight;
if (this.options.orientation == 'left') {
x = iconOffset;
}
else {
x = this.width - iconWidth - iconOffset;
}
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
y += iconHeight + iconOffset;
}
}
DOMutil.cleanupElements(this.svgElements);
};
/**
* Create the HTML DOM for the DataAxis
*/
DataAxis.prototype.show = function() {
if (!this.dom.frame.parentNode) {
if (this.options.orientation == 'left') {
this.body.dom.left.appendChild(this.dom.frame);
}
else {
this.body.dom.right.appendChild(this.dom.frame);
}
}
if (!this.dom.lineContainer.parentNode) {
this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
}
};
/**
* Create the HTML DOM for the DataAxis
*/
DataAxis.prototype.hide = function() {
if (this.dom.frame.parentNode) {
this.dom.frame.parentNode.removeChild(this.dom.frame);
}
if (this.dom.lineContainer.parentNode) {
this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
}
};
/**
* Set a range (start and end)
* @param end
* @param start
* @param end
*/
DataAxis.prototype.setRange = function (start, end) {
this.range.start = start;
this.range.end = end;
};
/**
* Repaint the component
* @return {boolean} Returns true if the component is resized
*/
DataAxis.prototype.redraw = function () {
var changeCalled = false;
if (this.amountOfGroups == 0) {
this.hide();
}
else {
this.show();
this.height = Number(this.linegraphSVG.style.height.replace("px",""));
// svg offsetheight did not work in firefox and explorer...
this.dom.lineContainer.style.height = this.height + 'px';
this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
var props = this.props;
var frame = this.dom.frame;
// update classname
frame.className = 'dataaxis';
// calculate character width and height
this._calculateCharSize();
var orientation = this.options.orientation;
var showMinorLabels = this.options.showMinorLabels;
var showMajorLabels = this.options.showMajorLabels;
// determine the width and height of the elemens for the axis
props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
props.minorLineHeight = 1;
props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
props.majorLineHeight = 1;
// take frame offline while updating (is almost twice as fast)
if (orientation == 'left') {
frame.style.top = '0';
frame.style.left = '0';
frame.style.bottom = '';
frame.style.width = this.width + 'px';
frame.style.height = this.height + "px";
}
else { // right
frame.style.top = '';
frame.style.bottom = '0';
frame.style.left = '0';
frame.style.width = this.width + 'px';
frame.style.height = this.height + "px";
}
changeCalled = this._redrawLabels();
if (this.options.icons == true) {
this._redrawGroupIcons();
}
}
return changeCalled;
};
/**
* Repaint major and minor text labels and vertical grid lines
* @private
*/
DataAxis.prototype._redrawLabels = function () {
DOMutil.prepareElements(this.DOMelements);
var orientation = this.options['orientation'];
// calculate range and step (step such that we have space for 7 characters per label)
var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight);
this.step = step;
step.first();
// get the distance in pixels for a step
var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
this.stepPixels = stepPixels;
var amountOfSteps = this.height / stepPixels;
var stepDifference = 0;
if (this.master == false) {
stepPixels = this.stepPixelsForced;
stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
for (var i = 0; i < 0.5 * stepDifference; i++) {
step.previous();
}
amountOfSteps = this.height / stepPixels;
}
this.valueAtZero = step.marginEnd;
var marginStartPos = 0;
// do not draw the first label
var max = 1;
step.next();
this.maxLabelSize = 0;
var y = 0;
while (max < Math.round(amountOfSteps)) {
y = Math.round(max * stepPixels);
marginStartPos = max * stepPixels;
var isMajor = step.isMajor();
if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
}
if (isMajor && this.options['showMajorLabels'] && this.master == true ||
this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
if (y >= 0) {
this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
}
this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
}
else {
this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
}
step.next();
max++;
}
this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
// this will resize the yAxis to accomodate the labels.
if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
DOMutil.cleanupElements(this.DOMelements);
this.redraw();
return true;
}
// this will resize the yAxis if it is too big for the labels.
else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
this.options.width = this.width + "px";
DOMutil.cleanupElements(this.DOMelements);
this.redraw();
return true;
}
else {
DOMutil.cleanupElements(this.DOMelements);
return false;
}
};
/**
* Create a label for the axis at position x
* @private
* @param y
* @param text
* @param orientation
* @param className
* @param characterHeight
*/
DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
// reuse redundant label
var label = DOMutil.getDOMElement('div',this.DOMelements, this.dom.frame); //this.dom.redundant.labels.shift();
label.className = className;
label.innerHTML = text;
if (orientation == 'left') {
label.style.left = '-' + this.options.labelOffsetX + 'px';
label.style.textAlign = "right";
}
else {
label.style.right = '-' + this.options.labelOffsetX + 'px';
label.style.textAlign = "left";
}
label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
text += '';
var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
if (this.maxLabelSize < text.length * largestWidth) {
this.maxLabelSize = text.length * largestWidth;
}
};
/**
* Create a minor line for the axis at position y
* @param y
* @param orientation
* @param className
* @param offset
* @param width
*/
DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
if (this.master == true) {
var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
line.className = className;
line.innerHTML = '';
if (orientation == 'left') {
line.style.left = (this.width - offset) + 'px';
}
else {
line.style.right = (this.width - offset) + 'px';
}
line.style.width = width + 'px';
line.style.top = y + 'px';
}
};
DataAxis.prototype.convertValue = function (value) {
var invertedValue = this.valueAtZero - value;
var convertedValue = invertedValue * this.conversionFactor;
return convertedValue; // the -2 is to compensate for the borders
};
/**
* Determine the size of text on the axis (both major and minor axis).
* The size is calculated only once and then cached in this.props.
* @private
*/
DataAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the minor axis
if (!('minorCharHeight' in this.props)) {
var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('DIV');
measureCharMinor.className = 'yAxis minor measure';
measureCharMinor.appendChild(textMinor);
this.dom.frame.appendChild(measureCharMinor);
this.props.minorCharHeight = measureCharMinor.clientHeight;
this.props.minorCharWidth = measureCharMinor.clientWidth;
this.dom.frame.removeChild(measureCharMinor);
}
if (!('majorCharHeight' in this.props)) {
var textMajor = document.createTextNode('0');
var measureCharMajor = document.createElement('DIV');
measureCharMajor.className = 'yAxis major measure';
measureCharMajor.appendChild(textMajor);
this.dom.frame.appendChild(measureCharMajor);
this.props.majorCharHeight = measureCharMajor.clientHeight;
this.props.majorCharWidth = measureCharMajor.clientWidth;
this.dom.frame.removeChild(measureCharMajor);
}
};
/**
* Snap a date to a rounded value.
* The snap intervals are dependent on the current scale and step.
* @param {Date} date the date to be snapped.
* @return {Date} snappedDate
*/
DataAxis.prototype.snap = function(date) {
return this.step.snap(date);
};

+ 116
- 0
src/timeline/component/GraphGroup.js View File

@ -0,0 +1,116 @@
/**
* @constructor Group
* @param {Number | String} groupId
* @param {Object} data
* @param {ItemSet} itemSet
*/
function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
this.id = groupId;
var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
this.options = util.selectiveBridgeObject(fields,options);
this.usingDefaultStyle = group.className === undefined;
this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
this.zeroPosition = 0;
this.update(group);
if (this.usingDefaultStyle == true) {
this.groupsUsingDefaultStyles[0] += 1;
}
this.itemsData = [];
}
GraphGroup.prototype.setItems = function(items) {
if (items != null) {
this.itemsData = items;
if (this.options.sort == true) {
this.itemsData.sort(function (a,b) {return a.x - b.x;})
}
}
else {
this.itemsData = [];
}
}
GraphGroup.prototype.setZeroPosition = function(pos) {
this.zeroPosition = pos;
}
GraphGroup.prototype.setOptions = function(options) {
if (options !== undefined) {
var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
util.selectiveDeepExtend(fields, this.options, options);
util.mergeOptions(this.options, options,'catmullRom');
util.mergeOptions(this.options, options,'drawPoints');
util.mergeOptions(this.options, options,'shaded');
if (options.catmullRom) {
if (typeof options.catmullRom == 'object') {
if (options.catmullRom.parametrization) {
if (options.catmullRom.parametrization == 'uniform') {
this.options.catmullRom.alpha = 0;
}
else if (options.catmullRom.parametrization == 'chordal') {
this.options.catmullRom.alpha = 1.0;
}
else {
this.options.catmullRom.parametrization = 'centripetal';
this.options.catmullRom.alpha = 0.5;
}
}
}
}
}
};
GraphGroup.prototype.update = function(group) {
this.group = group;
this.content = group.content || 'graph';
this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
this.setOptions(group.options);
};
GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
var fillHeight = iconHeight * 0.5;
var path, fillPath;
var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
outline.setAttributeNS(null, "x", x);
outline.setAttributeNS(null, "y", y - fillHeight);
outline.setAttributeNS(null, "width", iconWidth);
outline.setAttributeNS(null, "height", 2*fillHeight);
outline.setAttributeNS(null, "class", "outline");
if (this.options.style == 'line') {
path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
path.setAttributeNS(null, "class", this.className);
path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
if (this.options.shaded.enabled == true) {
fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
if (this.options.shaded.orientation == 'top') {
fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
"L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
}
else {
fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
"L"+x+"," + (y + fillHeight) + " " +
"L"+ (x + iconWidth) + "," + (y + fillHeight) +
"L"+ (x + iconWidth) + ","+y);
}
fillPath.setAttributeNS(null, "class", this.className + " iconFill");
}
if (this.options.drawPoints.enabled == true) {
DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
}
}
else {
var barWidth = Math.round(0.3 * iconWidth);
var bar1Height = Math.round(0.4 * iconHeight);
var bar2Height = Math.round(0.75 * iconHeight);
var offset = Math.round((iconWidth - (2 * barWidth))/3);
DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
}
}

+ 3
- 68
src/timeline/component/Group.js View File

@ -324,14 +324,14 @@ Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range
// If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime) // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
if (newVisibleItems.length == 0) { if (newVisibleItems.length == 0) {
initialPosByStart = this._binarySearch(orderedItems, range, false);
initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
} }
else { else {
initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]); initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
} }
// use visible search to find a visible ItemRange (only based on endTime) // use visible search to find a visible ItemRange (only based on endTime)
var initialPosByEnd = this._binarySearch(orderedItems, range, true);
var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
// if we found a initial ID to use, trace it up and down until we meet an invisible item. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
if (initialPosByStart != -1) { if (initialPosByStart != -1) {
@ -356,72 +356,7 @@ Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range
return newVisibleItems; return newVisibleItems;
}; };
/**
* This function does a binary search for a visible item. The user can select either the this.orderedItems.byStart or .byEnd
* arrays. This is done by giving a boolean value true if you want to use the byEnd.
* This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
* if the time we selected (start or end) is within the current range).
*
* The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
* before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
* either the start OR end time has to be in the range.
*
* @param {{byStart: Item[], byEnd: Item[]}} orderedItems
* @param {{start: number, end: number}} range
* @param {Boolean} byEnd
* @returns {number}
* @private
*/
Group.prototype._binarySearch = function(orderedItems, range, byEnd) {
var array = [];
var byTime = byEnd ? 'end' : 'start';
if (byEnd == true) {array = orderedItems.byEnd; }
else {array = orderedItems.byStart;}
var interval = range.end - range.start;
var found = false;
var low = 0;
var high = array.length;
var guess = Math.floor(0.5*(high+low));
var newGuess;
if (high == 0) {guess = -1;}
else if (high == 1) {
if ((array[guess].data[byTime] > range.start - interval) && (array[guess].data[byTime] < range.end)) {
guess = 0;
}
else {
guess = -1;
}
}
else {
high -= 1;
while (found == false) {
if ((array[guess].data[byTime] > range.start - interval) && (array[guess].data[byTime] < range.end)) {
found = true;
}
else {
if (array[guess].data[byTime] < range.start - interval) { // it is too small --> increase low
low = Math.floor(0.5*(high+low));
}
else { // it is too big --> decrease high
high = Math.floor(0.5*(high+low));
}
newGuess = Math.floor(0.5*(high+low));
// not in list;
if (guess == newGuess) {
guess = -1;
found = true;
}
else {
guess = newGuess;
}
}
}
}
return guess;
};
/** /**
* this function checks if an item is invisible. If it is NOT we make it visible * this function checks if an item is invisible. If it is NOT we make it visible

+ 177
- 0
src/timeline/component/Legend.js View File

@ -0,0 +1,177 @@
/**
* Created by Alex on 6/17/14.
*/
function Legend(body, options, side) {
this.body = body;
this.defaultOptions = {
enabled: true,
icons: true,
iconSize: 20,
iconSpacing: 6,
left: {
visible: true,
position: 'top-left' // top/bottom - left,center,right
},
right: {
visible: true,
position: 'top-left' // top/bottom - left,center,right
}
}
this.side = side;
this.options = util.extend({},this.defaultOptions);
this.svgElements = {};
this.dom = {};
this.groups = {};
this.amountOfGroups = 0;
this._create();
this.setOptions(options);
};
Legend.prototype = new Component();
Legend.prototype.addGroup = function(label, graphOptions) {
if (!this.groups.hasOwnProperty(label)) {
this.groups[label] = graphOptions;
}
this.amountOfGroups += 1;
};
Legend.prototype.updateGroup = function(label, graphOptions) {
this.groups[label] = graphOptions;
};
Legend.prototype.removeGroup = function(label) {
if (this.groups.hasOwnProperty(label)) {
delete this.groups[label];
this.amountOfGroups -= 1;
}
};
Legend.prototype._create = function() {
this.dom.frame = document.createElement('div');
this.dom.frame.className = 'legend';
this.dom.frame.style.position = "absolute";
this.dom.frame.style.top = "10px";
this.dom.frame.style.display = "block";
this.dom.textArea = document.createElement('div');
this.dom.textArea.className = 'legendText';
this.dom.textArea.style.position = "relative";
this.dom.textArea.style.top = "0px";
this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
this.svg.style.position = 'absolute';
this.svg.style.top = 0 +'px';
this.svg.style.width = this.options.iconSize + 5 + 'px';
this.dom.frame.appendChild(this.svg);
this.dom.frame.appendChild(this.dom.textArea);
}
/**
* Hide the component from the DOM
*/
Legend.prototype.hide = function() {
// remove the frame containing the items
if (this.dom.frame.parentNode) {
this.dom.frame.parentNode.removeChild(this.dom.frame);
}
};
/**
* Show the component in the DOM (when not already visible).
* @return {Boolean} changed
*/
Legend.prototype.show = function() {
// show frame containing the items
if (!this.dom.frame.parentNode) {
this.body.dom.center.appendChild(this.dom.frame);
}
};
Legend.prototype.setOptions = function(options) {
var fields = ['enabled','orientation','icons','left','right'];
util.selectiveDeepExtend(fields, this.options, options);
}
Legend.prototype.redraw = function() {
if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
this.hide();
}
else {
this.show();
if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
this.dom.frame.style.left = '4px';
this.dom.frame.style.textAlign = "left";
this.dom.textArea.style.textAlign = "left";
this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
this.dom.textArea.style.right = '';
this.svg.style.left = 0 +'px';
this.svg.style.right = '';
}
else {
this.dom.frame.style.right = '4px';
this.dom.frame.style.textAlign = "right";
this.dom.textArea.style.textAlign = "right";
this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
this.dom.textArea.style.left = '';
this.svg.style.right = 0 +'px';
this.svg.style.left = '';
}
if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
this.dom.frame.style.bottom = '';
}
else {
this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
this.dom.frame.style.top = '';
}
if (this.options.icons == false) {
this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
this.dom.textArea.style.right = '';
this.dom.textArea.style.left = '';
this.svg.style.width = '0px';
}
else {
this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
this.drawLegendIcons();
}
var content = "";
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
content += this.groups[groupId].content + '<br />';
}
}
this.dom.textArea.innerHTML = content;
this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
}
}
Legend.prototype.drawLegendIcons = function() {
if (this.dom.frame.parentNode) {
DOMutil.prepareElements(this.svgElements);
var padding = window.getComputedStyle(this.dom.frame).paddingTop;
var iconOffset = Number(padding.replace("px",''));
var x = iconOffset;
var iconWidth = this.options.iconSize;
var iconHeight = 0.75 * this.options.iconSize;
var y = iconOffset + 0.5 * iconHeight + 3;
this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
y += iconHeight + this.options.iconSpacing;
}
}
DOMutil.cleanupElements(this.svgElements);
}
}

+ 1067
- 0
src/timeline/component/Linegraph.js
File diff suppressed because it is too large
View File


+ 61
- 0
src/timeline/component/css/dataaxis.css View File

@ -0,0 +1,61 @@
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}

+ 108
- 0
src/timeline/component/css/pathStyles.css View File

@ -0,0 +1,108 @@
.vis.timeline .graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis.timeline .outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
fill-opacity:0.3;
stroke: none;
}

+ 283
- 9
src/util.js View File

@ -110,17 +110,56 @@ util.selectiveExtend = function (props, a, b) {
throw new Error('Array with property names expected as first argument'); throw new Error('Array with property names expected as first argument');
} }
for (var i = 1, len = arguments.length; i < len; i++) {
for (var i = 2; i < arguments.length; i++) {
var other = arguments[i]; var other = arguments[i];
for (var p = 0, pp = props.length; p < pp; p++) {
for (var p = 0; p < props.length; p++) {
var prop = props[p]; var prop = props[p];
if (other.hasOwnProperty(prop)) { if (other.hasOwnProperty(prop)) {
a[prop] = other[prop]; a[prop] = other[prop];
} }
} }
} }
return a;
};
/**
* Extend object a with selected properties of object b or a series of objects
* Only properties with defined values are copied
* @param {Array.<String>} props
* @param {Object} a
* @param {... Object} b
* @return {Object} a
*/
util.selectiveDeepExtend = function (props, a, b) {
// TODO: add support for Arrays to deepExtend
if (Array.isArray(b)) {
throw new TypeError('Arrays are not supported by deepExtend');
}
for (var i = 2; i < arguments.length; i++) {
var other = arguments[i];
for (var p = 0; p < props.length; p++) {
var prop = props[p];
if (other.hasOwnProperty(prop)) {
if (b[prop] && b[prop].constructor === Object) {
if (a[prop] === undefined) {
a[prop] = {};
}
if (a[prop].constructor === Object) {
util.deepExtend(a[prop], b[prop]);
}
else {
a[prop] = b[prop];
}
} else if (Array.isArray(b[prop])) {
throw new TypeError('Arrays are not supported by deepExtend');
} else {
a[prop] = b[prop];
}
}
}
}
return a; return a;
}; };
@ -975,16 +1014,251 @@ util.isValidHex = function(hex) {
return isOk; return isOk;
}; };
util.copyObject = function(objectFrom, objectTo) {
for (var i in objectFrom) {
if (objectFrom.hasOwnProperty(i)) {
if (typeof objectFrom[i] == "object") {
objectTo[i] = {};
util.copyObject(objectFrom[i], objectTo[i]);
/**
* This recursively redirects the prototype of JSON objects to the referenceObject
* This is used for default options.
*
* @param referenceObject
* @returns {*}
*/
util.selectiveBridgeObject = function(fields, referenceObject) {
if (typeof referenceObject == "object") {
var objectTo = Object.create(referenceObject);
for (var i = 0; i < fields.length; i++) {
if (referenceObject.hasOwnProperty(fields[i])) {
if (typeof referenceObject[fields[i]] == "object") {
objectTo[fields[i]] = util.bridgeObject(referenceObject[fields[i]]);
}
}
}
return objectTo;
}
else {
return null;
}
};
/**
* This recursively redirects the prototype of JSON objects to the referenceObject
* This is used for default options.
*
* @param referenceObject
* @returns {*}
*/
util.bridgeObject = function(referenceObject) {
if (typeof referenceObject == "object") {
var objectTo = Object.create(referenceObject);
for (var i in referenceObject) {
if (referenceObject.hasOwnProperty(i)) {
if (typeof referenceObject[i] == "object") {
objectTo[i] = util.bridgeObject(referenceObject[i]);
}
}
}
return objectTo;
}
else {
return null;
}
};
/**
* this is used to set the options of subobjects in the options object. A requirement of these subobjects
* is that they have an 'enabled' element which is optional for the user but mandatory for the program.
*
* @param [object] mergeTarget | this is either this.options or the options used for the groups.
* @param [object] options | options
* @param [String] option | this is the option key in the options argument
* @private
*/
util.mergeOptions = function (mergeTarget, options, option) {
if (options[option] !== undefined) {
if (typeof options[option] == 'boolean') {
mergeTarget[option].enabled = options[option];
}
else {
mergeTarget[option].enabled = true;
for (prop in options[option]) {
if (options[option].hasOwnProperty(prop)) {
mergeTarget[option][prop] = options[option][prop];
}
}
}
}
}
/**
* this is used to set the options of subobjects in the options object. A requirement of these subobjects
* is that they have an 'enabled' element which is optional for the user but mandatory for the program.
*
* @param [object] mergeTarget | this is either this.options or the options used for the groups.
* @param [object] options | options
* @param [String] option | this is the option key in the options argument
* @private
*/
util.mergeOptions = function (mergeTarget, options, option) {
if (options[option] !== undefined) {
if (typeof options[option] == 'boolean') {
mergeTarget[option].enabled = options[option];
}
else {
mergeTarget[option].enabled = true;
for (prop in options[option]) {
if (options[option].hasOwnProperty(prop)) {
mergeTarget[option][prop] = options[option][prop];
}
}
}
}
}
/**
* This function does a binary search for a visible item. The user can select either the this.orderedItems.byStart or .byEnd
* arrays. This is done by giving a boolean value true if you want to use the byEnd.
* This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
* if the time we selected (start or end) is within the current range).
*
* The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
* before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
* either the start OR end time has to be in the range.
*
* @param {{byStart: Item[], byEnd: Item[]}} orderedItems
* @param {{start: number, end: number}} range
* @param {Boolean} byEnd
* @returns {number}
* @private
*/
util.binarySearch = function(orderedItems, range, field, field2) {
var array = orderedItems;
var interval = range.end - range.start;
var found = false;
var low = 0;
var high = array.length;
var guess = Math.floor(0.5*(high+low));
var newGuess;
var value;
if (high == 0) {guess = -1;}
else if (high == 1) {
value = field2 === undefined ? array[guess][field] : array[guess][field][field2];
if ((value > range.start - interval) && (value < range.end)) {
guess = 0;
}
else {
guess = -1;
}
}
else {
high -= 1;
while (found == false) {
value = field2 === undefined ? array[guess][field] : array[guess][field][field2];
if ((value > range.start - interval) && (value < range.end)) {
found = true;
} }
else { else {
objectTo[i] = objectFrom[i];
if (value < range.start - interval) { // it is too small --> increase low
low = Math.floor(0.5*(high+low));
}
else { // it is too big --> decrease high
high = Math.floor(0.5*(high+low));
}
newGuess = Math.floor(0.5*(high+low));
// not in list;
if (guess == newGuess) {
guess = -1;
found = true;
}
else {
guess = newGuess;
}
} }
} }
} }
return guess;
}; };
/**
* This function does a binary search for a visible item. The user can select either the this.orderedItems.byStart or .byEnd
* arrays. This is done by giving a boolean value true if you want to use the byEnd.
* This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
* if the time we selected (start or end) is within the current range).
*
* The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
* before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
* either the start OR end time has to be in the range.
*
* @param {Array} orderedItems
* @param {{start: number, end: number}} target
* @param {Boolean} byEnd
* @returns {number}
* @private
*/
util.binarySearchGeneric = function(orderedItems, target, field, sidePreference) {
var array = orderedItems;
var found = false;
var low = 0;
var high = array.length;
var guess = Math.floor(0.5*(high+low));
var newGuess;
var prevValue, value, nextValue;
if (high == 0) {guess = -1;}
else if (high == 1) {
value = array[guess][field];
if (value == target) {
guess = 0;
}
else {
guess = -1;
}
}
else {
high -= 1;
while (found == false) {
prevValue = array[Math.max(0,guess - 1)][field];
value = array[guess][field];
nextValue = array[Math.min(array.length-1,guess + 1)][field];
if (value == target || prevValue < target && value > target || value < target && nextValue > target) {
found = true;
if (value != target) {
if (sidePreference == 'before') {
if (prevValue < target && value > target) {
guess = Math.max(0,guess - 1);
}
}
else {
if (value < target && nextValue > target) {
guess = Math.min(array.length-1,guess + 1);
}
}
}
}
else {
if (value < target) { // it is too small --> increase low
low = Math.floor(0.5*(high+low));
}
else { // it is too big --> decrease high
high = Math.floor(0.5*(high+low));
}
newGuess = Math.floor(0.5*(high+low));
// not in list;
if (guess == newGuess) {
guess = -2;
found = true;
}
else {
guess = newGuess;
}
}
}
}
return guess;
};

Loading…
Cancel
Save