SharePoint is a collaboration tool that integrates with Microsoft Office. Launched in 2001, SharePoint provides web based collaborative platform and content management system.
The basic structure of SharePoint 2016 can be implemented by following procedure:
- On-Premises with installation of SharePoint Server physically
- On the Cloud with the help of Office 365
This tutorial tells you about how you can implement FusionCharts and visualize data stored in SharePoint list after fetching it using Rest API. From the two procedures listed above, we’ll implement SharePoint 2016 on the cloud through Office 365.
Setting up the Environment
For integrating FusionCharts in SharePoint first we need to make sure that we have the following components:
- Valid Office 365 subscription [Click here for the signup and subscription process of Office 365]
- FusionCharts Suite XT [Download Link]
Note: You can also use FusionCharts trial version [CDN Link]
- JQuery [CDN Link]
REST API is a programming architectural implementation. It increases the efficiency of communication (in computing systems) by making the data easily available by sharing only the references instead of the data itself. In this tutorial, we’ll fetch the listed data of the SharePoint using REST API.
Let’s Get Started
Following are the steps to integrate FusionCharts in SharePoint 2016:
Assuming that you already have the subscription for Office 365, login with your credentials to https://login.microsoftonline.com/
Once you’ve logged in, you will be redirected to the homepage of Office 365.
From the dashboard shown in the above image, select SharePoint. You will be redirected to the landing page of SharePoint as shown in the image below:
Click + icon of Create site option.
Once done, select Team Site as shown below:
Insert Site Name and Description. You can also choose your project to be either private or public from Privacy Settings. Once done click Next.
Click Finish once you are done with the site creation.
A new Site will be created as shown in the image below:
Click Pages, present in the left panel of the page.
It opens Site Pages as shown in the image below:
Click +New for creating New Page.
Now, add name in the Name New Page text box as shown in the image below:
Click Create and select the Save option as shown in the image below:
A new page will be created as shown in the image below:
Select Site Contents for adding Custom List App as shown in the image below:
Under Site contents, select Add an App option as shown in the image below:
Next, select Custom List as shown below:
Give a Name to the newly created Custom List.
Once you give a name to the Custom List, the page will be redirected to Site Contents page again. Select newly created list for inserting values as shown below:
Next, select List from the Menu Item.
It expands the Ribbon for adding columns.
Select Create Column Ribbon item. A Create Column dialog box opens where you have to insert Name for the column. Select data type and click OK as shown below:
Note: You can add as many columns as you want.
Add data to the table created in Step 18.
Note: The final chart will be rendered using this data.
Once you are done with inserting data in the columns, click Stop editing.
Edit the previously created Page (the page which was created in Step 12) and add Script Editor Web Part control in the Page.
Open the context menu of the Script Editor and select Edit Web Part.
While editing the web part, add the following code:
//Adding jQuery reference //Adding FusionCharts referencehh
Save the page when you are done with all the changes mentioned above.
FusionCharts will render as shown in the image below:
Perfect isn’t it?
This was the complete step-by-step process for integrating FusionCharts and visualizing data stored in SharePoint list after fetching it using Rest API. If you are stuck anywhere, drop us a line at [email protected] . Happy to help!