Search code examples
javascriptgoogle-visualization

Google Visualization stacked BarChart with interval, why is it stacking the interval?

Please see the below snippet for a stacked BarChart that has a min/max interval.

Why is is stacking the interval values with the data points? Please see the picture for my desired output.

Thanks as always for the assistance!!

UPDATE: ADDITIONAL INFO:

To achieve the behavior I wanted I have to manipulate the array. I subtracted the "Available" from the "Min interval" and "Max interval". This is not something I would want to do in practice. Is this stacking behavior a bug?

dataOrig.addRows([
    ['PART 123', 100, 10, 50-100, 150-100],    
  ]);

UPDATE 2: ANSWER

I have figured out that the two intervals must be just after the first data point in the array. Then it draws properly. I have posted the answer below.

Documentation at Google

enter image description here

  google.charts.load('current', {
      'packages': ['corechart']
    });

    google.charts.setOnLoadCallback(gChart0);

    function gChart0() {
      drawDashboard()
    }

    function drawDashboard() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Material'); 
      data.addColumn('number', 'Available');
      data.addColumn('number', 'Blocked');
      data.addColumn({
        type: 'number',
        role: 'interval'
      });
      data.addColumn({
        type: 'number',
        role: 'interval'
      });
      data.addRows([
        ['PART 123', 100, 10, 50, 150],     
      ]);

      var chart = new google.visualization.BarChart(
        document.getElementById('chart'));

      var options = {
        width: 800, height: 600, title: 'MIN MAX Board',
        intervals: {
          style: 'boxes',
          lineWidth: 2,
            barWidth: 0.5,
          color: "#ff0000",
          
        },
        tooltip: { isHtml: true },
        isStacked: true,
      }
      chart.draw(data, options);
    }
<script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id='chart'></div>

Solution

  • I have figured out that the two intervals must be just after the first data point in the array. Then it draws properly. I have posted the answer below.

    google.charts.load('current', {
      'packages': ['corechart']
    });

    google.charts.setOnLoadCallback(gChart0);

    function gChart0() {
      drawDashboard()
    }

    function drawDashboard() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Material'); 
      data.addColumn('number', 'Available');
      data.addColumn({//Moved just after first data point
        type: 'number',
        role: 'interval'
      });
      data.addColumn({//Moved just after first data point
        type: 'number',
        role: 'interval'
      });
      data.addColumn('number', 'Blocked');
      
      data.addRows([
        //OLD['PART 123', 100, 10, 50, 150],
        ['PART 123', 100, 50, 150, 10],//Moved interval just after first data point
      ]);

      var chart = new google.visualization.BarChart(
        document.getElementById('chart'));

      var options = {
        width: 800, height: 600, title: 'MIN MAX Board',
        intervals: {
          style: 'boxes',
          lineWidth: 2,
            barWidth: 0.5,
          color: "#ff0000",
          
        },
        tooltip: { isHtml: true },
        isStacked: true,
      }
      chart.draw(data, options);
    }
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id='chart'></div>