Dynamic heat map for Gradient color in pivot
Hi Team,
I am creating a gradient heat map for pivot and using this script. But, this only works for the second column. I tried to tweak the var tag but it's not working, can anyone help me with this.
Thank you
cc: harikm007
// select color theme from --> https://github.com/d3/d3-scale-chromatic
var colorTheme = 'interpolateYlGn';
var leftColorIntensity = 0.1;
var rightColorIntensity = 0.9;
widget.on("ready", function (w, args) {
$.getScript('https://d3js.org/d3.v5.min.js', function (data, textStatus) {
var tags = $('.table-grid__cell--col-parent-sibling-last', element);
var maxValue = 0.0;
var minValue = 0.0;
//debugger;
for (var i = 0; i < tags.length; i++) {
let tagText = tags[i].textContent;
let parseVal = parseFloat(tagText);
if (parseVal && parseVal > maxValue) {
maxValue = parseVal;
}
if (parseVal && parseVal < minValue) {
minValue = parseVal;
}
}
myScale = d3.scaleLinear()
.domain([minValue, maxValue])
.range([leftColorIntensity, rightColorIntensity]);
for (var i = 0; i < tags.length; i++) {
let tagText = tags[i].textContent;
let parseVal = parseFloat(tagText);
let colorValue = 0.0;
if (parseVal) {
colorValue = parseVal;
let scaled = myScale(colorValue);
tags[i].style.backgroundColor = d3[colorTheme](scaled);
}
}
});
});
Hi zohebakber ,
Try replacing the line
var tags = $('.table-grid__cell--col-parent-sibling-last', element);
with
var tags = $('.table-grid__cell--col-parent-sibling-even,.table-grid__cell--col-parent-sibling-odd', element);
-Hari