Histogram Range Slider | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to create a histogram range slider from the Histogram and Slider components and use it to filter a layer’s features based on a numeric attribute. The histogram can be generated with the histogram() statistics function.

      const field = "temp";
      const min = 0;
      const max = 30;
      // create the histogram for the temperature field
      const histogramResponse = await histogram({
        layer: layer,
        field: field,
        numBins: 100,
        minValue: min,
        maxValue: max,
      });

Then you can construct the histogram using the output bins, and min/max values.

      // set the histogram properties
      histogramElement.bins = histogramResponse.bins;
      histogramElement.min = min;
      histogramElement.max = max;
      histogramElement.colorStops = [
        {
          color: [89, 157, 212],
          minValue: min,
          maxValue: max,
        },
      ];
      // when the slider values change, update the histogram and apply a feature effect
      sliderElement.addEventListener("arcgisInput", (event) => {
        histogramElement.colorStops = [
          {
            color: [89, 157, 212],
            minValue: sliderElement.values[0],
            maxValue: sliderElement.values[1],
          },
        ];
        layerView.filter = {
          where: `temp BETWEEN ${sliderElement.values[0]} AND ${sliderElement.values[1]}`,
        };
      });

Histogram component

Update a renderer's attribute

Customize ColorSlider Histogram

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Histogram Range Slider | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #controls {
        overflow: hidden;
        padding: 5px 10px;
      }

      #description {
        font-size: var(--calcite-font-size);
        color: var(--calcite-color-text-2);
      }

      #titleText {
        font-size: var(--calcite-font-size-xl);
        font-weight: var(--calcite-font-weight-light);
      }

      calcite-block {
        margin-block: 0;
      }

      calcite-panel {
        width: 310px;
      }
    </style>
  </head>

  <body class="calcite-mode-dark">
    <arcgis-scene
      basemap="dark-gray-vector"
      camera-position="59.64726, -28.51922, 14625266"
      camera-heading="0"
      camera-tilt="0.15">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <calcite-panel slot="top-right" expanded>
        <calcite-block expanded label="Ecological Marine Units">
          <div id="titleText">Ecological Marine Units</div>
          <div>Indian Ocean</div>
        </calcite-block>
      </calcite-panel>
      <arcgis-expand slot="bottom-left" expand-icon="filter" expanded>
        <div id="controls">
          <div id="description">Surface Temperature (°C)</div>
          <div id="outer-container">
            <arcgis-slider
              min="0"
              max="30"
              values="0,30"
              range-labels-placement="end"
              show-range-labels>
              <arcgis-histogram
                slot="content-start"
                color-blending-enabled
                style="flex: 1"></arcgis-histogram>
            </arcgis-slider>
          </div>
        </div>
      </arcgis-expand>
    </arcgis-scene>
    <script type="module">
      const [FeatureLayer, histogram] = await $arcgis.import([
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/smartMapping/statistics/histogram.js",
      ]);
      const histogramElement = document.querySelector("arcgis-histogram");
      const sliderElement = document.querySelector("arcgis-slider");
      // Flash flood warnings layer
      const layer = new FeatureLayer({
        portalItem: {
          id: "fded240144c74ce988771a503a3a03d8",
        },
        outFields: ["Temp"],
        // only display surface temperature data
        definitionExpression: "UnitTop = 0",
      });
      // Get a reference to the Scene component
      const viewElement = document.querySelector("arcgis-scene");
      // Wait for the view to initialize fully
      await viewElement.viewOnReady();
      // Add the layer to the scene and retrieve its view
      viewElement.map.layers.add(layer);
      const layerView = await viewElement.whenLayerView(layer);

      const field = "temp";
      const min = 0;
      const max = 30;
      // create the histogram for the temperature field
      const histogramResponse = await histogram({
        layer: layer,
        field: field,
        numBins: 100,
        minValue: min,
        maxValue: max,
      });

      // set the histogram properties
      histogramElement.bins = histogramResponse.bins;
      histogramElement.min = min;
      histogramElement.max = max;
      histogramElement.colorStops = [
        {
          color: [89, 157, 212],
          minValue: min,
          maxValue: max,
        },
      ];
      // when the slider values change, update the histogram and apply a feature effect
      sliderElement.addEventListener("arcgisInput", (event) => {
        histogramElement.colorStops = [
          {
            color: [89, 157, 212],
            minValue: sliderElement.values[0],
            maxValue: sliderElement.values[1],
          },
        ];
        layerView.filter = {
          where: `temp BETWEEN ${sliderElement.values[0]} AND ${sliderElement.values[1]}`,
        };
      });

    </script>
  </body>
</html>