You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

const slider = new Slider({
  min: 1880,
  max: 2018,
  values: [ 1880 ],
  rangeLabelsVisible: true,
  labelsVisible: true,
  labelInputsEnabled: true,
  precision: 0,
  steps: 1,
  container: "sliderDiv"

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;
          highlight = null;
        highlight = lv.highlight(ids);

    element.addEventListener("blur", function(){
        highlight = null;

As the user slides the slider thumbs, both the renderer and histogram will update.

Sample search results