Area Chart Example

An example of a Google Area Chart.

by Alexander

HTML

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

JavaScript

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

function rand(min, max) {
    return ~~(Math.random() * (max - min + 1)) + min;
}
      function drawChart() {
      	var startN = 11;
        var month = [
          'Январь',
          'Февраль',
          'Март',
					'Апрель',
					'Май',
          'Июнь',
          'Июль',
          'Август',
        ];
        
        var data = [ ['Время', 'Компании', 'Вакансии'] ];
        
        for (let i=0;i<month.length;i++) {
        	data.push([
          	month[i],
            startN,
            startN * rand(2,2.1) + i
          ]);
         	startN += rand(3,6);
        }
        
        data[8][1] = 47;
        data[8][2] = 97;
        //console.log(data);
        
        var data = google.visualization.arrayToDataTable(data);

        var options = {
          title: 'Рост проектов за последние полгода',
          hAxis: {title: '2017 год',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

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