From 20ef9a15f9e9da776012099bd15e2852f448a7d9 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Mon, 11 May 2015 14:44:36 +0200 Subject: [PATCH] made new graph2d docs, fixed graph2d examples, updated graph2d options --- dist/vis.js | 66 +- docs/css/newdocs.css | 1 - docs/graph2d.html | 2282 +++++++++-------- docs/old_graph2d.html | 1165 +++++++++ examples/graph2d/06_interpolation.html | 8 +- examples/graph2d/08_performance.html | 10 +- examples/graph2d/09_external_legend.html | 4 - examples/graph2d/10_barsSideBySide.html | 2 +- examples/graph2d/11_barsSideBySideGroups.html | 4 +- examples/graph2d/12_customRange.html | 26 +- examples/graph2d/16_bothAxis_titles.html | 26 +- lib/timeline/component/DataAxis.js | 4 +- lib/timeline/component/GraphGroup.js | 22 +- lib/timeline/component/LineGraph.js | 28 +- lib/timeline/component/graph2d_types/line.js | 6 +- 15 files changed, 2471 insertions(+), 1183 deletions(-) create mode 100644 docs/old_graph2d.html diff --git a/dist/vis.js b/dist/vis.js index e26f77c6..935b0f39 100644 --- a/dist/vis.js +++ b/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 { diff --git a/docs/css/newdocs.css b/docs/css/newdocs.css index 8c899fd8..d3d3320b 100644 --- a/docs/css/newdocs.css +++ b/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; } diff --git a/docs/graph2d.html b/docs/graph2d.html index d82db4eb..18c8d4a0 100644 --- a/docs/graph2d.html +++ b/docs/graph2d.html @@ -1,68 +1,173 @@ - - + + - vis.js | Graph2d documentation - - - + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + + + + + + + - - - -
- -

Graph2d documentation

- -

Overview

-

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

-

- Graph2d uses HTML DOM and SVG for rendering. This allows for flexible - customization using css styling. -

- -

Contents

- - -

Example

-

- The following code shows how to create a Graph2d and provide it with data. - More examples can be found in the examples directory. -

- -
+
+
+    Show the getting started!
+    
+    

+    

+
+
+    
Data Format

+    

+        Graph2d can load data from an Array, a DataSet or a DataView.
+        Objects are added to this DataSet by using the add() function.
+        Data points must have properties x, y, and z,
+        and can optionally have a property style and filter.
+    

+        Graph2d can be provided with two types of data:
+    

+    
    
+        
  • Items containing a set of points to be displayed.
    • 
+        
  • Groups containing a set of groups used to group items
+            together. All items belonging to a group will be drawn as a single graph.
    • 
+    

 
+    
Items

 
-
Loading

-
-

-  The class name of the Graph2d is vis.Graph2d.
-  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 DataSet or an Array, described in
-  section Data Format.
-  Options is a name-value map in the JSON format. The available options
-  are described in section Configuration Options.
-  Groups is a vis DataSet containing groups. The available options and the method of construction
-  are described in section Data Format.
-

-
var graph = new vis.Graph2d(container [, data] [, groups] [, options]);

-For backwards compatibility, groups and options can be interchanged.
-
-

-  Data, options and groups can be set or changed later on using the functions
-  Graph2d.setItems(data), Graph2d.setOptions(options) and Graph2d.setGroups(groups).
-

-
-
Data Format

-

-  Graph2d can load data from an Array, a DataSet or a DataView.
-  JSON objects are added to this DataSet by using the add() function.
-  Data points must have properties x, y, and z,
-  and can optionally have a property style and filter.
-

-  Graph2d can be provided with two types of data:
-

-
    
-  
  • Items containing a set of points to be displayed.
    • 
-  
  • Groups containing a set of groups used to group items
-    together. All items belonging to a group will be drawn as a single graph.
    • 
-

-
-
Items

