Waterfall Chart Example

An example of a Google Waterfall Chart.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
				data.addColumn('string', 'Category');
        data.addColumn('number', 'MinimumLevel');
        data.addColumn('number', 'MinimumLevel1');
        data.addColumn('number', 'MaximumLevel');
        data.addColumn('number', 'MaximumLevel1');
        data.addColumn({type: 'number', role: 'tooltip'});
        data.addColumn({type: 'string', role: 'style'});
        data.addColumn({type: 'number', role: 'annotation'});

        data.addRow(['Category 1', 0 , 0, 5, 5, 5,'gray',5]);
        data.addRow(['Category 2', 5 , 5, 10, 10, 10,'red',10]);
        data.addRow(['Category 3', 10 , 10, 15, 15, 15,'blue',15]);
        data.addRow(['Category 4', 15 , 15, 10, 10, 10,'yellow',10]);
        data.addRow(['Category 5', 10 , 10, 5, 5, 5,'gray',5]);

        var options = {
          legend: 'none',
          bar: { groupWidth: '60%' } // Remove space between bars.
        };

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }