Area Chart Example

An example of a Google Area Chart.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>

<div class="col-md-12">
	<div class="tabbable">
		<ul class="nav nav-tabs" data-tabs="tabs">
			<li class="active">
				<a href="#One" data-toggle="tab">One</a>
			</li>
			<li>
				<a href="#Two" data-toggle="tab">Two</a>
			</li>
		</ul>
		<div class="tab-content" style="padding: 15px;">
			<div class="tab-pane active" id="One">
				<div class="tabbable">
					<ul class="nav nav-tabs" data-tabs="tabs">
						<li class="active">
							<a class="text-muted" href="#OneA" data-toggle="tab">OneA</a>
						</li>
						<li>
							<a class="text-muted" href="#OneB" data-toggle="tab">OneB</a>
						</li>
						<li>
							<a class="text-muted" href="#OneC" data-toggle="tab">OneC</a>
						</li>
					</ul>
					<div class="tab-content" style="padding: 15px;">
						<div class="tab-pane active" id="OneA">
							<div class="row">
								<div class="col-md-12">
									<div id="chart_div" style="width: 900px; height: 500px;"></div>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="OneB">
							OneB content
						</div>
						<div class="tab-pane" id="OneC">
							OneC content
						</div>
					</div>
				</div>
			</div>
			<div class="tab-pane" id="Two">
				<div class="tabbable">
					<ul class="nav nav-tabs" data-tabs="tabs">
						<li class="active">
							<a href="#TwoA" data-toggle="tab">TwoA</a>
						</li>
						<li>
							<a href="#TwoB" data-toggle="tab">TwoB</a>
						</li>
						<li>
							<a href="#TwoC" data-toggle="tab">TwoC</a>
						</li>
					</ul>
					<div class="tab-content" style="padding: 15px;">
						<div class="tab-pane active" id="TwoA">
							<div...

CSS

body{
    padding: 15px;    
}

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);
       
        var dataB = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  500,      200],
          ['2014',  350,      600],
          ['2015',  230,       45],
          ['2016',  800,      455]
        ]);

        var options = {
          title: 'Company A Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
          width:900,
          height:500
        };

          var optionsB = {
          title: 'Company B Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
          width:'100%',
          height:'100%'
        };
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        var chartB = new google.visualization.AreaChart(document.getElementById('chart_divB'));
        
        chart.draw(data, options);
        chartB.draw(dataB, optionsB); 
      }