How to Create a Bar Chart with SPServices

In this article, we shall see how to create a Bar Chart using HighCharts and bind dynamic values using SPServices GetListItems.

Before starting make sure you have all these reference files.

Using SPservices - GetListItem:

//Getting Current Site URL
var CsiteUrl = _spPageContextInfo.webServerRelativeUrl;
//Getting the CAML Queries
var ViewFields = "<ViewFields><FieldRef Name='Selection' /><FieldRef Name='Integer' /><FieldRef Name='Int' /></ViewFields>";
var FilteredValue = "<Query><Where><IsNotNull><FieldRef Name='Selection' /></IsNotNull></Where></Query>";
//Declaring 2 arrays - Categories and Series for passing the values to chart.
var ogetCountries = [];
var oPopulateData = [];
//Writing the GetListItem SPServices
$().SPServices
({
operation: "GetListItems",
async: false,
webURL: CsiteUrl,
listName: "PieChart",
CAMLViewFields: ViewFields,
CAMLQuery: FilteredValue,
completefunc: function(xData, Status)
{
// alert(xData.responseText+ " " + Status);
$(xData.responseXML).SPFilterNode("z:row").each(function()
{
oData = $(this).attr("ows_Population")
oPlaces = $(this).attr("ows_Country");
oPopulateData.push(oData); //Storing the Population values in the Array
ogetCountries.push(oPlaces); //Storing the Countries values in the Array
});
}
});

Once you have pushed the entire values into the Array (oPopulateData & ogetCountries) you shall start the Charting process.

In this example, I have used the HighCharts (http://www.highcharts.com - Simple Bar Chart) format.

Below is the format which you can use for creating the BAR Chart.

I've used the Div for displaying the BarChart.

<div id="flot-placeholder" style="width:550px;height:400px;margin:0 auto"></div>
$('#flot-placeholder').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ogetCountries, //This is where you are going to pass your Dynamic Text which comes on the X-Axis
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 2015',
data: JSON.parse("["+ oPopulateData +"]") //This is the place where the Bar gets displayed. So, the input should be Integer and not charcters.
}]
});

Once completed, you will see the result similar to this image.