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 - Creating stunning graphs

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:

  • SharePoint Services along with any JavaScript API (Chart.js, Google Charts, Highcharts, D3.js etc.)
  • Chart Web Part (Depreciated from SharePoint 2013 onwards)

It is important to note that if you are using SharePoint version available in Office 2013, the Chart Web Part feature is no longer available. The alternate way is to make use of any JavaScript Chart API to visualize the data in SharePoint. In this post, we explain how Google Charts API can be used to visualize the data.

Here are a few compelling reasons to choose Google Charts over other JavaScript Charts:

  • 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.

Step 1
  • Log in to Office 365 and navigate to SharePoint Online.

SharePoint Main Menu

  • 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’.

Office 365 settings

  • 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’.

Office 365 settings

  • Then click on the ‘Custom List’ component displayed on the Site Contents screen.

Custom List

  • Provide a unique name to the custom list. Here, we have named the custom list as ‘smartphone_sales’.

Custom List Name

Step 2

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.

Custom List Settings Screen

  • Rename the title column depending on your preference. In this case, we have renamed it as ‘Year’.

Title Column

  • 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.

New Item

  • 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.

Charts Demo Edit

  • Click on the ‘Insert’ tab and then select ‘Web Part’ and select the list, click on the ‘Add’ button and save the web page.

Web Part

Step 3

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.
Dependent Libraries

https://www.gstatic.com/charts/loader.js
https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js

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).

Adding Code Snippet

  • Click on the ‘Edit Web Part’ option as shown below.

Edit Web Part

Edit Snippet

  • Copy and paste the code snippet in the ‘Web Part’ and click on the ‘Insert’ button and save the page.
Code Snippet ScreenGoogle Charts API Code Snippet
<html> 
<head> 
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
<script language="javascript">
var returnedItems = null; 
function loadGoogleLibAndDraw(){
 google.charts.load('current', {'packages':['bar','line']});
 google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() { 
 var context = new SP.ClientContext(); 
 var list = context.get_web().get_lists().getByTitle(document.getElementById('customListName').value); 
 var caml = new SP.CamlQuery(); 
 caml.set_viewXml("<View></View>"); 
 
 returnedItems = list.getItems(caml); 
 context.load(returnedItems); 
 context.executeQueryAsync(onSucceededCallback, onFailedCallback); 
} 
function onSucceededCallback(sender, args) { 
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Year');
 data.addColumn('number', 'Red Mi3');
 data.addColumn('number', 'Honor 5s');
 data.addColumn('number', 'Le 1s');
 var enumerator = returnedItems.getEnumerator(); 
 var markup = ''; 
 while (enumerator.moveNext()) { 
 var row = [];
 var listItem = enumerator.get_current(); 
 row.push(listItem.get_item('Title'));
 row.push(listItem.get_item('sezq'));
 row.push(listItem.get_item('_x0063_977'));
 row.push(listItem.get_item('_x0077_q11'));
 data.addRow(row);
 } 
 var options = {
 chart: {
 title: 'Sales Trend',
 },
 bars: 'vertical' 
 };
 var barChart = new google.charts.Bar(document.getElementById('BarChart'));
 barChart.draw(data, options);
 
 var lineChart = new google.charts.Line(document.getElementById('LineChart'));
 lineChart.draw(data, options);
} 

function onFailedCallback(sender, args) { 
 var markup = '<p>The request failed: <br>'; 
 markup += 'Message: ' + args.get_message() + '<br>'; 
 displayDiv.innerHTML = markup; 
}
</script>
</head> 

<body onload="loadGoogleLibAndDraw()"> 
 <form name="metricsform" id="metricsform">
 <input id="customListName" name="customListName" value="smartphone_sales" type="hidden"/>
 </form>
 <div> 
 <div id="displayDiv"></div>
 <div id="BarChart" style="width: 900px; height: 500px;"></div>
 <div id="LineChart" style="width: 900px; height: 500px;"></div>
 </div> 
</body> 
</html>
  • 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.

Google Charts Graph

Google Charts Graph

Troubleshooting

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

Trouble Shooting Settings Screen

  • 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.

Unique ID

  • Change the column IDs in the following JavaScript function. This would fix the issues (if any).

Javascript

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.