1

I am trying to insert a bar graph for my Sharepoint list but I can't get it to display for some reason. The list is called "GPS III Cause Codes" and has two columns. Column 1 has a name and column 2 has a value from a dropdown choice menu. How can I change the code below so that it counts the number of occurrences for each value in column 2 and creates a bar graph?

Example data:

|Column 1  |  Column 2 
---------------------------
| Bob      | Option 1
| Dave     | Option 2 
| Tom      | Option 1 
| Dan      | Option 5
| Jason    | Option 1

Could someone let me know where I am missing something?

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript">
var splistitems;
var seriesarray = new Array();

ExecuteOrDelayUntilScriptLoaded(GetChartData, "sp.js");

function GetChartData() {
   seriesarray = [];
   var currentcontext = new SP.ClientContext.get_current();
   var splist = currentcontext.get_web().get_lists().getByTitle('GPS III Cause Codes');
   var splistquery = new SP.CamlQuery();
   splistitems = splist.getItems(splistquery);
   currentcontext.load(splistitems);
   currentcontext.executeQueryAsync(Function.createDelegate(this, GetChartDataSuccess), Function.createDelegate(this, GetChartDataFail));
}

function GetChartDataSuccess(sender, args) {
   var splistitemcount = splistitems.get_count();
   if (splistitemcount != 0) {
      var splistitemenumerator = splistitems.getEnumerator();
      while (splistitemenumerator.moveNext()) {
         var currentlistitem = splistitemenumerator.get_current();
         var itemname = currentlistitem.get_item("Title");
         var count = currentlistitem.get_item("Cause Code Count");
         var seriesitem = {
                           name: itemname,
                           data: [ count ]
                       };
         seriesarray.push(seriesitem);
      }
      DrawChart();
   }
}


function GetChartDataFail(sender, args) {
   alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function DrawChart() {
        fruitChart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-container',
                type: 'column'
            },
            title: {
                text: 'Cause Code Trends'
            },
            xAxis: {
                categories: ['Discussion', 'Document/Procedure Request', 'Data Request', 'SpaceX response/clarification', 'Identification','Documentation Error', 'Missing Testing Results', 'Out of Tolerance Results'] 
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Number of Requests'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                false
            },

            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: seriesarray
        });
}

</script>
1

The following example demonstrates how to count the number of occurrences of values in column:

var counts = {};
items.get_data().forEach(function(item){
      var fieldVal = item.get_item('<fieldName>');
      counts[fieldVal] = (counts[fieldVal] ? counts[fieldVal] + 1 : 1);
});

Complete example

ExecuteOrDelayUntilScriptLoaded(renderChart, "sp.js");

function renderChart(){
      var listTitle = 'GPS III Cause Codes';
      var properties = ['Title','Cause Code Count'];
      getListData(listTitle,properties,function(items){
            var counts = {};
            items.forEach(function(item){
                 var val = item.get_item('Cause_x0020_Code_x0020_Count');
                 counts[val] = (counts[val] ? counts[val] + 1 : 1);
            });

            var series = []; 
            items.forEach(function(item){
                  var countPerName = counts[item.get_item('Cause_x0020_Code_x0020_Count')];
                  series.push({name :item.get_item('Title'), data : [countPerName] });
            });
            drawChart(series);
      },
      logError);
}

function getListData(listTitle,propertiesToReterieve,success,error){
   var ctx = SP.ClientContext.get_current();
   var list = ctx.get_web().get_lists().getByTitle(listTitle);
   var qry = SP.CamlQuery.createAllItemsQuery();
   var expr = 'Include(' + propertiesToReterieve.join(',') + ')';
   var items = list.getItems(qry,expr);
   ctx.load(items);
   ctx.executeQueryAsync(function(){
             success(items.get_data());
         }, 
         error);
}





function logError(sender, args) {
   console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}




function drawChart(data) {
        var fruitChart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-container',
                type: 'column'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: data
        });
}

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.