fully finalized with docs and examples

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 2.0.1-SNAPSHOT
- * @date    2014-06-26
+ * @date    2014-06-27
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -430,7 +430,6 @@ util.selectiveExtend = function (props, a, b) {
       }
     }
   }
-
   return a;
 };
 
@@ -1325,19 +1324,53 @@ util.isValidHex = function(hex) {
   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]]);
+        }
       }
-      else {
-        objectTo[i] = objectFrom[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;
   }
-  return objectTo;
 };
 
 
@@ -1350,7 +1383,7 @@ util.copyObject = function(objectFrom, objectTo) {
  * @param [String] option      | this is the option key in the options argument
  * @private
  */
-util._mergeOptions = function (mergeTarget, options, option) {
+util.mergeOptions = function (mergeTarget, options, option) {
   if (options[option] !== undefined) {
     if (typeof options[option] == 'boolean') {
       mergeTarget[option].enabled = options[option];
@@ -1367,6 +1400,34 @@ util._mergeOptions = function (mergeTarget, options, option) {
 }
 
 
+/**
+ * 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.
@@ -1659,7 +1720,7 @@ DOMutil.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
 };
 
 /**
- * draw a bar SVG element
+ * draw a bar SVG element centered on the X coordinate
  *
  * @param x
  * @param y
@@ -1667,8 +1728,8 @@ DOMutil.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
  */
 DOMutil.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
   rect = DOMutil.getSVGElement('rect',JSONcontainer, svgContainer);
-  rect.setAttributeNS(null, "x", Math.round(x - 0.5 * width));
-  rect.setAttributeNS(null, "y", Math.round(y));
+  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);
@@ -2893,7 +2954,7 @@ DataView.prototype.unsubscribe = DataView.prototype.off;
 function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
   this.id = groupId;
   var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
-  this.options = util.selectiveDeepExtend(fields,{},options);
+  this.options = util.selectiveBridgeObject(fields,options);
   this.usingDefaultStyle = group.className === undefined;
   this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
   this.zeroPosition = 0;
@@ -2922,12 +2983,12 @@ GraphGroup.prototype.setZeroPosition = function(pos) {
 
 GraphGroup.prototype.setOptions = function(options) {
   if (options !== undefined) {
-    var fields = ['yAxisOrientation','style','barChart','sort'];
+    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');
+    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') {
@@ -3219,7 +3280,8 @@ function DataAxis (body, options, svg) {
   this.conversionFactor = 1;
 
   this.setOptions(options);
-  this.width = Number(this.options.width.replace("px",""));
+  this.width = Number(('' + this.options.width).replace("px",""));
+  this.minWidth = this.width;
   this.height = this.linegraphSVG.offsetHeight;
 
   this.stepPixels = 25;
@@ -3278,6 +3340,9 @@ DataAxis.prototype.setOptions = function (options) {
       '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();
@@ -3391,7 +3456,7 @@ DataAxis.prototype.redraw = function () {
     // svg offsetheight did not work in firefox and explorer...
 
     this.dom.lineContainer.style.height = this.height + 'px';
-    this.width = this.options.visible ? Number(this.options.width.replace("px","")) : 0;
+    this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
 
     var props = this.props;
     var frame = this.dom.frame;
@@ -3517,8 +3582,8 @@ DataAxis.prototype._redrawLabels = function () {
     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.maxLabelSize + offset;
+  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();
@@ -3668,7 +3733,8 @@ function Linegraph(body, options) {
     },
     style: 'line', // line, bar
     barChart: {
-      width: 50
+      width: 50,
+      align: 'center' // left, center, right
     },
     catmullRom: {
       enabled: true,
@@ -3809,10 +3875,10 @@ Linegraph.prototype.setOptions = function(options) {
   if (options) {
     var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
     util.selectiveDeepExtend(fields, this.options, options);
-    util._mergeOptions(this.options, options,'catmullRom');
-    util._mergeOptions(this.options, options,'drawPoints');
-    util._mergeOptions(this.options, options,'shaded');
-    util._mergeOptions(this.options, options,'legend');
+    util.mergeOptions(this.options, options,'catmullRom');
+    util.mergeOptions(this.options, options,'drawPoints');
+    util.mergeOptions(this.options, options,'shaded');
+    util.mergeOptions(this.options, options,'legend');
 
     if (options.catmullRom) {
       if (typeof options.catmullRom == 'object') {
@@ -3977,7 +4043,7 @@ Linegraph.prototype._onUpdate = function(ids) {
   this.redraw();
 };
 Linegraph.prototype._onAdd          = function (ids) {this._onUpdate(ids);};
-Linegraph.prototype._onRemove       = Linegraph.prototype._onUpdate;
+Linegraph.prototype._onRemove       = function (ids) {this._onUpdate(ids);};
 Linegraph.prototype._onUpdateGroups  = function (groupIds) {
   for (var i = 0; i < groupIds.length; i++) {
     var group = this.groupsData.get(groupIds[i]);
@@ -3987,7 +4053,7 @@ Linegraph.prototype._onUpdateGroups  = function (groupIds) {
   this._updateGraph();
   this.redraw();
 };
-Linegraph.prototype._onAddGroups = Linegraph.prototype._onUpdateGroups;
+Linegraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
 
 Linegraph.prototype._onRemoveGroups = function (groupIds) {
   for (var i = 0; i < groupIds.length; i++) {
@@ -4128,11 +4194,18 @@ Linegraph.prototype._updateUngrouped = function() {
       this.legendLeft.removeGroup(UNGROUPED);
       this.legendRight.removeGroup(UNGROUPED);
       this.yAxisLeft.removeGroup(UNGROUPED);
-      this.yAxisLeft.removeGroup(UNGROUPED);
+      this.yAxisRight.removeGroup(UNGROUPED);
     }
 //    console.log("getting amount ungrouped",new Date() - t1);
 //    console.log("putting in ungrouped",new Date() - t0);
   }
+  else {
+    delete this.groups[UNGROUPED];
+    this.legendLeft.removeGroup(UNGROUPED);
+    this.legendRight.removeGroup(UNGROUPED);
+    this.yAxisLeft.removeGroup(UNGROUPED);
+    this.yAxisRight.removeGroup(UNGROUPED);
+  }
 
   this.legendLeft.redraw();
   this.legendRight.redraw();
@@ -4390,22 +4463,26 @@ Linegraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
 Linegraph.prototype._drawBarGraph = function (dataset, group) {
   if (dataset != null) {
     if (dataset.length > 0) {
-      var width, coreDistance;
+      var coreDistance;
       var minWidth = 0.1 * group.options.barChart.width;
+      var offset = 0;
+      var width = group.options.barChart.width;
+
+      if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
+      else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
 
       for (var i = 0; i < dataset.length; i++) {
-        width = group.options.barChart.width;
         // dynammically downscale the width so there is no overlap up to 1/10th the original width
         if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
         if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
         if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
 
-        DOMutil.drawBar(dataset[i].x, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
+        DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
       }
 
       // draw points
       if (group.options.drawPoints.enabled == true) {
-        this._drawPoints(dataset, group, this.svgElements, this.svg);
+        this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
       }
     }
   }
@@ -4466,9 +4543,10 @@ Linegraph.prototype._drawLineGraph = function (dataset, group) {
  * @param svg
  * @param group
  */
-Linegraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg) {
+Linegraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
+  if (offset === undefined) {offset = 0;}
   for (var i = 0; i < dataset.length; i++) {
-    DOMutil.drawPoint(dataset[i].x, dataset[i].y, group, JSONcontainer, svg);
+    DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
   }
 };
 
@@ -4497,13 +4575,12 @@ Linegraph.prototype._preprocessData = function (datapoints, group) {
     var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
     var amountOfPoints = datapoints.length;
     var pointsPerPixel = amountOfPoints/xDistance;
-    increment = Math.max(1,Math.round(pointsPerPixel));
+    increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
   }
   else {
     increment = 1;
   }
 
-
   for (var i = 0; i < amountOfPoints; i += increment) {
     xValue = toScreen(datapoints[i].x) + this.width - 1;
     yValue = datapoints[i].y;

docs/graph2d.html

@@ -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>

docs/timeline.html

@@ -330,132 +330,132 @@ var options = {
 
 <table>
 <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
@@ -470,41 +470,41 @@ var options = {
     <td>Boolean</td>
     <td>true</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>
 </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>
-  <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>
-  <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>
-  <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>
 
 <!-- TODO: cleanup option order
@@ -521,128 +521,128 @@ var options = {
 -->
 
 <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>
-  <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">
 .vis.timeline .item {
   padding: 10px;
 }</pre>
-  </td>
+    </td>
 </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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
-  <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>
 
 

examples/graph2d/02_bars.html

@@ -18,6 +18,9 @@
     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 />
 
@@ -38,6 +41,7 @@
     var dataset = new vis.DataSet(items);
     var options = {
         style:'bar',
+        barChart: {width:50, align:'center'}, // align: left, center, right
         drawPoints: false,
         dataAxis: {
             icons:true

examples/graph2d/04_rightAxis.html

@@ -116,7 +116,8 @@
         yAxisOrientation: 'right', // right, left
         dataAxis: {icons: true},
         start: '2014-06-10',
-        end: '2014-07-04'
+        end: '2014-07-04',
+        movable: false
     };
     var graph2d = new vis.Graph2d(container, dataset, options, groups);
 

examples/graph2d/08_performance.html

@@ -66,7 +66,7 @@
         }
         pointsField.value = points;
 
-        graph2D.setOptions(pointsOptions);
+        graph2d.setOptions(pointsOptions);
     }
 
     function toggleInterpolation() {
@@ -89,7 +89,7 @@
             interpolationOptions = {catmullRom: false};
         }
         interpolationField.value = interpolation;
-        graph2D.setOptions(interpolationOptions);
+        graph2d.setOptions(interpolationOptions);
     }
 
 
@@ -144,7 +144,7 @@
         end: endPoint
     };
 
-    var graph2D = new vis.Graph2d(container, dataset, options);
+    var graph2d = new vis.Graph2d(container, dataset, options);
 </script>
 </body>
 </html>

examples/index.html

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

src/DOMutil.js

@@ -146,7 +146,7 @@ DOMutil.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
 };
 
 /**
- * draw a bar SVG element
+ * draw a bar SVG element centered on the X coordinate
  *
  * @param x
  * @param y
@@ -154,8 +154,8 @@ DOMutil.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
  */
 DOMutil.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
   rect = DOMutil.getSVGElement('rect',JSONcontainer, svgContainer);
-  rect.setAttributeNS(null, "x", Math.round(x - 0.5 * width));
-  rect.setAttributeNS(null, "y", Math.round(y));
+  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);

src/timeline/component/DataAxis.js

@@ -39,7 +39,8 @@ function DataAxis (body, options, svg) {
   this.conversionFactor = 1;
 
   this.setOptions(options);
-  this.width = Number(this.options.width.replace("px",""));
+  this.width = Number(('' + this.options.width).replace("px",""));
+  this.minWidth = this.width;
   this.height = this.linegraphSVG.offsetHeight;
 
   this.stepPixels = 25;
@@ -98,6 +99,9 @@ DataAxis.prototype.setOptions = function (options) {
       '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();
@@ -211,7 +215,7 @@ DataAxis.prototype.redraw = function () {
     // svg offsetheight did not work in firefox and explorer...
 
     this.dom.lineContainer.style.height = this.height + 'px';
-    this.width = this.options.visible ? Number(this.options.width.replace("px","")) : 0;
+    this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
 
     var props = this.props;
     var frame = this.dom.frame;
@@ -337,8 +341,8 @@ DataAxis.prototype._redrawLabels = function () {
     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.maxLabelSize + offset;
+  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();

src/timeline/component/GraphGroup.js

@@ -7,7 +7,7 @@
 function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
   this.id = groupId;
   var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
-  this.options = util.selectiveDeepExtend(fields,{},options);
+  this.options = util.selectiveBridgeObject(fields,options);
   this.usingDefaultStyle = group.className === undefined;
   this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
   this.zeroPosition = 0;
@@ -36,12 +36,12 @@ GraphGroup.prototype.setZeroPosition = function(pos) {
 
 GraphGroup.prototype.setOptions = function(options) {
   if (options !== undefined) {
-    var fields = ['yAxisOrientation','style','barChart','sort'];
+    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');
+    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') {

src/timeline/component/Linegraph.js

@@ -23,7 +23,8 @@ function Linegraph(body, options) {
     },
     style: 'line', // line, bar
     barChart: {
-      width: 50
+      width: 50,
+      align: 'center' // left, center, right
     },
     catmullRom: {
       enabled: true,
@@ -164,10 +165,10 @@ Linegraph.prototype.setOptions = function(options) {
   if (options) {
     var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
     util.selectiveDeepExtend(fields, this.options, options);
-    util._mergeOptions(this.options, options,'catmullRom');
-    util._mergeOptions(this.options, options,'drawPoints');
-    util._mergeOptions(this.options, options,'shaded');
-    util._mergeOptions(this.options, options,'legend');
+    util.mergeOptions(this.options, options,'catmullRom');
+    util.mergeOptions(this.options, options,'drawPoints');
+    util.mergeOptions(this.options, options,'shaded');
+    util.mergeOptions(this.options, options,'legend');
 
     if (options.catmullRom) {
       if (typeof options.catmullRom == 'object') {
@@ -332,7 +333,7 @@ Linegraph.prototype._onUpdate = function(ids) {
   this.redraw();
 };
 Linegraph.prototype._onAdd          = function (ids) {this._onUpdate(ids);};
-Linegraph.prototype._onRemove       = Linegraph.prototype._onUpdate;
+Linegraph.prototype._onRemove       = function (ids) {this._onUpdate(ids);};
 Linegraph.prototype._onUpdateGroups  = function (groupIds) {
   for (var i = 0; i < groupIds.length; i++) {
     var group = this.groupsData.get(groupIds[i]);
@@ -342,7 +343,7 @@ Linegraph.prototype._onUpdateGroups  = function (groupIds) {
   this._updateGraph();
   this.redraw();
 };
-Linegraph.prototype._onAddGroups = Linegraph.prototype._onUpdateGroups;
+Linegraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
 
 Linegraph.prototype._onRemoveGroups = function (groupIds) {
   for (var i = 0; i < groupIds.length; i++) {
@@ -483,11 +484,18 @@ Linegraph.prototype._updateUngrouped = function() {
       this.legendLeft.removeGroup(UNGROUPED);
       this.legendRight.removeGroup(UNGROUPED);
       this.yAxisLeft.removeGroup(UNGROUPED);
-      this.yAxisLeft.removeGroup(UNGROUPED);
+      this.yAxisRight.removeGroup(UNGROUPED);
     }
 //    console.log("getting amount ungrouped",new Date() - t1);
 //    console.log("putting in ungrouped",new Date() - t0);
   }
+  else {
+    delete this.groups[UNGROUPED];
+    this.legendLeft.removeGroup(UNGROUPED);
+    this.legendRight.removeGroup(UNGROUPED);
+    this.yAxisLeft.removeGroup(UNGROUPED);
+    this.yAxisRight.removeGroup(UNGROUPED);
+  }
 
   this.legendLeft.redraw();
   this.legendRight.redraw();
@@ -745,22 +753,26 @@ Linegraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
 Linegraph.prototype._drawBarGraph = function (dataset, group) {
   if (dataset != null) {
     if (dataset.length > 0) {
-      var width, coreDistance;
+      var coreDistance;
       var minWidth = 0.1 * group.options.barChart.width;
+      var offset = 0;
+      var width = group.options.barChart.width;
+
+      if (group.options.barChart.align == 'left')       {offset -= 0.5*width;}
+      else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
 
       for (var i = 0; i < dataset.length; i++) {
-        width = group.options.barChart.width;
         // dynammically downscale the width so there is no overlap up to 1/10th the original width
         if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
         if (i > 0)                {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
         if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
 
-        DOMutil.drawBar(dataset[i].x, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
+        DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
       }
 
       // draw points
       if (group.options.drawPoints.enabled == true) {
-        this._drawPoints(dataset, group, this.svgElements, this.svg);
+        this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
       }
     }
   }
@@ -821,9 +833,10 @@ Linegraph.prototype._drawLineGraph = function (dataset, group) {
  * @param svg
  * @param group
  */
-Linegraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg) {
+Linegraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
+  if (offset === undefined) {offset = 0;}
   for (var i = 0; i < dataset.length; i++) {
-    DOMutil.drawPoint(dataset[i].x, dataset[i].y, group, JSONcontainer, svg);
+    DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
   }
 };
 
@@ -852,13 +865,12 @@ Linegraph.prototype._preprocessData = function (datapoints, group) {
     var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
     var amountOfPoints = datapoints.length;
     var pointsPerPixel = amountOfPoints/xDistance;
-    increment = Math.max(1,Math.round(pointsPerPixel));
+    increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
   }
   else {
     increment = 1;
   }
 
-
   for (var i = 0; i < amountOfPoints; i += increment) {
     xValue = toScreen(datapoints[i].x) + this.width - 1;
     yValue = datapoints[i].y;

src/util.js

@@ -120,7 +120,6 @@ util.selectiveExtend = function (props, a, b) {
       }
     }
   }
-
   return a;
 };
 
@@ -1015,19 +1014,53 @@ util.isValidHex = function(hex) {
   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]]);
+        }
       }
-      else {
-        objectTo[i] = objectFrom[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;
   }
-  return objectTo;
 };
 
 
@@ -1040,7 +1073,33 @@ util.copyObject = function(objectFrom, objectTo) {
  * @param [String] option      | this is the option key in the options argument
  * @private
  */
-util._mergeOptions = function (mergeTarget, options, option) {
+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];
@@ -1057,6 +1116,8 @@ util._mergeOptions = function (mergeTarget, options, option) {
 }
 
 
+
+
 /**
  * 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.