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. REST API will load any of the SharePoint JavaScript files for implementation. All the calls to the REST API are performed with JavaScript AJAX calls. In this tutorial, we’ll be using jQuery’s AJAX methods for our example.
Let’s Get Started
Following are the steps to integrate FusionCharts in SharePoint 2016:
Step 1
Assuming that you already have the subscription for Office 365, login with your credentials to
https://login.microsoftonline.com/ Step 2
Once you’ve logged in, you will be redirected to the homepage of Office 365.
Step 3
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:
Step 4
Click
+ icon of
Create site option.
Once done, select
Team Site as shown below:
Step 5
Insert Site Name and Description. You can also choose your project to be either private or public from
Privacy Settings. Once done click
Next.
Step 6
Click
Finish once you are done with the site creation.
Step 7
A new Site will be created as shown in the image below:
Step 8
Click
Pages, present in the left panel of the page.
It opens
Site Pages as shown in the image below:
Step 9
Click
+New for creating New Page.
Now, add name in the
Name New Page text box as shown in the image below:
Step 10
Click
Create and select the
Save option as shown in the image below:
Step 11
A new page will be created as shown in the image below:
Step 12
Select
Site Contents for adding
Custom List App as shown in the image below:
Step 13
Under Site contents, select
Add an App option as shown in the image below:
Step 14
Next, select
Custom List as shown below:
Step 15
Give a
Name to the newly created
Custom List.
Step 16
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:
Step 17
Next, select
List from the
Menu Item.
It expands the Ribbon for adding columns.
Step 18
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.
Step 19
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.
Step 20
Edit the previously created Page (the page which was created in Step 12) and
add Script Editor Web Part control in the Page.
Step 21
Open the context menu of the Script Editor and select
Edit Web Part.
Step 22
While editing the
web part, add the following code:
//Adding jQuery reference
//Adding FusionCharts reference
hh
Step 23
Save the page when you are done with all the changes mentioned above.
Step 24
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
support@fusioncharts.com . Happy to help!