Stepped Area Chart Example

An example of a Google Stepped Area Chart.

by Michel Penke

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="verlauf_invest" style="width: 100%; height: 500px; margin-bottom: 20px;"></div>
       <div id="chart_div"></div>

JavaScript

google.charts.load('current', {'packages':['corechart', 'line']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Director (Year)',  'Westwing', 'Jumia', 'Foodpanda', 'Linio', 'Delivery Hero', 'Lazada', 'LaNeveraRoja / Pizzabo', 'Global Fashion Group', 'Home24', 'HelloFresh'],
          ['April ´15', 0.15, 0.04, 0.28, 0.09, 0.23, 0.98, 0.13, 0.63, 0.41, 0.32],
          ['Juni ´15', 0.15, 0.04,  0.28, 0.09, 0.23, 1.08, 0.13, 0.67, 0.44, 0.32],
          ['September ´15', 0.15, 0.04, 0.28, 0.09, 0.23, 1.08, 0.13, 0.68, 0.44, 1.47 ],
          ['November ´15', 0.15, 0.04, 0.28, 0.12, 0.23, 1.08, 0.13, 0.68, 0.44, 1.47],
          ['März ´16', 0.15, 0.07, 0.28, 0.08, 0.23, 1.08, 0, 0.68, 0.44, 1.47],
          ['April ´16', 0.15, 0.07, 0.28, 0.08, 0.15, 1.08, 0, 0.18, 0.44, 1.47],
          ['September ´16', 0.15, 0.07, 0.28, 0.08, 0.15, 1.08, 0, 0.18, 0.18, 1.47]
        ]);

        var options = {
          title: 'Last Portfolio Value bei Rocket Internet',
          vAxis: {title: '', position: 'false'},
          isStacked: true,
          legend: { position: 'true' },
          width: '100%', 
          chartArea: {width: '70%', left: 50}, 
            colors: ['#dd4477', '#6D4C41', '#424242', '#109618', '#009688', '#dc3912', '#8BC34A', '#990099', '#0099c6', '#ff9900']
        };

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

        chart.draw(data, options);
      }


google.charts.setOnLoadCallback(drawLineColors);      
      function drawLineColors() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Unternehmen');
      data.addColumn('number', 'Global Fashion Group');
      data.addColumn('number', 'Home24');
      data.addColumn('number', 'Westwing');
      data.addColumn('number', 'HelloFresh');
      data.addColumn('number', 'Linio');
     ...