How to Create a Bar Chart with SPServices

This blog is for creating a Bar Chart and binding the dynamic values from SPservices GetListItems.

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.

• jquery-1.10.2.js
• highcharts-custom.js
• exporting.js
• jquery.SPServices-0.7.2.min.js 

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.