Update a renderer's attribute

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.

1
2
3
4
5
6
7
8
9
10
11
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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: (element, label, index) => {
    if(index === 0){
      element.setAttribute("y2", "75%")
    }
  },
  labelFormatFunction: (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: (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", () => {
      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((ids) => {
        if(highlight){
          highlight.remove();
          highlight = null;
        }
        highlight = lv.highlight(ids);
      });
    });

    element.addEventListener("blur", () => {
      if(highlight){
        highlight.remove();
        highlight = null;
      }
    });
  }

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

Image preview of related sample Histogram widget

Histogram widget

Histogram widget

Image preview of related sample HistogramRangeSlider

HistogramRangeSlider

HistogramRangeSlider

Image preview of related sample Customize ColorSlider Histogram

Customize ColorSlider Histogram

Customize ColorSlider Histogram

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close