Dynamic feature charting with Chart.js

Plot feature attributes on a dynamic chart that updates as users pan and zoom, and respond to chart interactions by modifying feature layer contents. This demo relies on Chart.js to render an interactive scatterplot.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Dynamic feature charting with Chart.js</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-EMt/tpooNkBOxxQy2SOE1HgzWbg9u1gI6mT23Wl0eBWTwN9nuaPtLAaX9irNocMrHf0XhRzT8B0vXQ/bzD0I0w=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<!-- Load Chart.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

<style>
  .chart-container {
    height: 245px;
    width: 245px;
  }

  #info-pane {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 400;
    padding: 1em;
    background: white;
  }
</style>

<div id="map"></div>
<div id="info-pane" class="leaflet-bar chart-container">
  <canvas id="chartCanvas"></canvas>
</div>

<script>
  // STEP 1: MAKE A MAP AND ADD LAYERS
  var map = L.map('map').setView([45.526, -122.667], 13);

  L.esri.Vector.vectorBasemapLayer('ArcGIS:Community', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).addTo(map);

  // create and add a feature layer
  // features from this layer will appear in the Chart.js scatterplot
  var treesFeatureLayer = L.esri.featureLayer({
    url: 'https://www.portlandmaps.com/arcgis/rest/services/Public/Parks_Misc/MapServer/21/'
  });

  treesFeatureLayer.addTo(map);

  // STEP 2: DEFINE A CHART
  // this is a static scatterplot chart definition for now, but it will
  // soon become dynamic by responding to map and feature layer events
  var initialChartData = {
    datasets: [{
      label: 'Portland Heritage Trees',
      // the data values are empty at this moment
      // and will be updated dynamically below
      data: []
    }]
  };

  var chartOptions = {
    scales: {
      x: {
        title: {
          display: true,
          text: 'tree diameter'
        },
        beginAtZero: true,
        max: 250,
        ticks: {
          stepSize: 50
        }
      },
      y: {
        title: {
          display: true,
          text: 'tree height'
        },
        beginAtZero: true,
        max: 250,
        ticks: {
          stepSize: 50
        }
      }
    },
    maintainAspectRatio: false,
    // turn off animations during chart data updates
    animation: false,
    // see STEP 4 below
    onHover: handleChartHover
  };

  var chart = new Chart('chartCanvas', {
    type: 'scatter',
    data: initialChartData,
    options: chartOptions
  });

  // STEP 3: MAKE THE CHART DYNAMIC BY ESTABLISHING MAP-TO-CHART COMMUNICATION
  // show in the scatterplot only the features in the map's current extent
  // by handling several events from both the map and feature layer
  map.on('zoom move', updateChart);
  treesFeatureLayer.on('load', updateChart);

  function updateChart () {
    // reformat the features' attributes of interest into
    // the data array format required by the Chart.js scatterplot
    var scatterPlotDataArray = [];

    treesFeatureLayer.eachActiveFeature(function (e) {
      // loop over each active feature in the map extent and
      // push an object into the scatterPlotDataArray in this format:

      // {
      //   x: diameter attribute value,
      //   y: height attribute value,
      //   featureId: unique ID for chart-to-map communication in STEP 4
      // }

      scatterPlotDataArray.push({
        x: e.feature.properties.DIAMETER,
        y: e.feature.properties.HEIGHT,
        featureId: e.feature.id
      });
    });

    // assign the new scatterPlotDataArray to the chart's data property
    chart.data.datasets[0].data = scatterPlotDataArray;

    // finally, instruct the chart to re-draw itself with the new data
    chart.update();
  }

  // STEP 4 (OPTIONAL): ESTABLISH CHART-TO-MAP COMMUNICATION
  // up until now the map and feature layer inform the chart what to render,
  // but interactions with the chart can also influence the map contents
  function handleChartHover (event, elements, chart) {
    if (!elements.length) {
      // if there were no data elements found when hovering over the chart,
      // reset any previous styling overrides and return
      treesFeatureLayer.eachFeature(function (e) {
        e.setOpacity(1);
        e.setZIndexOffset(0);
      });

      return;
    }

    // otherwise, bring attention to the features on the map
    // that are currently being hovered over in the chart
    var hoverFeatureIds = elements.map(function (datum) {
      return chart.data.datasets[datum.datasetIndex].data[datum.index].featureId;
    });

    treesFeatureLayer.eachFeature(function (e, idx) {
      if (
        hoverFeatureIds.indexOf(e.feature.id) > -1
      ) {
        e.setOpacity(1);
        e.setZIndexOffset(10000);
      } else {
        e.setOpacity(0.1);
      }
    });
  }
</script>

</body>
</html>
Edit this sample on GitHub
Terms