Added support to supply an end to bar charts to have them scale (#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
7 years ago · d0f2a63b91
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@ -297,7 +297,13 @@ var items = [
            <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>

--- 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>
--- 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;
    }
  }
 };

--- 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 = {