- On-Premises with installation of SharePoint Server physically
- On the Cloud with the help of Office 365
Table of Contents
Setting up the EnvironmentFor 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]
Let’s Get StartedFollowing are the steps to integrate FusionCharts in SharePoint 2016:
Step 1Assuming that you already have the subscription for Office 365, login with your credentials to https://login.microsoftonline.com/
Step 2Once you’ve logged in, you will be redirected to the homepage of Office 365.
Step 3From 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 4Click + icon of Create site option. Once done, select Team Site as shown below:
Step 5Insert Site Name and Description. You can also choose your project to be either private or public from Privacy Settings. Once done click Next.
Step 6Click Finish once you are done with the site creation.
Step 7A new Site will be created as shown in the image below:
Step 8Click Pages, present in the left panel of the page. It opens Site Pages as shown in the image below:
Step 9Click +New for creating New Page. Now, add name in the Name New Page text box as shown in the image below:
Step 10Click Create and select the Save option as shown in the image below:
Step 11A new page will be created as shown in the image below:
Step 12Select Site Contents for adding Custom List App as shown in the image below:
Step 13Under Site contents, select Add an App option as shown in the image below:
Step 14Next, select Custom List as shown below:
Step 15Give a Name to the newly created Custom List.
Step 16Once 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 17Next, select List from the Menu Item. It expands the Ribbon for adding columns.
Step 18Select 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 19Add 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 20Edit the previously created Page (the page which was created in Step 12) and add Script Editor Web Part control in the Page.
Step 21Open the context menu of the Script Editor and select Edit Web Part.
Step 22While editing the web part, add the following code:
//Adding jQuery reference //Adding FusionCharts referencehh