Google Visualizations Bubble Chart API with SharePoint 2010 & SharePoint 2013

Using the Google Visualization: Bubble Chart Graph API in SharePoint 2010 and SharePoint 2013 along with using JavaScript Client Object Model was very easy and provided a ‘quick win’ for a current project. In this blog  I will go over the steps I used to take advantage of the Google Visualization: Bubble Chart Graph API. The end result in this blog will be:

bubbleChart

 

I first created a simple list that would house the information for the bubble chart. This list consisted of:

  • Title – single line of text – unique to each list item
  • Life Expectancy – Number (2 decimals) – horizontal axis
  • Fertility Rate – Number (2 decimals) – vertical axis
  • Region – Single line of text – will be used for the series of the bubble chart (color of bubble)
  • Population – Number (o decimal) – determines size of bubble

I filled the list with the following information:

listview

 

The following script, included with comments, was to pull the SharePoint list information by using the JavaScript Client Side Object Model and applied to the Google Visualization: Bubble Chart API:

<script src=”https://www.google.com/jsapi&#8221; type=”text/javascript”></script>
<script type=”text/javascript”>

google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});

ExecuteOrDelayUntilScriptLoaded(gatherListInfo, ‘sp.js’);

function gatherListInfo() {

var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle(“Bubble Chart”);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml();

this.listItems = list.getItems(camlQuery);
clientContext.load(listItems);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), Function.createDelegate(this, this.onQueryFailed));
}

function onListItemsLoadSuccess(sender, args) {

// Creating Table
var data= new google.visualization.DataTable();

data.addColumn(‘string’, ‘ID’);
data.addColumn(‘number’, ‘Life Expectancy’);
data.addColumn(‘number’, ‘Fertility Rate’);
data.addColumn(‘string’, ‘Region’);
data.addColumn(‘number’, ‘Population’);

var options = { ‘title’:’Bubble Chart Test’,
‘width’:800,
‘height’:600,
‘fontName’:'”Arial”‘,
‘bubble’: {textStyle:{color:’none’}},
‘series’: {‘North America’: {color:’green’}, ‘Europe’: {color:’yellow’}, ‘Middle East’: {color:’blue’}},
‘titleTextStyle’: {color:’black’, fontName:'”Arial”‘, fontSize:28},
hAxis: {title: ‘Life Expectancy’},
vAxis: {title: ‘Fertility Rate’}
};

var listEnumerator = this.listItems.get_count();

for (x = 0; x < listEnumerator; x++) {
var item = this.listItems.itemAt(x);
var id = item.get_item(‘Title’);
var life_expect = item.get_item(‘Life_x0020_Expectancy’);
var fert_rate = item.get_item(‘Fertility_x0020_Rate’);
var region = item.get_item(‘Region’);
var pop = item.get_item(‘Population’);

data.addRow([id, life_expect, fert_rate, region, pop]);

}

var chart = new google.visualization.BubbleChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

}

function onQueryFailed(sender, args) {
alert(‘request failed ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}
</script>

<div id=”chart_div”></div>

Note the extra quotations around the font name for the TitleTextStyle in the bubble chart options. This was needed for the font value to be carried out in SharePoint. Without the extra quotes the TitleTextStyle font default style displayed.

The last step was to add this script into a document library and used a content editor to link to the script.