diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 630b3440..92bf9ab6 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -246,8 +246,6 @@

Graph2d can load data from an Array, a DataSet (offering 2 way data binding), or a DataView (offering one way data binding). 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:

@@ -760,8 +758,9 @@ onRender: function(item, group, graph2d) { shaded.orientation String - 'bottom' - This determines if the shaded area is at the bottom or at the top of the curve. The options are 'bottom' or 'top'. + 'zero' + This determines if the shaded area is at the bottom or at the top of the curve, or always towards the zero-axis of the graph. The options are 'zero', 'bottom' or 'top'. + See Example 20 what these options look like. shaded.style @@ -1318,15 +1317,6 @@ Graph2d.off('rangechanged', onChange); - - finishedRedraw - - none. - - Fired after a redraw is complete. When moving the Graph2d around, this could be fired frequently. - - - rangechange diff --git a/examples/graph2d/20_shading.html b/examples/graph2d/20_shading.html new file mode 100644 index 00000000..62d09239 --- /dev/null +++ b/examples/graph2d/20_shading.html @@ -0,0 +1,91 @@ + + + + Graph2d | Shading Example + + + + + + + + +

Graph2d | Shading Example

+
+ This example shows the shading functionality within Graph2d. +
+
+ +
+ + + + diff --git a/lib/timeline/component/graph2d_types/line.js b/lib/timeline/component/graph2d_types/line.js index 7d70e8d3..7a866c3d 100644 --- a/lib/timeline/component/graph2d_types/line.js +++ b/lib/timeline/component/graph2d_types/line.js @@ -133,13 +133,17 @@ Line.prototype.draw = function (dataset, group, framework) { // append with points for fill and finalize the path if (group.options.shaded.enabled == true) { var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.svg); - var dFill; + var zero = 0; if (group.options.shaded.orientation == 'top') { - dFill = 'M' + dataset[0].x + ',' + 0 + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + 0; + zero = 0; + } + else if (group.options.shaded.orientation == 'bottom') { + zero = svgHeight; } else { - dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight; + zero = Math.min(Math.max(0,group.zeroPosition),svgHeight); } + var dFill = 'M' + dataset[0].x + ',' + zero + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + zero; fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill'); if(group.options.shaded.style !== undefined) { fillPath.setAttributeNS(null, 'style', group.options.shaded.style); diff --git a/lib/timeline/optionsGraph2d.js b/lib/timeline/optionsGraph2d.js index f849692b..693df725 100644 --- a/lib/timeline/optionsGraph2d.js +++ b/lib/timeline/optionsGraph2d.js @@ -33,7 +33,7 @@ let allOptions = { graphHeight: {string, number}, shaded: { enabled: {boolean}, - orientation: {string:['bottom','top']}, // top, bottom + orientation: {string:['bottom','top','zero']}, // top, bottom, zero __type__: {boolean,object} }, style: {string:['line','bar','points']}, // line, bar @@ -172,7 +172,7 @@ let configureOptions = { stack:false, shaded: { enabled: false, - orientation: ['top','bottom'] // top, bottom + orientation: ['zero','top','bottom'] // zero, top, bottom }, style: ['line','bar','points'], // line, bar barChart: { @@ -268,4 +268,4 @@ let configureOptions = { } }; -export {allOptions, configureOptions}; \ No newline at end of file +export {allOptions, configureOptions};