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.
Before you start, make sure you have added the required jQuery file which will help you to run the pie chart.
Google pie chart
The code given below generates Pie Chart with static data.
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.
Integrate Google pie chart SharePoint Online
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.
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).
Step-3: Click on the ‘Edit Web Part’ option as shown below.
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.
This is how the Google pie chart in SharePoint Online looks like above.
You may like following SharePoint chart tutorials:
- Enable Chart Web Part in SharePoint 2013 or SharePoint 2016 and SharePoint Online
- Review of Collabion Charts for SharePoint: A 100% code-free product for all business users
- Quick Chart Web Part in Modern SharePoint Online Site
- SharePoint Online Gantt Chart View for Task List
- Create Highcharts in SharePoint using Rest API
- How to embed google maps in SharePoint
- How to create a survey in SharePoint
- How to enable tree view in SharePoint Online
- SharePoint employee of the month web part
I hope this SharePoint Online tutorial helps to integrate Google Pie Chart in SharePoint Online or SharePoint 2013/2016.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Please update the J-Query reference file,if someone is facing any problem while executing the code.
it does not work
Send me the error
can you please let me know if recruitment is happening in your company?
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:
Question #2: Has this code (and chart) been able to display on a Modern Design page?
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?