made new graph2d docs, fixed graph2d examples, updated graph2d options

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 4.0.0-SNAPSHOT
- * @date    2015-05-07
+ * @date    2015-05-11
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -10931,14 +10931,14 @@ return /******/ (function(modules) { // webpackBootstrap
       left: {
         range: { min: undefined, max: undefined },
         format: function format(value) {
-          return '' + value.toPrecision(5);
+          return '' + value;
         },
         title: { text: undefined, style: undefined }
       },
       right: {
         range: { min: undefined, max: undefined },
         format: function format(value) {
-          return '' + value.toPrecision(5);
+          return '' + value;
         },
         title: { text: undefined, style: undefined }
       }
@@ -11520,7 +11520,7 @@ return /******/ (function(modules) { // webpackBootstrap
    */
   function GraphGroup(group, groupId, options, groupsUsingDefaultStyles) {
     this.id = groupId;
-    var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart', 'drawPoints', 'shaded', 'catmullRom'];
+    var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart', 'drawPoints', 'shaded', 'interpolation'];
     this.options = util.selectiveBridgeObject(fields, options);
     this.usingDefaultStyle = group.className === undefined;
     this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
@@ -11567,20 +11567,20 @@ return /******/ (function(modules) { // webpackBootstrap
       var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart'];
       util.selectiveDeepExtend(fields, this.options, options);
 
-      util.mergeOptions(this.options, options, 'catmullRom');
+      util.mergeOptions(this.options, options, 'interpolation');
       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;
+      if (options.interpolation) {
+        if (typeof options.interpolation == 'object') {
+          if (options.interpolation.parametrization) {
+            if (options.interpolation.parametrization == 'uniform') {
+              this.options.interpolation.alpha = 0;
+            } else if (options.interpolation.parametrization == 'chordal') {
+              this.options.interpolation.alpha = 1;
             } else {
-              this.options.catmullRom.parametrization = 'centripetal';
-              this.options.catmullRom.alpha = 0.5;
+              this.options.interpolation.parametrization = 'centripetal';
+              this.options.interpolation.alpha = 0.5;
             }
           }
         }
@@ -14201,10 +14201,10 @@ return /******/ (function(modules) { // webpackBootstrap
       style: 'line', // line, bar
       barChart: {
         width: 50,
-        handleOverlap: 'overlap',
+        sideBySide: false,
         align: 'center' // left, center, right
       },
-      catmullRom: {
+      interpolation: {
         enabled: true,
         parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
         alpha: 0.5
@@ -14223,12 +14223,16 @@ return /******/ (function(modules) { // webpackBootstrap
         alignZeros: true,
         left: {
           range: { min: undefined, max: undefined },
-          format: { decimals: undefined },
+          format: function format(value) {
+            return '' + value;
+          },
           title: { text: undefined, style: undefined }
         },
         right: {
           range: { min: undefined, max: undefined },
-          format: { decimals: undefined },
+          format: function format(value) {
+            return '' + value;
+          },
           title: { text: undefined, style: undefined }
         }
       },
@@ -14358,21 +14362,21 @@ return /******/ (function(modules) { // webpackBootstrap
         }
       }
       util.selectiveDeepExtend(fields, this.options, options);
-      util.mergeOptions(this.options, options, 'catmullRom');
+      util.mergeOptions(this.options, options, 'interpolation');
       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') {
-          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;
+      if (options.interpolation) {
+        if (typeof options.interpolation == 'object') {
+          if (options.interpolation.parametrization) {
+            if (options.interpolation.parametrization == 'uniform') {
+              this.options.interpolation.alpha = 0;
+            } else if (options.interpolation.parametrization == 'chordal') {
+              this.options.interpolation.alpha = 1;
             } else {
-              this.options.catmullRom.parametrization = 'centripetal';
-              this.options.catmullRom.alpha = 0.5;
+              this.options.interpolation.parametrization = 'centripetal';
+              this.options.interpolation.alpha = 0.5;
             }
           }
         }
@@ -19878,7 +19882,7 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         // construct path from dataset
-        if (group.options.catmullRom.enabled == true) {
+        if (group.options.interpolation.enabled == true) {
           d = Line._catmullRom(dataset, group);
         } else {
           d = Line._linear(dataset);
@@ -19911,7 +19915,7 @@ return /******/ (function(modules) { // webpackBootstrap
   };
 
   /**
-   * This uses an uniform parametrization of the CatmullRom algorithm:
+   * This uses an uniform parametrization of the interpolation algorithm:
    * 'On the Parameterization of Catmull-Rom Curves' by Cem Yuksel et al.
    * @param data
    * @returns {string}
@@ -19959,7 +19963,7 @@ return /******/ (function(modules) { // webpackBootstrap
    * @private
    */
   Line._catmullRom = function (data, group) {
-    var alpha = group.options.catmullRom.alpha;
+    var alpha = group.options.interpolation.alpha;
     if (alpha == 0 || alpha === undefined) {
       return this._catmullRomUniform(data);
     } else {

docs/css/newdocs.css

@@ -46,7 +46,6 @@ div.full {
 table.moduleTable {
     border:1px solid #eeeeee;
     font-size:14px;
-    margin-left:20px;
     max-width: 900px;
 }
 

examples/graph2d/06_interpolation.html

@@ -36,7 +36,7 @@
         content: names[0],
         options: {
             drawPoints: false,
-            catmullRom: {
+            interpolation: {
                 parametrization: 'centripetal'
             }
         }});
@@ -46,7 +46,7 @@
         content: names[1],
         options: {
             drawPoints: false,
-            catmullRom: {
+            interpolation: {
                 parametrization: 'chordal'
             }
         }});
@@ -56,7 +56,7 @@
         content: names[2],
         options: {
             drawPoints: false,
-            catmullRom: {
+            interpolation: {
                 parametrization: 'uniform'
             }
         }
@@ -67,7 +67,7 @@
         content: names[3],
         options: {
             drawPoints: { style: 'circle' },
-            catmullRom: false
+            interpolation: false
         }});
 
     var container = document.getElementById('visualization');

examples/graph2d/08_performance.html

@@ -74,19 +74,19 @@
         var interpolationField = document.getElementById("interpolation");
         if (interpolation == "linear") {
             interpolation = 'centripetal';
-            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+            interpolationOptions = {interpolation: {parametrization: interpolation}};
         }
         else if (interpolation == "centripetal") {
             interpolation = 'chordal';
-            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+            interpolationOptions = {interpolation: {parametrization: interpolation}};
         }
         else if (interpolation == "chordal") {
             interpolation = 'uniform';
-            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+            interpolationOptions = {interpolation: {parametrization: interpolation}};
         }
         else if (interpolation == "uniform") {
             interpolation = 'linear';
-            interpolationOptions = {catmullRom: false};
+            interpolationOptions = {interpolation: false};
         }
         interpolationField.value = interpolation;
         graph2d.setOptions(interpolationOptions);
@@ -139,7 +139,7 @@
     var options = {
         sampling: true,
         drawPoints: {enabled:false, size:3},
-        catmullRom: false,
+        interpolation: false,
         start: startPoint,
         end: endPoint
     };

examples/graph2d/09_external_legend.html

@@ -186,10 +186,6 @@
       margin-left: -5px;
       width: 900px;
     }
-
-
-
-
   </style>
 
   <script src="../../dist/vis.js"></script>

examples/graph2d/10_barsSideBySide.html

@@ -66,7 +66,7 @@
     dropdown.onchange = update;
 
     function update() {
-        var options = {barChart:{handleOverlap:dropdown.value}};
+        var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
         graph2d.setOptions(options);
     }
 

examples/graph2d/11_barsSideBySideGroups.html

@@ -62,7 +62,7 @@
     var dataset = new vis.DataSet(items);
     var options = {
         style:'bar',
-        stack:true,
+        stack:false,
         barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
         drawPoints: false,
         dataAxis: {
@@ -78,7 +78,7 @@
     dropdown.onchange = update;
 
     function update() {
-        var options = {barChart:{handleOverlap:dropdown.value}};
+        var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
         graph2d.setOptions(options);
     }
 

examples/graph2d/12_customRange.html

@@ -23,13 +23,11 @@
 <pre class="prettyprint lang-js">
 var options = {
     dataAxis: {
-        customRange: {
-            left: {
-                min:-5, max:30
-            },
-            right: {
-                min:-5
-            }
+        left: {
+            range: {min:-5, max:30}
+        },
+        right: {
+            range: {min:-5}
         }
     }
 };
@@ -71,16 +69,14 @@ var options = {
     var dataset = new vis.DataSet(items);
     var options = {
         style:'bar',
-        barChart: {width:50, align:'center', handleOverlap:"sideBySide"}, // align: left, center, right
+        barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
         drawPoints: true,
         dataAxis: {
-            customRange: {
-                left: {
-                    min:-5, max:30
-                },
-                right: {
-                    min:-5
-                }
+            left: {
+                range: {min:-5, max:30}
+            },
+            right: {
+                range: {min:-5}
             },
             icons:true
         },

examples/graph2d/16_bothAxis_titles.html

@@ -64,15 +64,6 @@
                     <td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
                     <td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
                 </tr>
-                <tr>
-                    <td>Left decimals</td>
-                    <td><select id="decimals" onchange="styleDecimals()">
-                        <option value="0">0</option>
-                        <option value="1">1</option>
-                        <option value="2">2</option>
-                        </select>
-                    </td>
-                </tr>
             </table>
         </td>
     </tr>
@@ -159,8 +150,8 @@
     var options = {
         dataAxis: {
             showMinorLabels: false,
-            title: {
-                right: {
+            right: {
+                title: {
                     text: 'Title (right axis)'
                 }
             }
@@ -185,10 +176,10 @@
         }
 
         if(axis == 'left') {
-            graph2d.setOptions({dataAxis: {title: {left: title}}});
+            graph2d.setOptions({dataAxis: {left: {title: title}}});
         }
         else {
-            graph2d.setOptions({dataAxis: {title: {right: title}}});
+            graph2d.setOptions({dataAxis: {right: {title: title}}});
         }
     }
 
@@ -198,18 +189,13 @@
         title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
 
         if(axis == 'left') {
-            graph2d.setOptions({dataAxis: {title: {left: title}}});
+            graph2d.setOptions({dataAxis: {left: {title: title}}});
         }
         else {
-            graph2d.setOptions({dataAxis: {title: {right: title}}});
+            graph2d.setOptions({dataAxis: {right: {title: title}}});
         }
     }
 
-    function styleDecimals() {
-        var x = document.getElementById("decimals");
-        graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
-    }
-
 </script>
 </body>
 </html>

lib/timeline/component/DataAxis.js

@@ -30,12 +30,12 @@ function DataAxis (body, options, svg, linegraphOptions) {
     alignZeros: true,
     left:{
       range: {min:undefined,max:undefined},
-      format: function (value) {return '' + value.toPrecision(5);},
+      format: function (value) {return ''+value;},
       title: {text:undefined,style:undefined}
     },
     right:{
       range: {min:undefined,max:undefined},
-      format: function (value) {return '' + value.toPrecision(5);},
+      format: function (value) {return ''+value;},
       title: {text:undefined,style:undefined}
     }
   };

lib/timeline/component/GraphGroup.js

@@ -16,7 +16,7 @@ var Points = require('./graph2d_types/points');
  */
 function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
   this.id = groupId;
-  var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
+  var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','interpolation']
   this.options = util.selectiveBridgeObject(fields,options);
   this.usingDefaultStyle = group.className === undefined;
   this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
@@ -65,22 +65,22 @@ GraphGroup.prototype.setOptions = function(options) {
     var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
     util.selectiveDeepExtend(fields, this.options, options);
 
-    util.mergeOptions(this.options, options,'catmullRom');
+    util.mergeOptions(this.options, options,'interpolation');
     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;
+    if (options.interpolation) {
+      if (typeof options.interpolation == 'object') {
+        if (options.interpolation.parametrization) {
+          if (options.interpolation.parametrization == 'uniform') {
+            this.options.interpolation.alpha = 0;
           }
-          else if (options.catmullRom.parametrization == 'chordal') {
-            this.options.catmullRom.alpha = 1.0;
+          else if (options.interpolation.parametrization == 'chordal') {
+            this.options.interpolation.alpha = 1.0;
           }
           else {
-            this.options.catmullRom.parametrization = 'centripetal';
-            this.options.catmullRom.alpha = 0.5;
+            this.options.interpolation.parametrization = 'centripetal';
+            this.options.interpolation.alpha = 0.5;
           }
         }
       }

lib/timeline/component/LineGraph.js

@@ -36,10 +36,10 @@ function LineGraph(body, options) {
     style: 'line', // line, bar
     barChart: {
       width: 50,
-      handleOverlap: 'overlap',
+      sideBySide: false,
       align: 'center' // left, center, right
     },
-    catmullRom: {
+    interpolation: {
       enabled: true,
       parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
       alpha: 0.5
@@ -58,12 +58,12 @@ function LineGraph(body, options) {
       alignZeros: true,
       left:{
         range: {min:undefined,max:undefined},
-        format: {decimals:undefined},
+        format: function (value) {return '' + value;},
         title: {text:undefined,style:undefined}
       },
       right:{
         range: {min:undefined,max:undefined},
-        format: {decimals:undefined},
+        format: function (value) {return '' + value;},
         title: {text:undefined,style:undefined}
       }
     },
@@ -195,23 +195,23 @@ LineGraph.prototype.setOptions = function(options) {
       }
     }
     util.selectiveDeepExtend(fields, this.options, options);
-    util.mergeOptions(this.options, options,'catmullRom');
+    util.mergeOptions(this.options, options,'interpolation');
     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') {
-        if (options.catmullRom.parametrization) {
-          if (options.catmullRom.parametrization == 'uniform') {
-            this.options.catmullRom.alpha = 0;
+    if (options.interpolation) {
+      if (typeof options.interpolation == 'object') {
+        if (options.interpolation.parametrization) {
+          if (options.interpolation.parametrization == 'uniform') {
+            this.options.interpolation.alpha = 0;
           }
-          else if (options.catmullRom.parametrization == 'chordal') {
-            this.options.catmullRom.alpha = 1.0;
+          else if (options.interpolation.parametrization == 'chordal') {
+            this.options.interpolation.alpha = 1.0;
           }
           else {
-            this.options.catmullRom.parametrization = 'centripetal';
-            this.options.catmullRom.alpha = 0.5;
+            this.options.interpolation.parametrization = 'centripetal';
+            this.options.interpolation.alpha = 0.5;
           }
         }
       }

lib/timeline/component/graph2d_types/line.js

@@ -123,7 +123,7 @@ Line.prototype.draw = function (dataset, group, framework) {
       }
 
       // construct path from dataset
-      if (group.options.catmullRom.enabled == true) {
+      if (group.options.interpolation.enabled == true) {
         d = Line._catmullRom(dataset, group);
       }
       else {
@@ -160,7 +160,7 @@ Line.prototype.draw = function (dataset, group, framework) {
 
 
 /**
- * This uses an uniform parametrization of the CatmullRom algorithm:
+ * This uses an uniform parametrization of the interpolation algorithm:
  * 'On the Parameterization of Catmull-Rom Curves' by Cem Yuksel et al.
  * @param data
  * @returns {string}
@@ -215,7 +215,7 @@ Line._catmullRomUniform = function(data) {
  * @private
  */
 Line._catmullRom = function(data, group) {
-  var alpha = group.options.catmullRom.alpha;
+  var alpha = group.options.interpolation.alpha;
   if (alpha == 0 || alpha === undefined) {
     return this._catmullRomUniform(data);
   }