-
-
+
 var items = [
     {x: '2014-06-13', y: 30, group: 0},
     {x: '2014-06-14', y: 10, group: 0},
@@ -149,54 +260,54 @@ var items = [
 ];
 

 
-
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-  
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-
NameTypeRequiredDescription
xnumberyesLocation on the x-axis.
ynumberyesLocation on the y-axis.
groupnumber | stringnoThe ID of the group this point belongs to.
labelobjectnoA label object which will be displayed near to the item. A label object has one requirement - a  content  property. In addition you can set the  xOffset, yOffset and className  for further appearance customisations 

-
-
Groups

-
-

-  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 id,
-  content, className (optional) and  options (optional).
-

-

-  Groups can be applied to a timeline using the method setGroups.
-  A table with groups can be created like:
-

-
-
+    
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+    
NameTypeRequiredDescription
xNumberyesLocation on the x-axis.
yNumberyesLocation on the y-axis.
groupNumber or stringnoThe ID of the group this point belongs to.
labelObjectnoA label object which will be displayed near to the item. A label object has one requirement - a  content  property. In addition you can set the  xOffset, yOffset and className  for further appearance customisations 

+
+    
Groups

+
+    

+        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 id,
+        content, className (optional) and  options (optional).
+    

+    

+        Groups can be applied to a timeline using the method setGroups.
+        A table with groups can be created like:
+    

+
+
 var groups = new vis.DataSet();
 groups.add({
     id: 1,
@@ -211,71 +322,71 @@ groups.add({
 

 
 
-

-  Groups can have the following properties:
-

-
-
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-  
-    
-    
-    
-    
-  
-    
-    
-    
-    
-
NameTypeRequiredDescription
idString | NumberyesAn id for the group. The group will display all items having a
-      property group which matches the id
-      of the group.
contentStringyesThe contents of the group. This can be plain text or html code.
classNameStringnoThis field is optional. A className can be used to give groups
-      an individual css style.
-    
styleStringnoThis field is optional. A style can be used to give groups
-      an individual css style, and any style tags specified in style will
-      override the definition in the className style defined in css.
-    
optionsJSON objectnoThis 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.
-  
visibleBooleantrueThis field is optional. If false, this group will not be drawn.
-  

-
-
Configuration Options

-
-
Graph2d Options

-
-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 setOptions function.
-
-
+    

+        Groups can have the following properties:
+    

+
+    
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+            
+            
+            
+            
+    
NameTypeRequiredDescription
idString or NumberyesAn id for the group. The group will display all items having a
+                property group which matches the id
+                of the group.
contentStringyesThe contents of the group. This can be plain text or html code.
classNameStringnoThis field is optional. A className can be used to give groups
+                an individual css style.
+            
styleStringnoThis field is optional. A style can be used to give groups
+                an individual css style, and any style tags specified in style will
+                override the definition in the className style defined in css.
+            
optionsObjectnoThis 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.
+        
visibleBooleantrueThis field is optional. If false, this group will not be drawn.
+        

+
+    
Configuration Options

+
+    
Graph2d Options

+
+    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 setOptions function.
+
+
 var options = {
     width:  '100%',
     height: '400px',
@@ -283,740 +394,736 @@ var options = {
 };
 

 
-The options colored in green can also be used as options for the groups. All options are optional.
-
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-    
-    
-    
-    
-
-
-    
-    
-    
-    
-
-
-    
-    
-    
-    
-
-
-    
-    
-    
-    
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-    
-    
-    
-    
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
-  
-  
-  
-  
-
-
NameTypeDefaultDescription
yAxisOrientationString'left'This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled
-    with an axis, it will not be shown.
defaultGroupString'default'This is the label for the default, ungrouped items when shown in a legend.
sortBooleantrueThis 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.
samplingBooleantrueIf 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.
graphHeightNumber | String'400px'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.
shadedBoolean | ObjectfalseToggle a shaded area with the default settings.
shaded.enabledBooleanfalseThis toggles the shading.
shaded.orientationString'bottom'This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.
shaded.styleStringundefinedSet the style for the shading. This is a css string and it will override the attributes set in the class.
styleString'line'This allows the user to define if this should be a linegraph, barchart or pointcloud. The options are: 'line', 'bar', 'points'.
barChart.widthNumber50The width of the bars.
barChart.alignString'center'The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'.
barChart.handleOverlapString'overlap'You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are:
-    overlap, sideBySide, stack.
-    See example 10 for more information.
-    When using groups, see example 11.
-  
catmullRomBoolean | ObjecttrueToggle the interpolation with the default settings. For more customization use the JSON format.
catmullRom.enabledBooleantrueToggle the interpolation.
catmullRom.parametrizationString'centripetal'Define the type of parametrizaion. Example 7 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.
drawPointsBoolean | ObjecttrueToggle the drawing of the datapoints with the default settings.
drawPoints.enabledBooleantrueToggle the drawing of the datapoints.
drawPoints.sizeNumber6Determine the size at which the data points are drawn.
drawPoints.styleString'square'Determine the shape of the data points. The options are 'square' or 'circle'.
dataAxis.customRange.left.minNumberundefinedSet the minimum value of the left y-Axis.
dataAxis.customRange.left.maxNumberundefinedSet the maximum value of the left y-Axis.
dataAxis.customRange.right.minNumberundefinedSet the minimum value of the right y-Axis.
dataAxis.customRange.right.maxNumberundefinedSet the maximum value of the right y-Axis.
dataAxis.showMinorLabelsBooleantrueToggle the drawing of the minor labels on the Y axis.
dataAxis.showMajorLabelsBooleantrueToggle the drawing of the major labels on the Y axis.
dataAxis.iconsBooleanfalseToggle the drawing of automatically generated icons the Y axis.
dataAxis.widthNumber | String'40px'Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values.
dataAxis.visibleBooleantrueShow or hide the data axis.
dataAxis.title.left.textStringundefinedSet the title for the left axis.
dataAxis.title.left.styleStringundefinedSet the title style for the left axis. This is a css string and it will override the attributes set in the class.
dataAxis.title.right.textStringundefinedSet the title for the right axis.
dataAxis.title.right.styleStringundefinedSet the title style for the right axis. This is a css string and it will override the attributes set in the class.
dataAxis.format.left.decimalsNumberundefinedSet the number of decimal points used on the the left axis. If set, this will fix the number of decimal places
-    displayed after the decimal point.
-    If undefined, trailing zeros will be removed.
dataAxis.format.right.decimalsNumberundefinedSet the number of decimal points used on the the right axis. If set, this will fix the number of decimal places
-      displayed after the decimal point.
-      If undefined, trailing zeros will be removed.
dataAxis.alignZerosBooleantrueWhen using multiple axis, the right one is slaved to the left one. If you need to ensure that the zero-lines are on the same
-    height, you can turn this option on.
groups.visibilityObjectYou can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since
-    this is not communicated across instances of graph2d. Take a look at Example 14
-    for more explanation.
-  
legendBooleanfalseToggle the legend with the default settings.
legend.enabledBooleanfalseToggle the legend.
legend.iconsBooleantrueShow automatically generated icons on the legend.
legend.left.visibleBooleantrueBoth axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis.
legend.left.positionString'top-left'Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.
legend.right.visibleBooleantrueThis toggles the visibility of the legend that is coupled with the right axis.
legend.right.positionString'top-right'Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.

-
-
Timeline Options

-
-

-  Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
-  All options are optional.
-

-
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-
-  
-    
-    
-    
-    
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-
NameTypeDefaultDescription
autoResizebooleantrueIf 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 redraw().
clickToUsebooleanfalseWhen a Graph2d is configured to be clickToUse, it will react to mouse and touch events only when active.
-      When active, a blue shadow border is displayed around the Graph2d. The Graph2d is set active by clicking on it, and is changed to inactive again by clicking outside the Graph2d or by pressing the ESC key.
endDate | Number | StringnoneThe 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.
heightNumber | StringnoneThe 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 maxHeight
-      to prevent the timeline from getting too high in case of automatically
-      calculated height.
-    
localeStringnoneSelect a locale for the Graph2d. See section Localization for more information.
localesObjectnoneA map with i18n locales. See section Localization for more information.
maxDate | Number | StringnoneSet a maximum Date for the visible range.
-      It will not be possible to move beyond this maximum.
-    
maxHeightNumber | StringnoneSpecifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".
minDate | Number | StringnoneSet a minimum Date for the visible range.
-      It will not be possible to move beyond this minimum.
-    
minHeightNumber | StringnoneSpecifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
orientationString'bottom'Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.
showCurrentTimebooleantrueShow a vertical bar at the current time.
showCustomTimebooleanfalseShow 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 timechange is fired repeatedly. After the bar is dragged, the event timechanged is fired once.
showMajorLabelsbooleantrueBy 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 showMajorLabels is false, no major labels
-      are shown.
showMinorLabelsbooleantrueBy 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 showMinorLabels is false, no minor labels
-      are shown. When both showMajorLabels and
-      showMinorLabels are false, no horizontal axis will be
-      visible.
showMajorLinesbooleantrueBy default, the timeline shows both minor and major date lines on the
-      time axis. You can use this option to hide the lines from the major dates.
-  
showMinorLinesbooleantrueBy default, the timeline shows both minor and major date lines on the
-      time axis. You can use this option to hide the lines from the minor dates.
-  
startDate | Number | StringnoneThe initial start date for the axis of the timeline.
-      If not provided, the earliest date present in the events is taken as start date.
timeAxis.scalestringnoneSet a fixed scale for the time axis of the Timeline. Choose from 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'.
timeAxis.stepnumber1
-      Set a fixed step size for the time axis. Only applicable when used together with timeAxis.scale.
-      Choose for example 1, 2, 5, or 10.
widthString'100%'The width of the timeline in pixels or as a percentage.
zoomMaxNumber315360000000000Set 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.
-    
zoomMinNumber10Set a minimum zoom interval for the visible range in milliseconds.
-      It will not be possible to zoom in further than this minimum.
-    

-
-
-
Methods

-

-  The Graph2d supports the following methods.
-

-
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
+        
+        
+            
+            
+            
+        
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+    
MethodReturn TypeDescription
clear([what])none
-      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. what = {items: true, groups: true, options: true}. Example usage:
-
-
Graph2d.clear();                // clear items, groups, and options
+    The options colored in green can also be used as options for the groups. All options are optional.
+
+    
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+    
NameTypeDefaultDescription
defaultGroupString'default'This is the label for the default, ungrouped items when shown in a legend.
 barChartObjectDefine the properties of the barchart style.
 dataAxisObjectDefine the properties of the left and right dataAxis.
 drawPointsBoolean or ObjecttrueToggle the drawing of the datapoints with the default settings.
graphHeightNumber or String'400px'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.
groups.visibilityObjectYou can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since
+                this is not communicated across instances of graph2d. Take a look at Example 14
+                for more explanation.
+            
 interpolationBoolean or ObjecttrueToggle the interpolation with the default settings. For more customization use the JSON format.
 legendBoolean or ObjectfalseToggle the legend with the default settings.
samplingBooleantrueIf 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.
sortBooleantrueThis 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.
stackBooleantrueIf stack is enabled, the graphs will be stacked upon eachother when applicable. This currently only works with bar graphs but linegraph support is being worked on.
 shadedBoolean or ObjectfalseToggle a shaded area with the default settings.
yAxisOrientationString'left'This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled
+                with an axis, it will not be shown.

+
+    
Timeline Options

+
+    

+        Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
+        All options are optional.
+    

+
+    
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+
+        
+            
+            
+            
+            
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+        
+            
+            
+            
+            
+        
+
+    
NameTypeDefaultDescription
autoResizeBooleantrueIf 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 redraw().
clickToUseBooleanfalseWhen a Graph2d is configured to be clickToUse, it will react to mouse and touch events only when active.
+                When active, a blue shadow border is displayed around the Graph2d. The Graph2d is set active by clicking on it, and is changed to inactive again by clicking outside the Graph2d or by pressing the ESC key.
endDate or Number or StringnoneThe 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.
heightNumber or StringnoneThe 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 maxHeight
+                to prevent the timeline from getting too high in case of automatically
+                calculated height.
+            
hiddenDatesObjectnoneThis option allows you to hide specific timespans from the time axis. The dates can be supplied as an object:
+                {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']} or as an Array of these objects. The repeat argument is optional.
+                The possible values are (case-sensitive): daily, weekly, monthly, yearly. To hide a weekend, pick any Saturday as start and the following Monday as end
+                and set repeat to weekly.
+            
localeStringnoneSelect a locale for the Graph2d. See section Localization for more information.
localesObjectnoneA map with i18n locales. See section Localization for more information.
maxDate or Number or StringnoneSet a maximum Date for the visible range.
+                It will not be possible to move beyond this maximum.
+            
maxHeightNumber or StringnoneSpecifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".
minDate or Number or StringnoneSet a minimum Date for the visible range.
+                It will not be possible to move beyond this minimum.
+            
minHeightNumber or StringnoneSpecifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
orientationString'bottom'Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.
showCurrentTimeBooleantrueShow a vertical bar at the current time.
showCustomTimeBooleanfalseShow 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 timechange is fired repeatedly. After the bar is dragged, the event timechanged is fired once.
showMajorLabelsBooleantrueBy 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 showMajorLabels is false, no major labels
+                are shown.
showMinorLabelsBooleantrueBy 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 showMinorLabels is false, no minor labels
+                are shown. When both showMajorLabels and
+                showMinorLabels are false, no horizontal axis will be
+                visible.
showMajorLinesBooleantrueBy default, the timeline shows both minor and major date lines on the
+                time axis. You can use this option to hide the lines from the major dates.
+        
showMinorLinesBooleantrueBy default, the timeline shows both minor and major date lines on the
+                time axis. You can use this option to hide the lines from the minor dates.
+        
startDate or Number or StringnoneThe initial start date for the axis of the timeline.
+                If not provided, the earliest date present in the events is taken as start date.
 timeAxisObjectObjectSpecify a fixed scale and step size for the time axis.
widthString'100%'The width of the timeline in pixels or as a percentage.
zoomMaxNumber315360000000000Set 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.
+            
zoomMinNumber10Set a minimum zoom interval for the visible range in milliseconds.
+                It will not be possible to zoom in further than this minimum.
+            

+
+
+    
Methods

+    

+        The Graph2d supports the following methods.
+    

+
+    
+        
+            
+            
+            
+        
+        
+            
+            
+            
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-
MethodReturn TypeDescription
clear([what])none
+                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. what = {items: true, groups: true, options: true}. Example usage:
+
+
Graph2d.clear();                // clear items, groups, and options
 Graph2d.clear({options: true}); // clear options only
 

-    
clickFired when clicked inside the Graph2d.
-    
-      Passes a properties object as returned by the method Graph2d.getEventProperties(event).
-    
contextmenuFired when right-clicked inside the Graph2d. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
-
graph2d.on('contextmenu', function (props) {
-  alert('Right click!');
-  props.event.preventDefault();
-});
-

-    		
-      Passes a properties object as returned by the method Graph2d.getEventProperties(event).
-    
destroy()noneDestroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up.
-    
doubleClickFired when double clicked inside the Graph2d.
-    
-      Passes a properties object as returned by the method Graph2d.getEventProperties(event).
-    
fit()noneAdjust the visible window such that it fits all items.
-    
getCurrentTime()DateGet the current time. Only applicable when option showCurrentTime is true.
-    
getCustomTime()DateRetrieve the custom time. Only applicable when the option showCustomTime is true.
-    
getEventProperties(event)Object
-      Returns an Object with relevant properties from an event:
-      
    
-        
  • pageX (Number): absolute horizontal position of the click event.
    • 
-        
  • pageY (Number): absolute vertical position of the click event.
    • 
-        
  • x (Number): relative horizontal position of the click event.
    • 
-        
  • y (Number): relative vertical position of the click event.
    • 
-        
  • time (Date): Date of the clicked event.
    • 
-        
  • value (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.
    • 
-        
  • what (String | null): name of the clicked thing: background, axis, dat-axis, custom-time, or current-time, legend.
    • 
-        
  • event (Object): the original click event.
    • 
-      

-    
getLegend(groupId, iconWidth, iconHeight)SVGelement, String, StringReturns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
-    
getWindow()ObjectGet the current visible window. Returns an object with properties start: Date and end: Date.
getItemRange()ObjectGet the range of all the items as an object containing min: Date and max: Date.
hiddenDatesObjectnoneThis option allows you to hide specific timespans from the time axis. The dates can be supplied as an object:
-      {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']} or as an Array of these objects. The repeat argument is optional.
-      The possible values are (case-sensitive): daily, weekly, monthly, yearly. To hide a weekend, pick any Saturday as start and the following Monday as end
-      and set repeat to weekly.
-    
isGroupVisible(groupId)BooleanThis checks if the visible option of the supplied group (by ID) is true or false.
-    
moveTo(time [, options])noneMove the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options:
-      
    
-        
  • animate: boolean | number
    If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.
    • 
-      

-    
on(event, callback)noneCreate an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information.
off(event, callback)noneRemove an event listener created before via function on(event, callback). See section Events for more information.
redraw()noneForce a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false.
-    
setCurrentTime(time)noneSet a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
-      time can be a Date object, numeric timestamp, or ISO date string.
-      Only applicable when option showCurrentTime is true.
setCustomTime(time)noneAdjust the custom time bar. Only applicable when the option showCustomTime is true. time can be a Date object, numeric timestamp, or ISO date string.
-    
setGroups(groups)noneSet a data set with groups for the Graph2d.
-      groups 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 group, which
-      must correspond with the id of the group.
-    
setItems(items)noneSet a data set with items for the Graph2d.
-      items can be an Array with Objects,
-      a DataSet, or a DataView.
-    
setOptions(options)noneSet 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.
-    
setWindow(start, end)noneSet the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged.

-
-
-
Events

-

-  Graph2d fires events when changing the visible window by dragging, when
-  selecting items, and when dragging the custom time bar.
-

-
-

-  Here an example on how to listen for a rangeChanged event.  A listener can be removed via the function off:
-

+            
destroy()noneDestroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up.
+            
fit()noneAdjust the visible window such that it fits all items.
+            
getCurrentTime()DateGet the current time. Only applicable when option showCurrentTime is true.
+            
getCustomTime()DateRetrieve the custom time. Only applicable when the option showCustomTime is true.
+            
getEventProperties(event)Object
+                Returns an Object with relevant properties from an event:
+                
    
+                    
  • pageX (Number): absolute horizontal position of the click event.
    • 
+                    
  • pageY (Number): absolute vertical position of the click event.
    • 
+                    
  • x (Number): relative horizontal position of the click event.
    • 
+                    
  • y (Number): relative vertical position of the click event.
    • 
+                    
  • time (Date): Date of the clicked event.
    • 
+                    
  • value (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.
    • 
+                    
  • what (String or null): name of the clicked thing: background, axis, dat-axis, custom-time, or current-time, legend.
    • 
+                    
  • event (Object): the original click event.
    • 
+                

+            
getLegend(groupId, iconWidth, iconHeight)SVGelement, String, StringReturns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
+            
getWindow()ObjectGet the current visible window. Returns an object with properties start: Date and end: Date.
getItemRange()ObjectGet the range of all the items as an object containing min: Date and max: Date.
isGroupVisible(groupId)BooleanThis checks if the visible option of the supplied group (by ID) is true or false.
+            
moveTo(time [, options])noneMove the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options:
+                
    
+                    
  • animate: boolean or number
    If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.
    • 
+                

+            
on(event, callback)noneCreate an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information.
off(event, callback)noneRemove an event listener created before via function on(event, callback). See section Events for more information.
redraw()noneForce a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false.
+            
setCurrentTime(time)noneSet a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
+                time can be a Date object, numeric timestamp, or ISO date string.
+                Only applicable when option showCurrentTime is true.
setCustomTime(time)noneAdjust the custom time bar. Only applicable when the option showCustomTime is true. time can be a Date object, numeric timestamp, or ISO date string.
+            
setGroups(groups)noneSet a data set with groups for the Graph2d.
+                groups 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 group, which
+                must correspond with the id of the group.
+            
setItems(items)noneSet a data set with items for the Graph2d.
+                items can be an Array with Objects,
+                a DataSet, or a DataView.
+            
setOptions(options)noneSet 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.
+            
setWindow(start, end)noneSet the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged.

+
+
+    
Events

+    

+        Graph2d fires events when changing the visible window by dragging, when
+        selecting items, and when dragging the custom time bar.
+    

+
+    

+        Here an example on how to listen for a rangeChanged event.  A listener can be removed via the function off:
+    

 
 
 function onChange (properties) {
@@ -1033,97 +1140,122 @@ Graph2d.off('rangechanged', onChange);
 

 
 
-

-  The following events are available.
-

-
-
-  -    -    -    -  
-
-  
-    
-    
-    
-  
-    
-        
-        
-        
-    
-
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-  
-    
-    
-    
-  
-
-  
-    
-    
-    
-  
-
-





nameDescriptionProperties
finishedRedrawFired after a redraw is complete. When moving the Graph2d around, this could be fired frequently.
-        
-            none.
-        
rangechangeFired repeatedly when the user is dragging the Graph2d window.
-    
-      
    
-        
  • start (Number): timestamp of the current start of the window.
    • 
-        
  • end (Number): timestamp of the current end of the window.
    • 
-      

-    
rangechangedFired once after the user has dragged the Graph2d window.
-    
-      
    
-        
  • start (Number): timestamp of the current start of the window.
    • 
-        
  • end (Number): timestamp of the current end of the window.
    • 
-      

-    
timechangeFired repeatedly when the user is dragging the custom time bar.
-      Only available when the custom time bar is enabled.
-    
-      
    
-        
  • time (Date): the current time.
    • 
-      

-    
timechangedFired once after the user has dragged the custom time bar.
-      Only available when the custom time bar is enabled.
-    
-      
    
-        
  • time (Date): the current time.
    • 
-      

-    

-
-
Localization

-

-  Graph2d can be localized. For localization, Graph2d depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
-

-
-

-  To set a locale for the Graph2d, specify the option locale:
-

+    

+        The following events are available.
+    

+
+    
+        
+            
+            
+            
+        
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+        
+            
+            
+            
+        
+
+        
+            
+            
+            
+        
+
+    
nameDescriptionProperties
clickFired when clicked inside the Graph2d.
+            
+                Passes a properties object as returned by the method Graph2d.getEventProperties(event).
+            
contextmenuFired when right-clicked inside the Graph2d. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
+
graph2d.on('contextmenu', function (props) {
+  alert('Right click!');
+  props.event.preventDefault();
+});
+

+            		
+                Passes a properties object as returned by the method Graph2d.getEventProperties(event).
+            
doubleClickFired when double clicked inside the Graph2d.
+            
+                Passes a properties object as returned by the method Graph2d.getEventProperties(event).
+            
finishedRedrawFired after a redraw is complete. When moving the Graph2d around, this could be fired frequently.
+            
+                none.
+            
rangechangeFired repeatedly when the user is dragging the Graph2d window.
+            
+                
    
+                    
  • start (Number): timestamp of the current start of the window.
    • 
+                    
  • end (Number): timestamp of the current end of the window.
    • 
+                

+            
rangechangedFired once after the user has dragged the Graph2d window.
+            
+                
    
+                    
  • start (Number): timestamp of the current start of the window.
    • 
+                    
  • end (Number): timestamp of the current end of the window.
    • 
+                

+            
timechangeFired repeatedly when the user is dragging the custom time bar.
+                Only available when the custom time bar is enabled.
+            
+                
    
+                    
  • time (Date): the current time.
    • 
+                

+            
timechangedFired once after the user has dragged the custom time bar.
+                Only available when the custom time bar is enabled.
+            
+                
    
+                    
  • time (Date): the current time.
    • 
+                

+            

+
+    
Localization

+    

+        Graph2d can be localized. For localization, Graph2d depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
+    

+
+    

+        To set a locale for the Graph2d, specify the option locale:
+    

 
 
var options = {
   locale: 'nl'
 };
 

 
-
Create a new locale

+    
Create a new locale

 
-To load a locale into the Graph2d not supported by default, one can add a new locale to the option locales:
+    To load a locale into the Graph2d not supported by default, one can add a new locale to the option locales:
 
 
var options = {
   locales: {
@@ -1139,48 +1271,58 @@ To load a locale into the Graph2d not supported by default, one can add a new lo
 };
 

 
-
Available locales

-
-Graph2d comes with support for the following locales:
-
-
-  
-  
-    
-    
-  
-  
-    
-    
-  
-
LanguageCode
English
-      en

-      en_EN

-      en_US
-    
Dutch
-      nl

-      nl_NL

-      nl_BE
-    

-
-
Styles

-

-  All parts of the Graph2d have a class name and a default css style just like the Graph2d.
-  The styles can be overwritten, which enables full customization of the layout
-  of the Graph2d.
-

-

-  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! Example 4 and
-  example 5 show the usage of custom styles.
-

-
-
Data Policy

-

-  All code and data is processed and rendered in the browser.
-  No data is sent to any server.
-

-
+    
Available locales

+
+    Graph2d comes with support for the following locales:
+
+    
+        
+        
+            
+            
+        
+        
+            
+            
+        
+    
LanguageCode
English
+                en

+                en_EN

+                en_US
+            
Dutch
+                nl

+                nl_NL

+                nl_BE
+            

+
+    
Styles

+    

+        All parts of the Graph2d have a class name and a default css style just like the Graph2d.
+        The styles can be overwritten, which enables full customization of the layout
+        of the Graph2d.
+    

+    

+        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! Example 4 and
+        example 5 show the usage of custom styles.
+    

+
+    

+    

+    

+    

+    

+    

+    

+    

+    

+
- - + + + + + + + \ No newline at end of file diff --git a/docs/old_graph2d.html b/docs/old_graph2d.html new file mode 100644 index 00000000..f0dbfef8 --- /dev/null +++ b/docs/old_graph2d.html @@ -0,0 +1,1165 @@ + + + + vis.js | Graph2d documentation + + + + + + + + +
+ +

Graph2d documentation

+ +

Overview

+

+ 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. +

+

+ Graph2d uses HTML DOM and SVG for rendering. This allows for flexible + customization using css styling. +

+ +

Contents

+ + +

Example

+

+ The following code shows how to create a Graph2d and provide it with data. + More examples can be found in the examples directory. +

+ +
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Basic Example</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = [
+      {x: '2014-06-11', y: 10},
+      {x: '2014-06-12', y: 25},
+      {x: '2014-06-13', y: 30},
+      {x: '2014-06-14', y: 10},
+      {x: '2014-06-15', y: 15},
+      {x: '2014-06-16', y: 30}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      start: '2014-06-10',
+      end: '2014-06-18'
+  };
+  var Graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>
+
+
+ + +

Data Format

+

+ Graph2d can load data from an Array, a DataSet or a DataView. + JSON objects are added to this DataSet by using the add() function. + Data points must have properties x, y, and z, + and can optionally have a property style and filter. +

+ Graph2d can be provided with two types of data: +

+ + +

Items

+ +
+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}
+];
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
xnumberyesLocation on the x-axis.
ynumberyesLocation on the y-axis.
groupnumber | stringnoThe ID of the group this point belongs to.
labelobjectnoA label object which will be displayed near to the item. A label object has one requirement - a content property. In addition you can set the xOffset, yOffset and className for further appearance customisations
+ +

Groups

+ +

+ 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 id, + content, className (optional) and options (optional). +

+

+ Groups can be applied to a timeline using the method setGroups. + A table with groups can be created like: +

+ +
+var groups = new vis.DataSet();
+groups.add({
+    id: 1,
+    content: 'Group 1',
+    // Optional: a field 'visible'
+    // Optional: a field 'className'
+    // Optional: options
+  })
+groups.add({
+  // more groups...
+});
+
+ + +

+ Groups can have the following properties: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
idString | NumberyesAn id for the group. The group will display all items having a + property group which matches the id + of the group.
contentStringyesThe contents of the group. This can be plain text or html code.
classNameStringnoThis field is optional. A className can be used to give groups + an individual css style. +
styleStringnoThis field is optional. A style can be used to give groups + an individual css style, and any style tags specified in style will + override the definition in the className style defined in css. +
optionsJSON objectnoThis 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. +
visibleBooleantrueThis field is optional. If false, this group will not be drawn. +
+ +

Configuration Options

+ +

Graph2d Options

+ +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 setOptions function. + +
+var options = {
+    width:  '100%',
+    height: '400px',
+    style: 'surface'
+};
+
+ +The options colored in green can also be used as options for the groups. All options are optional. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
yAxisOrientationString'left'This defines with which axis, left or right, the graph is coupled. Example 5 shows groups with different Y axis. If no groups are coupled + with an axis, it will not be shown.
defaultGroupString'default'This is the label for the default, ungrouped items when shown in a legend.
sortBooleantrueThis 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.
samplingBooleantrueIf 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.
graphHeightNumber | String'400px'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.
shadedBoolean | ObjectfalseToggle a shaded area with the default settings.
shaded.enabledBooleanfalseThis toggles the shading.
shaded.orientationString'bottom'This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'.
shaded.styleStringundefinedSet the style for the shading. This is a css string and it will override the attributes set in the class.
styleString'line'This allows the user to define if this should be a linegraph, barchart or pointcloud. The options are: 'line', 'bar', 'points'.
barChart.widthNumber50The width of the bars.
barChart.alignString'center'The alignment of the bars with regards to the coordinate. The options are 'left', 'right' or 'center'.
barChart.handleOverlapString'overlap'You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are: + overlap, sideBySide, stack. + See example 10 for more information. + When using groups, see example 11. +
catmullRomBoolean | ObjecttrueToggle the interpolation with the default settings. For more customization use the JSON format.
catmullRom.enabledBooleantrueToggle the interpolation.
catmullRom.parametrizationString'centripetal'Define the type of parametrizaion. Example 7 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.
drawPointsBoolean | ObjecttrueToggle the drawing of the datapoints with the default settings.
drawPoints.enabledBooleantrueToggle the drawing of the datapoints.
drawPoints.sizeNumber6Determine the size at which the data points are drawn.
drawPoints.styleString'square'Determine the shape of the data points. The options are 'square' or 'circle'.
dataAxis.customRange.left.minNumberundefinedSet the minimum value of the left y-Axis.
dataAxis.customRange.left.maxNumberundefinedSet the maximum value of the left y-Axis.
dataAxis.customRange.right.minNumberundefinedSet the minimum value of the right y-Axis.
dataAxis.customRange.right.maxNumberundefinedSet the maximum value of the right y-Axis.
dataAxis.showMinorLabelsBooleantrueToggle the drawing of the minor labels on the Y axis.
dataAxis.showMajorLabelsBooleantrueToggle the drawing of the major labels on the Y axis.
dataAxis.iconsBooleanfalseToggle the drawing of automatically generated icons the Y axis.
dataAxis.widthNumber | String'40px'Set the (minimal) width of the yAxis. The axis will resize to accomodate the labels of the Y values.
dataAxis.visibleBooleantrueShow or hide the data axis.
dataAxis.title.left.textStringundefinedSet the title for the left axis.
dataAxis.title.left.styleStringundefinedSet the title style for the left axis. This is a css string and it will override the attributes set in the class.
dataAxis.title.right.textStringundefinedSet the title for the right axis.
dataAxis.title.right.styleStringundefinedSet the title style for the right axis. This is a css string and it will override the attributes set in the class.
dataAxis.format.left.decimalsNumberundefinedSet the number of decimal points used on the the left axis. If set, this will fix the number of decimal places + displayed after the decimal point. + If undefined, trailing zeros will be removed.
dataAxis.format.right.decimalsNumberundefinedSet the number of decimal points used on the the right axis. If set, this will fix the number of decimal places + displayed after the decimal point. + If undefined, trailing zeros will be removed.
dataAxis.alignZerosBooleantrueWhen using multiple axis, the right one is slaved to the left one. If you need to ensure that the zero-lines are on the same + height, you can turn this option on.
groups.visibilityObjectYou can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since + this is not communicated across instances of graph2d. Take a look at Example 14 + for more explanation. +
legendBooleanfalseToggle the legend with the default settings.
legend.enabledBooleanfalseToggle the legend.
legend.iconsBooleantrueShow automatically generated icons on the legend.
legend.left.visibleBooleantrueBoth axis, left and right, have a corresponding legend. This toggles the visibility of the legend that is coupled with the left axis.
legend.left.positionString'top-left'Determine the position of the legend coupled to the left axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.
legend.right.visibleBooleantrueThis toggles the visibility of the legend that is coupled with the right axis.
legend.right.positionString'top-right'Determine the position of the legend coupled to the right axis. Options are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.
+ +

Timeline Options

+ +

+ Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D. + All options are optional. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
autoResizebooleantrueIf 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 redraw().
clickToUsebooleanfalseWhen a Graph2d is configured to be clickToUse, it will react to mouse and touch events only when active. + When active, a blue shadow border is displayed around the Graph2d. The Graph2d is set active by clicking on it, and is changed to inactive again by clicking outside the Graph2d or by pressing the ESC key.
endDate | Number | StringnoneThe 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.
heightNumber | StringnoneThe 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 maxHeight + to prevent the timeline from getting too high in case of automatically + calculated height. +
localeStringnoneSelect a locale for the Graph2d. See section Localization for more information.
localesObjectnoneA map with i18n locales. See section Localization for more information.
maxDate | Number | StringnoneSet a maximum Date for the visible range. + It will not be possible to move beyond this maximum. +
maxHeightNumber | StringnoneSpecifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".
minDate | Number | StringnoneSet a minimum Date for the visible range. + It will not be possible to move beyond this minimum. +
minHeightNumber | StringnoneSpecifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
orientationString'bottom'Orientation of the timeline: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.
showCurrentTimebooleantrueShow a vertical bar at the current time.
showCustomTimebooleanfalseShow 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 timechange is fired repeatedly. After the bar is dragged, the event timechanged is fired once.
showMajorLabelsbooleantrueBy 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 showMajorLabels is false, no major labels + are shown.
showMinorLabelsbooleantrueBy 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 showMinorLabels is false, no minor labels + are shown. When both showMajorLabels and + showMinorLabels are false, no horizontal axis will be + visible.
showMajorLinesbooleantrueBy default, the timeline shows both minor and major date lines on the + time axis. You can use this option to hide the lines from the major dates. +
showMinorLinesbooleantrueBy default, the timeline shows both minor and major date lines on the + time axis. You can use this option to hide the lines from the minor dates. +
startDate | Number | StringnoneThe initial start date for the axis of the timeline. + If not provided, the earliest date present in the events is taken as start date.
timeAxis.scalestringnoneSet a fixed scale for the time axis of the Timeline. Choose from 'millisecond', 'second', 'minute', 'hour', 'weekday', 'day', 'month', 'year'.
timeAxis.stepnumber1 + Set a fixed step size for the time axis. Only applicable when used together with timeAxis.scale. + Choose for example 1, 2, 5, or 10.
widthString'100%'The width of the timeline in pixels or as a percentage.
zoomMaxNumber315360000000000Set 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. +
zoomMinNumber10Set a minimum zoom interval for the visible range in milliseconds. + It will not be possible to zoom in further than this minimum. +
+ + +

Methods

+

+ The Graph2d supports the following methods. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
clear([what])none + 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. what = {items: true, groups: true, options: true}. Example usage: + +
Graph2d.clear();                // clear items, groups, and options
+Graph2d.clear({options: true}); // clear options only
+
+
clickFired when clicked inside the Graph2d. + + Passes a properties object as returned by the method Graph2d.getEventProperties(event). +
contextmenuFired when right-clicked inside the Graph2d. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped: +
graph2d.on('contextmenu', function (props) {
+  alert('Right click!');
+  props.event.preventDefault();
+});
+
+ 		+ Passes a properties object as returned by the method Graph2d.getEventProperties(event). +
destroy()noneDestroy the Graph2d. The Graph2d is removed from memory. all DOM elements and event listeners are cleaned up. +
doubleClickFired when double clicked inside the Graph2d. + + Passes a properties object as returned by the method Graph2d.getEventProperties(event). +
fit()noneAdjust the visible window such that it fits all items. +
getCurrentTime()DateGet the current time. Only applicable when option showCurrentTime is true. +
getCustomTime()DateRetrieve the custom time. Only applicable when the option showCustomTime is true. +
getEventProperties(event)Object + Returns an Object with relevant properties from an event: +
    +
  • pageX (Number): absolute horizontal position of the click event.
    • +
  • pageY (Number): absolute vertical position of the click event.
    • +
  • x (Number): relative horizontal position of the click event.
    • +
  • y (Number): relative vertical position of the click event.
    • +
  • time (Date): Date of the clicked event.
    • +
  • value (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.
    • +
  • what (String | null): name of the clicked thing: background, axis, dat-axis, custom-time, or current-time, legend.
    • +
  • event (Object): the original click event.
    • +
+
getLegend(groupId, iconWidth, iconHeight)SVGelement, String, StringReturns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right). +
getWindow()ObjectGet the current visible window. Returns an object with properties start: Date and end: Date.
getItemRange()ObjectGet the range of all the items as an object containing min: Date and max: Date.
hiddenDatesObjectnoneThis option allows you to hide specific timespans from the time axis. The dates can be supplied as an object: + {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']} or as an Array of these objects. The repeat argument is optional. + The possible values are (case-sensitive): daily, weekly, monthly, yearly. To hide a weekend, pick any Saturday as start and the following Monday as end + and set repeat to weekly. +
isGroupVisible(groupId)BooleanThis checks if the visible option of the supplied group (by ID) is true or false. +
moveTo(time [, options])noneMove the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options: +
    +
  • animate: boolean | number
    If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.
    • +
+
on(event, callback)noneCreate an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information.
off(event, callback)noneRemove an event listener created before via function on(event, callback). See section Events for more information.
redraw()noneForce a redraw of the Graph2d. Can be useful to manually redraw when option autoResize=false. +
setCurrentTime(time)noneSet a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time. + time can be a Date object, numeric timestamp, or ISO date string. + Only applicable when option showCurrentTime is true.
setCustomTime(time)noneAdjust the custom time bar. Only applicable when the option showCustomTime is true. time can be a Date object, numeric timestamp, or ISO date string. +
setGroups(groups)noneSet a data set with groups for the Graph2d. + groups 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 group, which + must correspond with the id of the group. +
setItems(items)noneSet a data set with items for the Graph2d. + items can be an Array with Objects, + a DataSet, or a DataView. +
setOptions(options)noneSet 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. +
setWindow(start, end)noneSet the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged.
+ + +

Events

+

+ Graph2d fires events when changing the visible window by dragging, when + selecting items, and when dragging the custom time bar. +

+ +

+ Here an example on how to listen for a rangeChanged event. A listener can be removed via the function off: +

+ +
+function onChange (properties) {
+  alert('changed!');
+}
+
+// add event listener
+Graph2d.on('rangechanged', onChange);
+
+// do stuff...
+
+// remove event listener
+Graph2d.off('rangechanged', onChange);
+
+ + +

+ The following events are available. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nameDescriptionProperties
finishedRedrawFired after a redraw is complete. When moving the Graph2d around, this could be fired frequently. + + none. +
rangechangeFired repeatedly when the user is dragging the Graph2d window. + +
    +
  • start (Number): timestamp of the current start of the window.
    • +
  • end (Number): timestamp of the current end of the window.
    • +
+
rangechangedFired once after the user has dragged the Graph2d window. + +
    +
  • start (Number): timestamp of the current start of the window.
    • +
  • end (Number): timestamp of the current end of the window.
    • +
+
timechangeFired repeatedly when the user is dragging the custom time bar. + Only available when the custom time bar is enabled. + +
    +
  • time (Date): the current time.
    • +
+
timechangedFired once after the user has dragged the custom time bar. + Only available when the custom time bar is enabled. + +
    +
  • time (Date): the current time.
    • +
+
+ +

Localization

+

+ Graph2d can be localized. For localization, Graph2d depends largely on the localization of moment.js. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales. +

+ +

+ To set a locale for the Graph2d, specify the option locale: +

+ +
var options = {
+  locale: 'nl'
+};
+
+ +

Create a new locale

+ +To load a locale into the Graph2d not supported by default, one can add a new locale to the option locales: + +
var options = {
+  locales: {
+    // create a new locale
+    mylocale: {
+      current: 'current',
+      time: 'time',
+    }
+  },
+
+  // use the new locale
+  locale: 'mylocale'
+};
+
+ +

Available locales

+ +Graph2d comes with support for the following locales: + + + + + + + + + + + +
LanguageCode
English + en
+ en_EN
+ en_US +
Dutch + nl
+ nl_NL
+ nl_BE +
+ +

Styles

+

+ All parts of the Graph2d have a class name and a default css style just like the Graph2d. + The styles can be overwritten, which enables full customization of the layout + of the Graph2d. +

+

+ 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! Example 4 and + example 5 show the usage of custom styles. +

+ +

Data Policy

+

+ All code and data is processed and rendered in the browser. + No data is sent to any server. +

+ +
+ + diff --git a/examples/graph2d/06_interpolation.html b/examples/graph2d/06_interpolation.html index 902712d9..47b31d69 100644 --- a/examples/graph2d/06_interpolation.html +++ b/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'); diff --git a/examples/graph2d/08_performance.html b/examples/graph2d/08_performance.html index ea238741..9625b51d 100644 --- a/examples/graph2d/08_performance.html +++ b/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 }; diff --git a/examples/graph2d/09_external_legend.html b/examples/graph2d/09_external_legend.html index 36794c02..39ec3228 100644 --- a/examples/graph2d/09_external_legend.html +++ b/examples/graph2d/09_external_legend.html @@ -186,10 +186,6 @@ margin-left: -5px; width: 900px; } - - - - diff --git a/examples/graph2d/10_barsSideBySide.html b/examples/graph2d/10_barsSideBySide.html index 9e0e14bb..c9d89f0f 100644 --- a/examples/graph2d/10_barsSideBySide.html +++ b/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); } diff --git a/examples/graph2d/11_barsSideBySideGroups.html b/examples/graph2d/11_barsSideBySideGroups.html index 69f40757..945fd30a 100644 --- a/examples/graph2d/11_barsSideBySideGroups.html +++ b/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); } diff --git a/examples/graph2d/12_customRange.html b/examples/graph2d/12_customRange.html index d41fc2ca..79e6a14f 100644 --- a/examples/graph2d/12_customRange.html +++ b/examples/graph2d/12_customRange.html @@ -23,13 +23,11 @@ 
 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
         },
diff --git a/examples/graph2d/16_bothAxis_titles.html b/examples/graph2d/16_bothAxis_titles.html
index 45f32881..3c08b18a 100644
--- a/examples/graph2d/16_bothAxis_titles.html
+++ b/examples/graph2d/16_bothAxis_titles.html
@@ -64,15 +64,6 @@
                     
                     
                 
-                
-                    Left decimals
-                    
-                    
-                
             
         
     
@@ -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)}}}});
-    }
-
 
 
 
\ No newline at end of file
diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js
index 93a22f4a..a13844bf 100644
--- a/lib/timeline/component/DataAxis.js
+++ b/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}
     }
   };
diff --git a/lib/timeline/component/GraphGroup.js b/lib/timeline/component/GraphGroup.js
index 9f58fdc8..4a8cfc11 100644
--- a/lib/timeline/component/GraphGroup.js
+++ b/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;
           }
         }
       }
diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
index e38d7079..2895c907 100644
--- a/lib/timeline/component/LineGraph.js
+++ b/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;
           }
         }
       }
diff --git a/lib/timeline/component/graph2d_types/line.js b/lib/timeline/component/graph2d_types/line.js
index d7f548aa..7d70e8d3 100644
--- a/lib/timeline/component/graph2d_types/line.js
+++ b/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);
   }