Is it possible to use highcharts heat map chart using rally sdk? - rally

Question

I'm building a rally custom HTML app. I would like to create a heat map chart. How can I do that?
I've tried to create Rally Chart of the type 'heatmap' (code below). As a result, I see the 404 error message in the console:
GET https://rally1.rallydev.com/slm/panel/highcharts/heatmap.js?_dc=1558434971290 404
When I try to use Highcharts library directly I'm getting a conflict with https://rally1.rallydev.com/apps/2.1/lib/analytics/analytics-all.js - highcharts being loaded twice. As a result analytics lib do not load I guess and I get an error like Lumenize.Time undefined.
this.chart = this.add(
Ext.create('Rally.ui.chart.Chart', {
loadMask: false,
chartData: {
series: [{
type:'heatmap',
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
},
chartConfig: {
chart: {
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
//maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
}
})
);

Answer 1

The problem you are going to hit is that the Highcharts v3.0.10 is bundled into the analytics code. This has been done so that there is a known Highcharts library used with the added Lumenize code - i.e. they match. The analytics library is dynamically loaded if the SDK can't find a Highcharts library as it starts up (i.e. window.Highcharts is undefined).
The result of this is that it looks like it is quite kludgy to change the Highcharts arrangement to add heatmaps. Someone who is better at javascript library loading/overloading might have a different view. You would have to load the heatmap.js file into your app after the app has started (in 'launch'?) to get around the dynamic loading.
I know that this is not directly related to your Highcharts question, but if it is just a 'heatmap' you are after, not necessarily a Highcharts heatmap, I have started to use d3 to visualise stuff in Rally. There is a d3 heatmap example here if you are interested: http://bl.ocks.org/tjdecke/5558084
I have done a bit of work to get d3 working inside a Rally custom app. There are a few examples on my github, but have a look here: https://github.com/nikantonelli/Radial-Density