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;
  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>";
  8. //Declaring 2 arrays - Categories and Series for passing the values to chart.
  9. var ogetCountries = [];
  10. var oPopulateData = [];
  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");
  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>
  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.