
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.