We all know that charts are the best way of representing the data to the user. In some sites, we may not have the default chart web part in SharePoint. In such cases, we can go for Google api charts. Google api charts are the one which can be used by anyone. Please find the below steps to use Google api charts in your site:
- Download the below files and upload it in Site Assets
- Create a text file(say, MasterChart.txt) and copy the below code into the text file:
- Save the code and upload it in Site Assets.
- Copy the link location of MasterChart.txt
- Go to the page where you have to show your chart
- Edit the page, insert the content editor web part, paste the link copied into “Content Link” in Content Editor web part and click OK.
- You will get the below message.Click OK
- Stop editing the page and click on the inverted triangle to fill the chart options and hit Save button.
- Chart will be generated as shown below
For more than one chart in the same page:
- If you need to show more than one chart, create a text file(say, SlaveChart.txt), type the below code, save it and upload it in Site Assets.
- Insert any number of content editor web parts depending on the number of charts to be shown and paste the SlaveChart.txt link in “Content Link”. Remember that if you remove the Master Chart, Slave Chart will not work.
- Options and advanced options in Chart will make your chart more attractive and specific.
- Some of the options to make your chart attractive:
|All||title||Quarter II Results (Your Chart Title)|
|Pie charts||is3D||true (converts chart from 2D into 3D and it is applicable only for few chart types)|
|Donut Charts||pieHole||0.3(any value between 0 and 1)|
To create filters for the chart, please follow the below steps:
- Check the box “Use custom CAML”
- Check the box “Create filters above the chart” and select the field from “prefill Textarea from available fields” dropdown
- Then, click on the link “Build CAML from selected filters” and hit save button.
- Chart with drop down at the top will be created. Sample is shown below:
NOTE: Filters might not work when the other chart options like chart type, columns are filled for the first time.
For more details and updates, please refer the original article here
Thanks for reading 🙂
If you liked it, Please rate and comment.