This sample demonstrates how to change the variable driving a visualization in both a renderer and a Histogram. Use the histogram() statistics function to generate histogram bins.
The Slider widget allows the user to update the year used to drive the visualization.
This app also demonstrates how the histogram can be customized and styled to invite user interaction. The bar colors are updated to match the renderer, lessening the need for a legend. As the user clicks or focuses on a histogram bar, the features pertaining to that bar are highlighted in the view. The snippet below implements all of that functionality.
const histogramChart = new Histogram({
container: "histogram",
// These properties were generated from// the histogram() function min: histMin,
max: histMax,
bins: histogramResult.bins,
// average is calculated from summaryStatistics() average: average,
// provides a baseline for the anomaly data dataLines: [{
value: 0 }],
// shortens the length of the 0 data line dataLineCreatedFunction: function(element, label, index){
if(index === 0){
element.setAttribute("y2", "75%")
}
},
labelFormatFunction: function(value, type){
return type === "average" ? value.toFixed(2) + "°" : value;
},
// colors bars based on the midpoint of their range// and adds event listeners that trigger highlighting features// that fall inside the bounds of the bin barCreatedFunction: function(index, element){
const bin = histogramChart.bins[index];
const midValue = ((bin.maxValue - bin.minValue) / 2) + bin.minValue;
const color = getColorFromValue(midValue);
element.setAttribute("fill", color.toHex());
element.addEventListener("focus", function(){
const { minValue, maxValue, count } = bin;
const query = lv.layer.createQuery();
const field = "F" + slider.values[0];
query.where = field + " >= " + minValue + " AND " + field + " <= " + maxValue;
lv.queryObjectIds(query).then(function(ids){
if(highlight){
highlight.remove();
highlight = null;
}
highlight = lv.highlight(ids);
});
});
element.addEventListener("blur", function(){
if(highlight){
highlight.remove();
highlight = null;
}
});
}
As the user slides the slider thumbs, both the renderer and histogram will update.