Post
Ask Question

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.
  • jquery-1.10.2.js
  • highcharts-custom.js
  • exporting.js
  • jquery.SPServices-0.7.2.min.js 
Using SPservices - GetListItem: 
  1. //Getting Current Site URL   
  2. var CsiteUrl = _spPageContextInfo.webServerRelativeUrl;  
  3.   
  4. //Getting the CAML Queries   
  5. var ViewFields = "<ViewFields><FieldRef Name='Selection' /><FieldRef Name='Integer' /><FieldRef Name='Int' /></ViewFields>";  
  6. var FilteredValue = "<Query><Where><IsNotNull><FieldRef Name='Selection' /></IsNotNull></Where></Query>";  
  7.   
  8. //Declaring 2 arrays - Categories and Series  for passing the values  to chart.  
  9. var ogetCountries = [];  
  10. var oPopulateData = [];  
  11.   
  12.   
  13. //Writing the GetListItem SPServices   
  14. $().SPServices  
  15. ({  
  16.     operation: "GetListItems",  
  17.     async: false,  
  18.     webURL: CsiteUrl,  
  19.     listName: "PieChart",  
  20.     CAMLViewFields: ViewFields,  
  21.     CAMLQuery: FilteredValue,  
  22.     completefunc: function(xData, Status)  
  23.   {  
  24.         //  alert(xData.responseText+ " " + Status);  
  25.         $(xData.responseXML).SPFilterNode("z:row").each(function()   
  26.         {  
  27.             oData = $(this).attr("ows_Population")  
  28.             oPlaces = $(this).attr("ows_Country");  
  29.   
  30.             oPopulateData.push(oData); //Storing the Population values in the Array  
  31.             ogetCountries.push(oPlaces); //Storing the Countries values in the Array  
  32.         });  
  33.     }  
  34. });   
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. 
  1. <div id="flot-placeholder" style="width:550px;height:400px;margin:0 auto"></div>   
  2.    
  3.    
  4. $('#flot-placeholder').highcharts({  
  5.       chart: {  
  6.             type: 'bar'  
  7.             },  
  8.       title: {  
  9.             text: 'Historic World Population by Region'  
  10.             },  
  11.       subtitle: {  
  12.             text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'  
  13.             },  
  14.       xAxis: {  
  15.             categories: ogetCountries,         //This is where you are going to pass your Dynamic Text which comes on the X-Axis  
  16.                   title: {  
  17.                         text: null  
  18.                            }  
  19.                   },  
  20.       yAxis: {  
  21.              min: 0,  
  22.              title: {  
  23.                   text: 'Population (millions)',  
  24.                         align: 'high'  
  25.                         },  
  26.       labels: {  
  27.                overflow: 'justify'  
  28.                }  
  29.          },  
  30.       tooltip: {  
  31.                valueSuffix: ' millions'  
  32.                },  
  33.       plotOptions: {  
  34.                   bar: {  
  35.                      dataLabels: {  
  36.                               enabled: true  
  37.                                             }  
  38.                                        }  
  39.                            },  
  40.       legend: {  
  41.             layout: 'vertical',  
  42.             align: 'right',  
  43.             verticalAlign: 'top',  
  44.              x: -40,  
  45.              y: 80,  
  46.             floating: true,  
  47.             borderWidth: 1,  
  48.             backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),  
  49.             shadow: true  
  50.       },  
  51.       credits: {  
  52.                enabled: false  
  53.             },  
  54.       series: [{  
  55.                name: 'Year 2015',  
  56.                data: JSON.parse("["+ oPopulateData +"]")      //This is the place where the Bar gets displayed. So, the input should be Integer and not charcters.  
  57.                    }]  
  58. });   
Once completed, you will see the result similar to this image.