Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
ServiceNow ChartJS example
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<link rel="stylesheet" href=""></link>
<link rel="stylesheet" href=""></link>
<link href="" rel="stylesheet"></link>
var rawData = [];
var incident = new GlideRecord('incident');
sys_created_on: incident.getDisplayValue('sys_created_on'),
priority: incident.getDisplayValue('priority')
var dataStr = JSON.stringify(rawData);
<div class="container">
<div class="row">
<div class="row">
<canvas id="sample-chart" width="400" height="200"></canvas>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
var ctx = document.getElementById("sample-chart").getContext('2d');
var data = $[dataStr];
var groupedData = _.groupBy(data, function(rec){
return rec.sys_created_on.split(" ")[0];
var secondDimension = _.uniq(, function(obj){
return obj.priority;
var datasets =, function(dimension){
var counts =, function(obj, key){
return _.filter(obj, function(subObj){
return subObj.priority == dimension;
return {
data: counts,
backgroundColor: getRandomColor(),
label: dimension,
fill: false
var labels =, function(obj, key){ return key});
var data =, function(obj, key){ return obj.length});
new Chart(ctx, {
type: 'bar',
'data': {
'labels':, function(obj, key){ return key}),
'datasets': datasets
options: {
scales: {
xAxes: [{
stacked: true,
yAxes: [{
stacked: true
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i != 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
return color;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.