Create BarChart and bind dynamic values using 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.

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

                   }]

});