Added support to supply an end to bar charts to have them scale (alme…

…nde#2760) * Added support to supply an X2 to bar charts to have them scale * Fixed graph2d stacking issue. It no longer takes into account hidden items * Changed x2 to end per recommendation and added this to the docs
marcortw · Mar 6, 2017 · b182384 · b182384
1 parent cf9934d
commit b182384
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 4 deletions.
diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
@@ -297,7 +297,13 @@ <h3 id="items">Items</h3>
             <td>label</td>
             <td>Object</td>
             <td>no</td>
-            <td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations </td>
+            <td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations.</td>
+        </tr>
+         <tr>
+            <td>end</td>
+            <td>Date</td>
+            <td>no</td>
+            <td>A location on the x-axis that when supplied will have the bar stretch to the end point and ignore the barChart.width property.</td>
         </tr>
     </table>
 

diff --git a/examples/graph2d/21_barsWithEnd.html b/examples/graph2d/21_barsWithEnd.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graph Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graph With End Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows how you can plot a bar chart and supply an end value to have it fill.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11 00:00:00', end: '2014-06-13 00:00:00', y: 10 },
+        {x: '2014-06-13 00:00:00', end: '2014-06-14 00:00:00', y: 15 },
+        {x: '2014-06-15 00:00:00', end: '2014-06-16 00:00:00', y: 14 },
+        {x: '2014-06-16 00:00:00', end: '2014-06-17 00:00:00', y: 17 },
+        {x: '2014-06-17 00:00:00', end: '2014-06-18 00:00:00', y: 20 },
+        {x: '2014-06-18 00:00:00', end: '2014-06-25 00:00:00', y: 25 },
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options);
+
+</script>
+</body>
+</html>
diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js
@@ -487,6 +487,7 @@ LineGraph.prototype._updateAllGroupData = function (ids, groupIds) {
       //Copy data (because of unmodifiable DataView input.
       var extended = util.bridgeObject(item);
       extended.x = util.convert(item.x, 'Date');
+      extended.end = util.convert(item.end, 'Date');
       extended.orginalY = item.y; //real Y
       extended.y = Number(item.y);
       extended[fieldId] = item[fieldId];
@@ -908,10 +909,10 @@ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
         // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
         if (options.stack === true && options.style === 'bar') {
           if (options.yAxisOrientation === 'left') {
-            combinedDataLeft = combinedDataLeft.concat(group.getItems());
+            combinedDataLeft = combinedDataLeft.concat(groupData);
           }
           else {
-            combinedDataRight = combinedDataRight.concat(group.getItems());
+            combinedDataRight = combinedDataRight.concat(groupData);
           }
         }
         else {
@@ -1064,6 +1065,12 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) {
   for (var i = 0; i < datapoints.length; i++) {
     datapoints[i].screen_x = toScreen(datapoints[i].x) + this.props.width;
     datapoints[i].screen_y = datapoints[i].y; //starting point for range calculations
+    if (datapoints[i].end != undefined) {
+      datapoints[i].screen_end = toScreen(datapoints[i].end) + this.props.width;
+    }
+    else {
+      datapoints[i].screen_end = undefined;
+    }
   }
 };
 

diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
@@ -62,8 +62,10 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
         for (j = 0; j < processedGroupData[groupIds[i]].length; j++) {
           combinedData.push({
             screen_x: processedGroupData[groupIds[i]][j].screen_x,
+            screen_end: processedGroupData[groupIds[i]][j].screen_end,
             screen_y: processedGroupData[groupIds[i]][j].screen_y,
             x: processedGroupData[groupIds[i]][j].x,
+            end: processedGroupData[groupIds[i]][j].end,
             y: processedGroupData[groupIds[i]][j].y,
             groupId: groupIds[i],
             label: processedGroupData[groupIds[i]][j].label
@@ -128,7 +130,21 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
         drawData.offset += (intersections[key].resolved) * drawData.width - (0.5 * drawData.width * (intersections[key].amount + 1));
       }
     }
-    DOMutil.drawBar(combinedData[i].screen_x + drawData.offset, combinedData[i].screen_y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
+
+    let dataWidth = drawData.width;
+    let start = combinedData[i].screen_x;
+
+    // are we drawing explicit boxes? (we supplied an end value)
+    if (combinedData[i].screen_end != undefined){
+      dataWidth = combinedData[i].screen_end - combinedData[i].screen_x;
+      start += (dataWidth * 0.5);
+    }
+    else {
+      start += drawData.offset
+    }
+
+    DOMutil.drawBar(start, combinedData[i].screen_y - heightOffset, dataWidth, group.zeroPosition - combinedData[i].screen_y, group.className + ' vis-bar', framework.svgElements, framework.svg, group.style);
+
     // draw points
     if (group.options.drawPoints.enabled === true) {
       let pointData = {