Build Simple Charts – Helpdesk Tags (SharePoint)

Tickets per tags (column chart)

On our first chart, let’s show total amount of tickets per every tag. First, as usual, we select site and list, increase amount of rows selected.

But then, we go to Data Source -> Advanced tab and replace default handlers.requestSuccess with:

handlers.requestSuccess = function(data, logger) {
  //here we will create new set of items
  var items = [];

  //we go through each item from the list
  data.items.forEach(function(item) {
    //if it has _Tags:
    if (item._Tags) {
      //for each tag:
      item._Tags.forEach(function(tag) {
        //we create new object and add it to our items:
        items.push({
          tag: tag.get_lookupValue(),
          count: 1
        });
      });
    }
  });

  //we replace default items with our items:
  data.items = items;
  return true;
}

So, what are we doing here? We have column Tags, why are we opening _Tags for some reason?

The problem is that Dashboard Designer doesn’t recognize all the values in the multiple values fields and Tags field only has first tag of the item. But there is another, hidden field named _Tags from which we can retrieve all the values for the item.

That’s why we go through every item, check if it has any tags, go through all the tags and create a new item for every tag. We collect all these items and replace our data with thems, as we only need to have these values. Once this code is added, we click Process.

Now, we also can configure Aggregation to better separate the results. This needs to be done after processing the data, so we get access to the new items that we’ve created inside the code:

Click Process once again and let’s go to Dashboard -> Chart tab:

Tickets per subset of tags (pie chart)

But what if we do not need all the tags? In this chart, I will limit selection to the three of the most popular tags – Alpha, Beta and Delta. How can this be done?

Very simple! We start the same way, add another Web part, select site and list, expand amount of rows and go to Data Source -> Advanced tab and replace default handlers.requestSuccess with:

handlers.requestSuccess = function(data, logger) {
  var items = [];

  data.items.forEach(function(item) {
    if (item._Tags) {
      item._Tags.forEach(function(tag) {
        var product = tag.get_lookupValue();
        if (product == 'Alpha' || product == 'Beta' || product == 'Delta'){
          items.push({
            tag: product,
            count: 1
          });
        }
      });
    }
  });

  data.items = items;
  return true;
}

It’s the same code as before, but this time we only select three main tags and ignore all the others. We click Process and go to Aggregation tab:

Selection here is the same, but this time we will use the new field. Click Process once again and we now go to Dashboard section:

1. Select Pie Chart Type
2. Category – “field” : “value”
3. Value – “field” : “total”

Now, in Style tab, we also change Title and expand Label, select Display labels, Position – outsideEnd, Format: {0} tickets

Finally, in Dashboard Advanced section we use the following code to add color to the chart:

var handlers = {};
handlers.preRender = function(config, logger) {
  console.log('Configuration: ', config);
  var colors = {'Alpha': '#97d5be', 'Beta': '#cbdab0', 'Delta': '#ee9994'};
  config.series[0].data.forEach(function(tag){ 
    tag.color = colors[tag.value];
  });
  return true;
}

I click Preview once again and here’s the final result: