Categories: Tutorials

Integrating FusionCharts in SharePoint 2016: Guide

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


//Declaring array to hold the data in the list
var source=[ ];
var country =[ ];
var population =[ ];
//Performing AJAX call for with REST Endpoint for fetching data from List
$(function () {
    getListData();
});
function getListData() {
    var siteUrl = _spPageContextInfo.webAbsoluteUrl;
    var fullUrl = siteUrl + "/_api/web/lists/getbytitle('PopulationInfo')/items";
    $.ajax({
        url: fullUrl,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
        },
        success: onQuerySucceeded,
        error: onQueryFailed
    });
}
function onQuerySucceeded(data) {
//Storing fetched data in declared array

    $.each(data.d.results, function (key, value) {
        country.push(value.Country);
        population.push(value.Population);
    });
    for(var i=0;i<country .length;i++) {
        var dd = { };
        dd.label=country[i];
        dd.value=population[i];
        source.push(dd);
    }
//Declaring FusionCharts constructor and requisite JSON structure
    FusionCharts.ready(function () {
        var revenueChart = new FusionCharts({
            type: 'column2d',
            renderAt: 'chart-container',
            width: '550',
            height: '350',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Top Most Populated country in the world",
                    "subCaption": "World Population",
                    "xAxisName": "Country",
                    "yAxisName": "Population",
                    "paletteColors": "#0075c2",
                    "bgColor": "#ffffff",
                    "borderAlpha": "20",
                    "canvasBorderAlpha": "0",
                    "usePlotGradientColor": "0",
                    "plotBorderAlpha": "10",
                    "placevaluesInside": "1",
                    "rotatevalues": "1",
                    "valueFontColor": "#ffffff",                
                    "showXAxisLine": "1",
                    "xAxisLineColor": "#999999",
                    "divlineColor": "#999999",               
                    "divLineIsDashed": "1",
                    "showAlternateHGridColor": "0",
                    "subcaptionFontBold": "0",
                    "subcaptionFontSize": "14"
                },            
                "data":source
         
            }
        }).render();
    });
}
function onQueryFailed() {
    alert('Error!');
}

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!

Dishank Tiwari and Soumya Dutta