{"id":16162,"date":"2017-09-07T02:10:30","date_gmt":"2017-09-06T20:40:30","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16162"},"modified":"2026-01-20T14:41:18","modified_gmt":"2026-01-20T09:11:18","slug":"integrating-fusioncharts-in-sharepoint-2016","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/","title":{"rendered":"Integrating FusionCharts in SharePoint 2016: Guide"},"content":{"rendered":"<strong>SharePoint<\/strong> is a collaboration tool that integrates with Microsoft Office. Launched in 2001, SharePoint provides web based collaborative platform and content management system.\r\n\r\nThe basic structure of  SharePoint 2016 can be implemented by following procedure:  \r\n\r\n<ul>\r\n\t<li>On-Premises with installation of SharePoint Server physically<\/li>\r\n\t<li>On the Cloud with the help of Office 365<\/li>\r\n<\/ul>\r\n\r\nThis 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\u2019ll implement SharePoint 2016 on the cloud through Office 365.\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Setting_up_the_Environment\" title=\"Setting up the Environment\">Setting up the Environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Lets_Get_Started\" title=\"Let\u2019s Get Started\">Let\u2019s Get Started<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_1\" title=\"Step 1\">Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_2\" title=\"Step 2\">Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_3\" title=\"Step 3\">Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_4\" title=\"Step 4\">Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_5\" title=\"Step 5\">Step 5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_6\" title=\"Step 6\">Step 6<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_7\" title=\"Step 7\">Step 7<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_8\" title=\"Step 8\">Step 8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_9\" title=\"Step 9\">Step 9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_10\" title=\"Step 10\">Step 10<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_11\" title=\"Step 11\">Step 11<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_12\" title=\"Step 12\">Step 12<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_13\" title=\"Step 13\">Step 13<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_14\" title=\"Step 14\">Step 14<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_15\" title=\"Step 15\">Step 15<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_16\" title=\"Step 16\">Step 16<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_17\" title=\"Step 17\">Step 17<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_18\" title=\"Step 18\">Step 18<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_19\" title=\"Step 19\">Step 19<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_20\" title=\"Step 20\">Step 20<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_21\" title=\"Step 21\">Step 21<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_22\" title=\"Step 22\">Step 22<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_23\" title=\"Step 23\">Step 23<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#Step_24\" title=\"Step 24\">Step 24<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Setting_up_the_Environment\"><\/span>Setting up the Environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\nFor integrating FusionCharts in SharePoint first we need to make sure that we have the following components:\r\n\r\n<ul>\r\n\t<li>Valid Office 365 subscription [Click here for the signup and subscription process of Office 365]<\/li>\r\n\t<li>FusionCharts Suite XT [<a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener\">Download Link<\/a>]\r\n<strong>Note: <\/strong>You can also use FusionCharts trial version [<a href=\"https:\/\/static.fusioncharts.com\/code\/latest\/fusioncharts.js\" target=\"_blank\" rel=\"noopener\">CDN Link<\/a>]<\/li>\r\n\t<li>JQuery [<a href=\"https:\/\/code.jquery.com\/jquery-1.11.0.min.js\" target=\"_blank\" rel=\"noopener\">CDN Link<\/a>]<\/li>\r\n<\/ul>\r\n\r\nREST 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\u2019ll fetch the listed data of the SharePoint using REST API.\r\n\r\nREST 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\u2019ll be using jQuery\u2019s AJAX methods for our example.\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"Lets_Get_Started\"><\/span>Let\u2019s Get Started<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\nFollowing are the steps to integrate FusionCharts  in SharePoint 2016:\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nAssuming that you already have the subscription for Office 365, login with your credentials to <a href=\"https:\/\/login.microsoftonline.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/login.microsoftonline.com\/<\/a>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png\" alt=\"\" width=\"1366\" height=\"700\" class=\"alignnone size-full wp-image-16165\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/login.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/login-150x77.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nOnce you\u2019ve logged in, you will be redirected to the homepage of Office 365.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/home.png\" alt=\"\" width=\"1366\" height=\"699\" class=\"alignnone size-full wp-image-16167\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/home.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/home-150x77.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nFrom 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:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/sharepoint-landing.png\" alt=\"\" width=\"1366\" height=\"701\" class=\"alignnone size-full wp-image-16168\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/sharepoint-landing.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/sharepoint-landing-150x77.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nClick <strong>+<\/strong> icon of <strong>Create site<\/strong> option.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/sharepoint-landing_create.png\" alt=\"\" width=\"400\" height=\"148\" align=\"middle\" class=\"alignnone size-full wp-image-16169\" \/>\r\n\r\nOnce done, select <strong>Team Site<\/strong> as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/create-site.png\" alt=\"\" width=\"1366\" height=\"698\" class=\"alignnone size-full wp-image-16171\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/create-site.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/create-site-150x77.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_5\"><\/span>Step 5<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nInsert Site Name and Description. You can also choose your project to be either private or public from <strong>Privacy Settings<\/strong>. Once done click <strong>Next<\/strong>.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/next_name.png\" alt=\"\" width=\"922\" height=\"618\" class=\"alignnone size-full wp-image-16172\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/next_name.png 922w, \/blog\/wp-content\/uploads\/2017\/09\/next_name-150x101.png 150w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_6\"><\/span>Step 6<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nClick <strong>Finish<\/strong> once you are done with the site creation.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/finish.png\" alt=\"\" width=\"1364\" height=\"697\" class=\"alignnone size-full wp-image-16173\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/finish.png 1364w, \/blog\/wp-content\/uploads\/2017\/09\/finish-150x77.png 150w\" sizes=\"auto, (max-width: 1364px) 100vw, 1364px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_7\"><\/span>Step 7<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nA new Site will be created as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/new-site.png\" alt=\"\" width=\"1366\" height=\"661\" class=\"alignnone size-full wp-image-16174\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/new-site.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/new-site-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_8\"><\/span>Step 8<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nClick <strong>Pages<\/strong>, present in the left panel of the page.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/new-site_page.png\" alt=\"\" width=\"481\" height=\"464\" align=\"middle\" class=\"alignnone size-full wp-image-16175\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/new-site_page.png 481w, \/blog\/wp-content\/uploads\/2017\/09\/new-site_page-150x145.png 150w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/>\r\n\r\nIt opens <strong>Site Pages<\/strong> as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/Pages.png\" alt=\"\" width=\"1363\" height=\"666\" class=\"alignnone size-full wp-image-16176\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/Pages.png 1363w, \/blog\/wp-content\/uploads\/2017\/09\/Pages-150x73.png 150w\" sizes=\"auto, (max-width: 1363px) 100vw, 1363px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_9\"><\/span>Step 9<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nClick <strong>+New<\/strong> for creating New Page.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/Pages_new.png\" alt=\"\" width=\"400\" height=\"124\" align=\"middle\" class=\"alignnone size-full wp-image-16177\" \/>\r\n\r\nNow, add name in the <strong>Name New Page<\/strong> text box as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/add-name.png\" alt=\"\" width=\"1365\" height=\"663\" class=\"alignnone size-full wp-image-16178\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/add-name.png 1365w, \/blog\/wp-content\/uploads\/2017\/09\/add-name-150x73.png 150w\" sizes=\"auto, (max-width: 1365px) 100vw, 1365px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_10\"><\/span>Step 10<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nClick <strong>Create<\/strong> and select the <strong>Save<\/strong> option as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/save.png\" alt=\"\" width=\"1366\" height=\"664\" class=\"alignnone size-full wp-image-16179\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/save.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/save-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_11\"><\/span>Step 11<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nA new page will be created as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/new-page-after-save.png\" alt=\"\" width=\"1366\" height=\"666\" class=\"alignnone size-full wp-image-16181\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/new-page-after-save.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/new-page-after-save-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_12\"><\/span>Step 12<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nSelect <strong>Site Contents<\/strong> for adding <strong>Custom List App<\/strong> as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/site-content.png\" alt=\"\" width=\"1366\" height=\"666\" class=\"alignnone size-full wp-image-16180\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/site-content.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/site-content-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_13\"><\/span>Step 13<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nUnder Site contents, select <strong>Add an App<\/strong> option as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/add-an-app.png\" alt=\"\" width=\"1366\" height=\"662\" class=\"alignnone size-full wp-image-16182\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/add-an-app.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/add-an-app-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_14\"><\/span>Step 14<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nNext, select <strong>Custom List<\/strong> as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/Custom-List.png\" alt=\"\" width=\"1366\" height=\"664\" class=\"alignnone size-full wp-image-16183\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/Custom-List.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/Custom-List-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_15\"><\/span>Step 15<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nGive a <strong>Name<\/strong> to the newly created <strong>Custom List<\/strong>.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/name-customlist.png\" alt=\"\" width=\"1365\" height=\"663\" class=\"alignnone size-full wp-image-16184\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/name-customlist.png 1365w, \/blog\/wp-content\/uploads\/2017\/09\/name-customlist-150x73.png 150w\" sizes=\"auto, (max-width: 1365px) 100vw, 1365px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_16\"><\/span>Step 16<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nOnce you give a name to the <strong>Custom List<\/strong>, the page will be redirected to Site Contents page again. Select newly created list for inserting values as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/new-site-content.png\" alt=\"\" width=\"1366\" height=\"664\" class=\"alignnone size-full wp-image-16185\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/new-site-content.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/new-site-content-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_17\"><\/span>Step 17<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nNext, select <strong>List<\/strong> from the <strong>Menu Item<\/strong>.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/select-List.png\" alt=\"\" width=\"1365\" height=\"667\" class=\"alignnone size-full wp-image-16186\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/select-List.png 1365w, \/blog\/wp-content\/uploads\/2017\/09\/select-List-150x73.png 150w\" sizes=\"auto, (max-width: 1365px) 100vw, 1365px\" \/>\r\n\r\nIt expands the Ribbon for adding columns.\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_18\"><\/span>Step 18<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nSelect <strong>Create Column<\/strong> Ribbon item. A <strong>Create Column dialog box<\/strong> opens where you have to insert <strong>Name<\/strong> for the column. Select <strong>data type<\/strong> and click <strong>OK<\/strong> as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/add-column.png\" alt=\"\" width=\"1366\" height=\"666\" class=\"alignnone size-full wp-image-16187\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/add-column.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/add-column-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<strong>Note:<\/strong> You can add as many columns as you want.\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_19\"><\/span>Step 19<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nAdd data to the table created in Step 18.\r\n<strong>Note:<\/strong> The final chart will be rendered using this data.\r\n\r\nOnce you are done with inserting data in the columns, click <strong>Stop<\/strong> editing.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/insert-values.png\" alt=\"\" width=\"1366\" height=\"663\" class=\"alignnone size-full wp-image-16188\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/insert-values.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/insert-values-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_20\"><\/span>Step 20<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n<strong>Edit<\/strong> the previously created Page (the page which was created in Step 12) and <strong>add Script Editor Web Part<\/strong> control in the Page.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/insert-scriptEditor.png\" alt=\"\" width=\"1366\" height=\"663\" class=\"alignnone size-full wp-image-16189\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/insert-scriptEditor.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/insert-scriptEditor-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_21\"><\/span>Step 21<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nOpen the context menu of the Script Editor and select <strong>Edit Web Part<\/strong>.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/edit-script-editor.png\" alt=\"\" width=\"1363\" height=\"701\" class=\"alignnone size-full wp-image-16190\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/edit-script-editor.png 1363w, \/blog\/wp-content\/uploads\/2017\/09\/edit-script-editor-150x77.png 150w\" sizes=\"auto, (max-width: 1363px) 100vw, 1363px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_22\"><\/span>Step 22<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nWhile editing the <strong>web part<\/strong>, add the following code:\r\n\r\n<pre lang=\"HTML\">\r\n\/\/Adding jQuery reference\r\n\r\n\/\/Adding FusionCharts reference\r\n\r\n\r\n\/\/Declaring array to hold the data in the list\r\nvar source=[ ];\r\nvar country =[ ];\r\nvar population =[ ];\r\n\/\/Performing AJAX call for with REST Endpoint for fetching data from List\r\n$(function () {\r\n    getListData();\r\n});\r\nfunction getListData() {\r\n    var siteUrl = _spPageContextInfo.webAbsoluteUrl;\r\n    var fullUrl = siteUrl + \"\/_api\/web\/lists\/getbytitle('PopulationInfo')\/items\";\r\n    $.ajax({\r\n        url: fullUrl,\r\n        type: \"GET\",\r\n        headers: {\r\n            \"accept\": \"application\/json;odata=verbose\",\r\n            \"content-type\": \"application\/json;odata=verbose\",\r\n        },\r\n        success: onQuerySucceeded,\r\n        error: onQueryFailed\r\n    });\r\n}\r\nfunction onQuerySucceeded(data) {\r\n\/\/Storing fetched data in declared array\r\n\r\n    $.each(data.d.results, function (key, value) {\r\n        country.push(value.Country);\r\n        population.push(value.Population);\r\n    });\r\n    for(var i=0;i&lt;country .length;i++) {\r\n        var dd = { };\r\n        dd.label=country[i];\r\n        dd.value=population[i];\r\n        source.push(dd);\r\n    }\r\n\/\/Declaring FusionCharts constructor and requisite JSON structure\r\n    FusionCharts.ready(function () {\r\n        var revenueChart = new FusionCharts({\r\n            type: &#039;column2d&#039;,\r\n            renderAt: &#039;chart-container&#039;,\r\n            width: &#039;550&#039;,\r\n            height: &#039;350&#039;,\r\n            dataFormat: &#039;json&#039;,\r\n            dataSource: {\r\n                &quot;chart&quot;: {\r\n                    &quot;caption&quot;: &quot;Top Most Populated country in the world&quot;,\r\n                    &quot;subCaption&quot;: &quot;World Population&quot;,\r\n                    &quot;xAxisName&quot;: &quot;Country&quot;,\r\n                    &quot;yAxisName&quot;: &quot;Population&quot;,\r\n                    &quot;paletteColors&quot;: &quot;#0075c2&quot;,\r\n                    &quot;bgColor&quot;: &quot;#ffffff&quot;,\r\n                    &quot;borderAlpha&quot;: &quot;20&quot;,\r\n                    &quot;canvasBorderAlpha&quot;: &quot;0&quot;,\r\n                    &quot;usePlotGradientColor&quot;: &quot;0&quot;,\r\n                    &quot;plotBorderAlpha&quot;: &quot;10&quot;,\r\n                    &quot;placevaluesInside&quot;: &quot;1&quot;,\r\n                    &quot;rotatevalues&quot;: &quot;1&quot;,\r\n                    &quot;valueFontColor&quot;: &quot;#ffffff&quot;,                \r\n                    &quot;showXAxisLine&quot;: &quot;1&quot;,\r\n                    &quot;xAxisLineColor&quot;: &quot;#999999&quot;,\r\n                    &quot;divlineColor&quot;: &quot;#999999&quot;,               \r\n                    &quot;divLineIsDashed&quot;: &quot;1&quot;,\r\n                    &quot;showAlternateHGridColor&quot;: &quot;0&quot;,\r\n                    &quot;subcaptionFontBold&quot;: &quot;0&quot;,\r\n                    &quot;subcaptionFontSize&quot;: &quot;14&quot;\r\n                },            \r\n                &quot;data&quot;:source\r\n         \r\n            }\r\n        }).render();\r\n    });\r\n}\r\nfunction onQueryFailed() {\r\n    alert(&#039;Error!&#039;);\r\n}\r\n\r\n<div id=\"chart-container\">hh<\/div>\r\n<\/pre>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_23\"><\/span>Step 23<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n<strong>Save<\/strong> the page when you are done with all the changes mentioned above.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/save-1.png\" alt=\"\" width=\"1366\" height=\"664\" class=\"alignnone size-full wp-image-16192\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/save-1.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/save-1-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\n<h3><span class=\"ez-toc-section\" id=\"Step_24\"><\/span>Step 24<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\nFusionCharts will render as shown in the image below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/Final.png\" alt=\"\" width=\"1366\" height=\"664\" class=\"alignnone size-full wp-image-16191\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/Final.png 1366w, \/blog\/wp-content\/uploads\/2017\/09\/Final-150x73.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/>\r\n\r\nPerfect isn\u2019t it?\r\n\r\nThis 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 <a href=\"mailto:support@fusioncharts.com\" target=\"_blank\" rel=\"noopener\">support@fusioncharts.com<\/a> . Happy to help!","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[682,683,152,679,217,680,681,331],"coauthors":[647,650],"class_list":["post-16162","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-ajax","tag-charts","tag-fusioncharts","tag-integrating-fusioncharts-in-sharepoint-2016","tag-jquery","tag-microsoft-office","tag-office-365","tag-sharepoint"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrating FusionCharts in SharePoint 2016: Guide<\/title>\n<meta name=\"description\" content=\"SharePoint is a premier collaboration tool. Learn how to integrate FusionCharts into SharePoint 2016 for better web-based collaborative platforms today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating FusionCharts in SharePoint 2016: Guide\" \/>\n<meta property=\"og:description\" content=\"SharePoint is a premier collaboration tool. Learn how to integrate FusionCharts into SharePoint 2016 for better web-based collaborative platforms today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-06T20:40:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/login.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dishank Tiwari, Soumya Dutta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dishank Tiwari, Soumya Dutta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Dishank Tiwari\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\"\n\t            },\n\t            \"headline\": \"Integrating FusionCharts in SharePoint 2016: Guide\",\n\t            \"datePublished\": \"2017-09-06T20:40:30+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:18+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\"\n\t            },\n\t            \"wordCount\": 716,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png\",\n\t            \"keywords\": [\n\t                \"Ajax\",\n\t                \"charts\",\n\t                \"FusionCharts\",\n\t                \"Integrating FusionCharts in SharePoint 2016\",\n\t                \"jquery\",\n\t                \"Microsoft Office\",\n\t                \"Office 365\",\n\t                \"SharePoint\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\",\n\t            \"name\": \"Integrating FusionCharts in SharePoint 2016: Guide\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png\",\n\t            \"datePublished\": \"2017-09-06T20:40:30+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:18+00:00\",\n\t            \"description\": \"SharePoint is a premier collaboration tool. Learn how to integrate FusionCharts into SharePoint 2016 for better web-based collaborative platforms today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png\",\n\t            \"contentUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Integrating FusionCharts in SharePoint 2016: Guide\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\",\n\t            \"name\": \"Dishank Tiwari\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"caption\": \"Dishank Tiwari\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating FusionCharts in SharePoint 2016: Guide","description":"SharePoint is a premier collaboration tool. Learn how to integrate FusionCharts into SharePoint 2016 for better web-based collaborative platforms today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/","og_locale":"en_US","og_type":"article","og_title":"Integrating FusionCharts in SharePoint 2016: Guide","og_description":"SharePoint is a premier collaboration tool. Learn how to integrate FusionCharts into SharePoint 2016 for better web-based collaborative platforms today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-09-06T20:40:30+00:00","article_modified_time":"2026-01-20T09:11:18+00:00","og_image":[{"width":1366,"height":700,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/login.png","type":"image\/png"}],"author":"Dishank Tiwari, Soumya Dutta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dishank Tiwari, Soumya Dutta","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/"},"author":{"name":"Dishank Tiwari","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad"},"headline":"Integrating FusionCharts in SharePoint 2016: Guide","datePublished":"2017-09-06T20:40:30+00:00","dateModified":"2026-01-20T09:11:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/"},"wordCount":716,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png","keywords":["Ajax","charts","FusionCharts","Integrating FusionCharts in SharePoint 2016","jquery","Microsoft Office","Office 365","SharePoint"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/","url":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/","name":"Integrating FusionCharts in SharePoint 2016: Guide","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png","datePublished":"2017-09-06T20:40:30+00:00","dateModified":"2026-01-20T09:11:18+00:00","description":"SharePoint is a premier collaboration tool. Learn how to integrate FusionCharts into SharePoint 2016 for better web-based collaborative platforms today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#primaryimage","url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png","contentUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2017\/09\/login.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/integrating-fusioncharts-in-sharepoint-2016\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Integrating FusionCharts in SharePoint 2016: Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad","name":"Dishank Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","caption":"Dishank Tiwari"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16162"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16162\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16162"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}