Build Simple Charts – Helpdesk Tags (SharePoint)
Tickets per tags (column chart)
Tickets per subset of tags (pie chart)
Welcome to the third article in the series. If you haven’t yet, I strongly recommend you to check out our two previous articles – Sales Report (Basic) and Client Demographics (Advanced).
In this article, we will work with Advanced sections and write some basic JavaScript, so it will be a little more challenging, but you should be ready by now, you’ve learned all the basics.
Let’s say, we have our Plumsail Helpdesk set up. It already comes with a number of useful charts, but tags are not addressed in them. Plumsail Helpdesk has Tickets list where each Item (or ticket) can have multiple tags each, which we will visualize with these charts.
You can use the same technique for your Plumsail Helpdesk instance or any other list with Multiple Choice Lookup field.
Tags column is a Lookup column which allows multiple values. Such fields are not supported by Dashboard Designer by default, but I will show you how you can access them and use them when building your own charts.
I will also show you how to apply color to charts, especially to column chart and pie chart.
We select Column Chart Type, check Display each group as a separate series.
In Category, we choose “field” – “tag”
In Value, we choose “sum” – “count”
We also go to Style tab, change Title and expand Legend to remove selection from Display legend as we do not need to display it, we have “tag” as our Category.
Finally in Advanced section, we can add color to each series based on its name, with this code:
Hope you enjoyed another one of our tutorials, this one is a little more advanced.
You are now almost a Pro with Dashboard Designer charts!
Check out even more advanced scenarios, such as Configure aggregation and sorting, Use multiple lists in Dashboard Designer or Navigate over data by using draggable charts.

var handlers = {}; handlers.preRender = function(config, logger) { console.log('Configuration: ', config); var colors = {'Alpha': '#97d5be', 'Beta': '#cbdab0', 'Gamma': '#eeb2a5', 'Delta': '#ee9994', 'Epsilon': '#ee7a83'}; config.series.forEach(function(item){ item.color = colors[item.name]; }); return true; }I click Preview and here’s the result:
