Search

Google Pie Chart in SharePoint Online

The code given below generates Pie Chart with static data.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js" >
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" ></script>

<head>
   
	<script type="text/javascript">	   
	google.charts.load("current", {packages:["corechart"]});
     google.charts.setOnLoadCallback(drawChart);
	 
			$(document).ready(function() {			  
				drawChart();              
			});
			
			});			   
	 function drawChart() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Problems', 'Hours per Day'],
	  ['ACMV', '0'],
      ['Carpentry & Hot works', '367'],
      ['Electrical', '83.55'],
      ['General', '63.1'],
      ['MHS','0'],
      ['Sanitation', '0'],
    ]);
    var options = {
      title: 'Facilities Work Order February',
	  is3D: true,
    };
     // Create and draw the visualization.
    new google.visualization.PieChart(
      document.getElementById('my_chart')).draw(data, options);
  }
	
</script>
		
</head>

<body>
                                       
<div class="container">

<div class="row">

<div id="my_chart" style="width: 500px; height: 300px">

</div>
</div>
</div>

</body>


Google Pie chart in SharePoint online


I have hardcoded the value in the above code, but we can also call REST services to fetch the data from SharePoint Online list which I posted in below code.