Globally, business executives rely extensively on data and analytics for decision making. With the tremendous amount of data that is being churned out by individuals, businesses, systems etc., it is becoming increasingly complex for executives to make business sense from the enormous data that is at their disposal. Further, data alone is normally not useful to the decision makers unless it is analyzed, interpreted, organized and presented in a visually appealing manner. A lot of individuals and businesses make use of diverse visualization tools to create impressive charts. While there are a number of tools available in the market for data visualization, Google Charts stands out in many ways.
Google Charts, when integrated with SharePoint, can be immensely useful to business executives and other knowledge workers to dramatically improve their ability to comprehend and present information utilizing interesting visualizations. Data can be visualized in SharePoint in different ways. Below are some of the options:
- Chart Web Part (Depreciated from SharePoint 2013 onwards)
- Free to Use – With no cost for using and excellent compatibility with SharePoint, there’s no reason not to try it.
- Rich Gallery – Choose from a variety of charts, from simple scatter plots to hierarchical tree maps.
- Highly Customizable – Configure the charts to perfectly match the look and feel of your project/website/intranet.
- HTML5-SVG Compatible – Google Charts is cross-browser compatible, cross-platform portable and mobile friendly. Furthermore, no additional plugins are required.
- Dynamic Data – Connect your data in real time using multiple data connection tools.
Integrating Google Charts in SharePoint 2013
Here’s a step-by-step process to visualize data using Google Charts API in SharePoint 2013.
- Log in to Office 365 and navigate to SharePoint Online.
- The first step is to create a web page in SharePoint where you intend to showcase Google web charts. Below is the process to create a web page in SharePoint.
- Click on the ‘Settings’ icon and then select ‘Add a page’. Give a preferred name to the web page and save the page. In this illustration, we have named the web page as ‘Charts Demo’.
- The next step is to create a new ‘Custom List’. Here’s the process to create a ‘Custom List’: Click on the ‘Settings’ icon available on the top right corner of your browser and then select the option ‘Add an app’.
- Then click on the ‘Custom List’ component displayed on the Site Contents screen.
- Provide a unique name to the custom list. Here, we have named the custom list as ‘smartphone_sales’.
Visit your ‘Site Contents’ page by clicking on the Settings > Site Contents and ‘smartphone_sales’ tab and then edit the ‘custom list’ as shown below.
- Rename the title column depending on your preference. In this case, we have renamed it as ‘Year’.
- Click on the ‘+’ button to add new columns (data type). Here, we have added three new columns titled ‘Red Mi3’, ‘Honor 5s’ & ‘Le 1s’.
- Subsequently, you can add data to the list by clicking on ‘new item’ or ‘edit’ options.
- Add ‘smartphone_sales’ custom list to the ‘Charts Demo’ page.
- Go the ‘Charts Demo’ page and click on the ‘Edit’ option available on the right side of the page.
- Click on the ‘Insert’ tab and then select ‘Web Part’ and select the list, click on the ‘Add’ button and save the web page.
There are two methods to include Google Charts API in SharePoint
- Method 1 – Download the dependencies and save these in ‘Site Content’ > ‘Site Assets’
- Method 2 – Include dependencies directly using the below URLs. In our example, we have followed this method.
Adding the code snippet to the web page in SharePoint
- Go to the ‘Charts Demo’ page and click on the ‘Edit’ option (top right side).
- Add the ‘Script Editor’ to the page by following the below instructions (refer to the below screenshot).
- Click on the ‘Edit Web Part’ option as shown below.
- Copy and paste the code snippet in the ‘Web Part’ and click on the ‘Insert’ button and save the page.
Google Charts API Code Snippet
- After the page is saved, the screen will automatically reload and display the chart based on the data. Below are a few sample graphs generated using Google Charts.
All things considered, if the above code does not work, then you may have to check the column names.
- Go to the Site Contents > ‘smartphone_sales’ > Settings
- Each column is identified by a unique ID, which is auto generated by SharePoint. You can obtain this information from the URL by clicking on the column hyperlink.
Custom Ribbon Action Feature
Additionally, by making use of Custom Ribbon Action, a pop up of SharePoint Modal Dialog of the associated charts can be displayed. This enables users to make changes to the custom list using the quick edit option; the changes are instantly reflected in the charts, making the visualization more interesting.
SharePoint Development and Microsoft SharePoint Services
Being an innovative software development firm specializing in Microsoft technologies, Evoke can help you with Microsoft SharePoint services; we offer end-to-end Microsoft SharePoint solutions for global enterprises. Their comprehensive set of SharePoint services enables enterprises to meet their productivity goals and objectives.
Evoke not only helps global enterprises develop outstanding products, but it also understands their business lifecycle to build highly scalable products. Evoke provides a clear vision and a comprehensive plan to accomplish SharePoint goals. By embracing Evoke’s Microsoft SharePoint Services, an enterprise can improve the overall profit and stay ahead of its competitors.
Call Evoke Technologies at +1 (937) 660-4925 or find out more about how our SharePoint development services can resolve your business problems.
Badiyuzama Mohammad is working as a Technical Lead at Evoke Technologies. He is part of the research and development team at Evoke. He has 8+ years of experience in enterprise software development using Java/J2EE, LAMP, SQL, AngularJS etc. He is keen to explore emerging technologies in open source area.