Conditional Formatting Break By Chart
In this post we will cover two scenarios:
- Legend-Based Color: conditionally format the elements in order that they appear in the legend (alphanumerically)
- Value-Based Color: conditionally format the elements by their total sum (or an aggregation of your choosing)
Example Widgets below are based on Sample Ecommerce
xAxis: Years
Value: Running Sum of Cost
Break By: Country
Value: Running Sum of Cost
Break By: Country
Legend Based Color
STEPS FOR IMPLEMENTATION:
- Copy the script below
- Open the widget you would like to format
- Open the edit script window from the widget menu
- Paste the script
- (optional) Modify the chromatic scale you want to use in the code
- (optional) Modify the intensity of the scale you want to use
- For reversing the chromatic scale flip the left and right bounds
- left:0, right:1 or left 1, right:0
widget.on('initialized', function(widget){
$('head').append("<script src='https://d3js.org/d3.v5.min.js'></script>")
})
// select color theme from --> https://github.com/d3/d3-scale-chromatic
var colorTheme = 'interpolateRdYlBu';
var leftColorIntensity =0;
var rightColorIntensity = 1;
widget.on("processresult", function(w, args){
myScale = d3.scaleLinear()
.domain([0, args.result.series.length])
.range([leftColorIntensity,rightColorIntensity]);
args.result.series.forEach(function(v,i){
var scaled = myScale(i);
console.log(scaled);
v.color = d3[colorTheme](scaled);
})
})Value Based Color
STEPS FOR IMPLEMENTATION:
- Copy the script below
- Open the widget you would like to format
- Open the edit script window from the widget menu
- Paste the script
- (optional) Modify the chromatic scale you want to use in the code
- (optional) Modify the intensity of the scale you want to use
- For reversing the chromatic scale flip the left and right bounds
- left:0, right:1 or left 1, right:0
widget.on('initialized', (widget) => {
$('head').append("<script src='https://d3js.org/d3.v5.min.js'></script>")
})
// select color theme from --> https://github.com/d3/d3-scale-chromatic
var colorTheme = 'interpolateSpectral';
var leftColorIntensity = 1;
var rightColorIntensity = 0;
widget.on("processresult", function(w, args) {
var originalSeries = args.result.series;
var dict = {};
var counter = 0;
function getSum(total, num) {
return total + num;
}
originalSeries.forEach(
function(i) {
var mySeries = [];
i.data.forEach(function(datapoint) {
mySeries.push(datapoint["y"])
});
var total = mySeries.reduce(getSum);
dict[counter] = total;
counter++;
})
var items = Object.keys(dict).map(function(key) {
return [key, dict[key]];
});
var OrderArray = items.sort(function(first, second) {
return second[1] - first[1];
});
var newSeries = [];
for (var i = 0; i < originalSeries.length; i++) {
var SeriesIndex = parseInt(OrderArray[i][0]);
newSeries.push(originalSeries[SeriesIndex]);
};
counter = 0;
newSeries.forEach(function(item) {
if (counter.toString().length == 1) {
counter = "0" + counter;
}
item["sortData"] = counter.toString() + item["sortData"];
counter++;
});
args.result.series = newSeries;
myScale = d3.scaleLinear()
.domain([0, args.result.series.length])
.range([leftColorIntensity, rightColorIntensity]);
args.result.series.forEach(function(v, i) {
var scaled = myScale(i);
console.log(scaled);
v.color = d3[colorTheme](scaled);
})
})This post is based on two entries.
These describe the code components in more detail.
- Sort Chart by Break By Value
- Dynamic Pivot Table Heat Map
Updated 03-02-2023
