Area Chart Example

An example of a Google Area Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['a',    'b',   'c',   'd' ,  'e' ,'f' ],
    ['0',    100,   0,    50 ,  0 ,0],
    ['10',   200,   0,   150 , -300 ,0]
  ]);

  var ac = new google.visualization.AreaChart(document.getElementById('chart_div'));
  ac.draw(data, {
    isStacked: true,
    series: [{color: 'white', lineWidth: 0}, {color: 'blue'}, {color: 'red',  lineWidth: 0} ,{color: 'green', lineWidth: 0} , {color: 'blue'}],
    legend: {position: 'none'},
  });
}