Hi Team, I am trying to create a Heatmap report on sn_risk_risk table with impact and likelihood rows and column with below color code. I have client and HTML coding which is in jelly script I think, Which I don't know. Can someone help and modify the codes to get below color and scale data (earlier code having level 5 also in both column)
HTML
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:requires name="styles/heisenberg/heisenberg_all.css" includes="true" />
<g:requires name="scripts/doctype/CustomEventManager.js"/>
<script language="javascript" src="sn_risk.ValRiskHeatmapUtils.jsdbx" />
<style>
#inherentRiskHighChartContainer text tspan {
stroke-width: 1px;
}
</style>
<g2:evaluate var="jvar_riskHighChartData">
var risk = new sn_risk.CG_ValRiskHeatmap().getValRiskHeatmapData('validated', '', false);
new global.JSON().encode(risk);
</g2:evaluate>
<g2:evaluate var="jvar_riskXAxisCategories">
var xAxis = new sn_risk.CG_ValRiskHeatmap().getValRiskHeatmapXAxisCategories();
new global.JSON().encode(xAxis);
</g2:evaluate>
<g2:evaluate var="jvar_riskYAxisCategories">
var yAxis = new sn_risk.CG_ValRiskHeatmap().getValRiskHeatmapYAxisCategories();
new global.JSON().encode(yAxis);
</g2:evaluate>
<div id="validatedRiskHighChartContainer" name="validatedRiskHighChartContainer" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
</div>
</j:jelly>
Client Script-
(function($){
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: "validatedRiskHighChartContainer",
type: 'heatmap',
marginTop: 12,
marginBottom: 60,
plotBackgroundColor: 'none',
events:{
load:function() {
var points = this.series[0].data,
lenY = this.yAxis[0].tickPositions.length - 1,
lenX = this.xAxis[0].tickPositions.length - 1,
x = lenX,
tmpX = 0,
y = 0,
j = 0;
$.each(points, function(i, p){
var color = p.color;
p.update({
color: color
},false);
});
this.isDirty = true;
this.redraw();
}
}
},
plotOptions: {
series: {
events: {
click: function (event) {
document.location.href = event.point.url+"^state!=retired^EQ";
}
}
}
},
title: {
align:'center',
text: '',
style: {
color: 'black',
fontSize: '12pt'
}
},
xAxis: {
categories: JSON.parse('$[HTML, JS:jvar_riskXAxisCategories]'),
title: {
enabled: true,
text: '<span>Validated Likelihood</span>'
}
},
yAxis: {
categories: JSON.parse('$[HTML, JS:jvar_riskYAxisCategories]'),
title: {
enabled: true,
text: '<span>Validated Impact</span>'
}
},
tooltip: {
formatter: function () {
var msg = new GwtMessage().getMessage('Count: {0}', this.point.value)
+ '<br>' +
new GwtMessage().getMessage('Validated Impact: {0}', this.series.yAxis.categories[this.point.y])
+ '<br>' +
new GwtMessage().getMessage('Validated Likelihood: {0}', this.series.xAxis.categories[this.point.x]);
return msg;
}
},
credits: {
enabled: false
},
series: [{
data: [],
cursor: 'pointer',
showInLegend: false,
type: 'heatmap',
dataLabels: {
format: "{point.value}",
enabled: true,
align: 'center',
color: 'black',
backgroundColor: 'none',
style: {
textShadow: 'none',
}, "useHTML": true
}
}]
});
sn_risk.ValRiskHeatmapUtils.updateHeatmap(chart, 'validated', true);
CustomEvent.on('dashboard_filter.removed', function(filterMessage){
sn_risk.ValRiskHeatmapUtils.onRemoveEvent(chart, filterMessage, 'validated', true);
});
CustomEvent.on('dashboard_filter.added', function(filterMessage){
sn_risk.ValRiskHeatmapUtils.onAddEvent(chart, filterMessage, 'validated', true);
});
})(jQuery);
Hello @RANSINGH1
The heatmap colors can be changed usign the following steps:
- navigate to the desired Risk Assessment Methodology.
- You would see a related list - Assessment types
- Select the desired assessement type.
- You would see a related list - Heatmap colors.
- Here you can defined the heat map colors. It should look something like this:
Hello @RANSINGH1
The heatmap colors can be changed usign the following steps:
- navigate to the desired Risk Assessment Methodology.
- You would see a related list - Assessment types
- Select the desired assessement type.
- You would see a related list - Heatmap colors.
- Here you can defined the heat map colors. It should look something like this:
