Google Chart Pie Chart

by Devendra Mani

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="top-five-charts">
<div class="chart-wrapper"><div id="chart1" class="insight-pie" ></div></div>
<div class="chart-wrapper"><div id="chart2" class="insight-pie" ></div></div>
<div class="chart-wrapper"><div id="chart3" class="insight-pie" ></div></div>
</div>

CSS

.chart-wrapper{
 	float: left;
 	width: 33%;
 }
 .top-five-charts{
 	width: 100%;
 	display: block;
 }

JavaScript

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     5],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          //title: 'industries For USA',
         // 'width':'400',
         // 'height':'300',
          pieSliceText: 'value',
          pieHole:'0.5',

         legend: { position: 'labeled',
               labeledValueText: 'both',
		        textStyle: {
		            color: 'blue', 
		            fontSize: 14
		        }
         },
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
        var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
        var chart3  = new google.visualization.PieChart(document.getElementById('chart3'));
        options.title = 'industries For USA';
        chart1.draw(data, options);
        options.title = 'Categories For USA';
        chart2.draw(data, options);
        options.title = 'Categories For Construction';
        chart3.draw(data, options);
      }