Google Pie Chart in SharePoint Online (Step by Step tutorial)

by

We can use any of the chart JS libraries like High Charts, Google Charts, and supply the data using SharePoint JSOM or REST APIs. Here I am using Google Charts to get the pie chart in SharePoint Online. We can use Google Pie Chart in SharePoint 2013/2016.

Here I will show you how we can use Google Pie chart in SharePoint Online using JavaScript, Rest API. We will see how can we display Google Pie Chart using static data, as well as dynamic data from the SharePoint Online list.

Before you start, make sure you have added the required jQuery file which will help you to run the pie chart.

Google pie chart 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 Charts In SharePoint
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.

<script type="text/javascript">
    jQuery(document).ready(function () {
        var testdata = [];
        var URL="_spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('ListName')/Items?Selected=ID"
        jQuery.ajax({
            url: URL,
            type: "GET",          
            headers: { "Accept": "application/json" },
            success: function (data) {
                //script to build UI HERE
                var results = JSON.parse(data[1]);
                jQuery.each(results,function (key, item) {
                  
                    //You will get your data from REST API
                });
               var chart= new google.visualization.PieChart(document.getElementById('my_chart')).draw(data, options);

            },
            error: function (data) {
                //output error HERE
                alert(data.statusText);
            }
        });
    });
</script>
Google Pie chart in SharePoint online
Google Pie chart in SharePoint online

Integrate Google pie chart SharePoint Online

Once we have the code ready, we can add the JavaScript code inside a content editor web part or a script editor web part.

Here we will add the code inside a Script editor web part in a web part page.

Step-1: Go to your SharePoint web part page.

google pie chart sharepoint Online
Script Editor Web part in SharePoint online

Step-2: Edit the web part page and add the ‘Script Editor’ to the page by following the below instructions (refer to the below screenshot).

google pie chart sharepoint
Script Editor Web part SharePoint online

Step-3: Click on the ‘Edit Web Part’ option as shown below.

google pie chart sharepoint
Script Editor Web parts SharePoint online

Step-4: Copy and paste the code snippet in the ‘Web Part’ which I have written on top and click on the ‘Insert’ button and save the page.

Step-5: Once you click on OK, you will get an output like Pie charts.

building sharepoint dashboards with google chart
Google Pie chart in SharePoint online using JavaScript

This is how the Google pie chart in SharePoint Online looks like above.

You may like following SharePoint chart tutorials:

I hope this SharePoint Online tutorial helps to integrate Google Pie Chart in SharePoint Online or SharePoint 2013/2016.

  • Please update the J-Query reference file,if someone is facing any problem while executing the code.

    Reply

  • Question #1: Would your call to REST Services be placed in lines 7-17 in the orginal code or would it be placed in a second script editor?

    *For display purposes I attempted to place this code in a Sharepoint Online Modern Design site. Following your tutorial I noticed that there wasn’t a Script Editor, but only a Code Snippet web part. Call called into Office 365 support for another reason this morning and brought this up to technical support who also provided me with this post:

    https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/17290130-bring-back-script-editor-web-part-in-modern-shar

    Question #2: Has this code (and chart) been able to display on a Modern Design page?

    Reply

  • how do I add the required jQuery file? just save the url or I have to download the file? If I have to download in what format I have to save it? In notepad or other?

    Reply

    • Thanks for reading my post. You can do in both way. You can directly provide the JQuery reference or you can download the file and save it in a document library. Next provide the file URL which you have kept inside a Document library . The format most be Javascript means .js file.

      Reply
    • >