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">OntfrdgeA</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: 10005px;    
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}

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 options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

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

		$("a[href='#One']").on('shown.bs.tab', function (e) {
			google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
			clearChart();
		});         
          
      }


      google.setOnLoadCallback(drawChartB);
      function drawChartB() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  100,      480],
          ['2014',  170,      4660],
          ['2015',  860,       120],
          ['2016',  1730,      940]
        ]);

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

        var chart = new google.visualization.AreaChart(document.getElementById('chart_divB'));
        chart.draw(data, options);
          
		$("a[href='#Two']").on('shown.bs.tab', function (e) {
			google.load('visualization', '1', {packages: ['corechart'], callback: drawChartB});
			clearChart();
		});
          
      }