I have a SharePoint list with 5 columns:

  • Title (Text, filled with dates)
  • Red (Number)
  • Amber (Number)
  • GreenBlue (Number)
  • NS (Number)

I have a Google Chart loading from this list, but it's only displaying the 'Red' data for each 'Title' item:

enter image description here

How do I get the other columns to show? It seems like there's a space for them next to 'Red', but they're not showing up. Here is my code:

    var jsonObj_Chart = {};

     $(document).ready(function () {

     google.charts.load('current', {'packages':['bar']});
         //Function to read data from SharePoint list using SPServices
         //Function to generate Bar chart


     function ReadData(){

             operation: "GetListItems",
             async: false,
             listName: "IntegrationCounts",
             CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Red' /><FieldRef Name='Amber' /><FieldRef Name='GreenBlue' /><FieldRef Name='NS' /></ViewFields>",            
             completefunc: function (xData, Status) {
                 $(xData.responseXML).SPFilterNode("z:row").each(function () {

                     var title = $(this).attr("ows_Title");
                     var red = $(this).attr("ows_Red");
                     var amber = $(this).attr("ows_Amber");
                     var greenblue = $(this).attr("ows_GreenBlue");
                     var ns = $(this).attr("ows_NS");

                     //Converting decimal number to whole number, for example ->3.000 to 3
                     red = Math.floor(red);
                     amber = Math.floor(amber);
                     greenblue = Math.floor(greenblue);
                     ns = Math.floor(ns);

                     //creating json Object to save the values
                     var jsonObj_Values = {};

                     jsonObj_Values["Title"] = title;    
                     jsonObj_Values["Red"] = red;
                     jsonObj_Values["Amber"] = amber;
                     jsonObj_Values["GreenBlue"] = greenblue;
                     jsonObj_Values["NS"] = ns;

                     //Adding jsonObj_Values to main json
                     jsonObj_Chart[title] = jsonObj_Values;                   

 function GenerateChart(){

 //After the Google Visualization API is loaded, it will be set to run.
     function drawChart() {

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Title');
       data.addColumn('number', 'Red');
       data.addColumn('number', 'Amber');
       data.addColumn('number', 'GreenBlue');
       data.addColumn('number', 'NS');

      //Looping through jsonObj_Chart which has [Title,No of ppl]
       $.each(jsonObj_Chart, function(key, value) {
         data.addRow([value.Title, value.Red, value.Amber, value.GreenBlue, value.NS]);

       /* options - one of the very important variable to customize the chart, the actual customization should be done through this 'options'
       There are too many elements are available under this 'options' as key, value pair – Each chart types have their own options, I strongly suggest to visit there official site to know more about this*/
       var options = {
           chart: {
             title: 'RAG Status Weekly Trend',

       var chart = new google.charts.Bar(document.getElementById("Chart_Count"));
       chart.draw(data, options);


 <!-- div width and height will affect the chart size !-->
 <div id="Chart_Count" style="width: 900px; height: 300px;">

Finally, after hours of poking around at the code, I figured it out! For some reason SharePoint assigned the other columns a unique ID. So, I grabbed each column's ID and replaced them in the FieldRef tags and the "ows_Column" attribute at the top.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.