Filter Chart by Geometry

This example shows how to filter the charted data based on a geometry passed into to the `dataset.query`. For simplicity, the example simply uses the map extent, but it could be any arbitrary geometry.

  require(["cedar", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
    "esri/renderers/SimpleRenderer",  "esri/renderers/UniqueValueRenderer", "esri/Color", "dojo/domReady!"], function(Cedar, Map, FeatureLayer, 
       SimpleMarkerSymbol, SimpleLineSymbol, SimpleRenderer, UniqueValueRenderer, Color) { 

    var defaultSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 9,
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
      new Color([198,12,70,1]), 1),
      new Color([248,187,37,0.9]));

    var rend = new SimpleRenderer(defaultSymbol);

    var featureLayer = new FeatureLayer("https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/It's_a_Tornado_Map/FeatureServer/0",{
      mode: FeatureLayer.SNAPSHOT,
      outFields: ["*"]
    });

    //create esri map
    var map = new Map("map", {
      center: [-99, 38.9],
      zoom: 4,
      basemap: "topo",
      smartNavigation: false
    });

    map.on('load', function() {
      map.disableScrollWheelZoom();
    });

    map.on('extent-change', function() {
      onExtentChanged();
    });


    window.map = map;

    featureLayer.setRenderer(rend);
    map.addLayer(featureLayer);

    var dataset = {
      "url":"https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/It's_a_Tornado_Map/FeatureServer/0",
      "query": {
        "groupByFieldsForStatistics": "state",
        "outStatistics": [{
          "statisticType": "sum", 
          "onStatisticField": "injuries", 
          "outStatisticFieldName": "injuries_SUM"
        }]
      },  
      "mappings":{
        "x": {"field":"state","label":"State"},
        "y": {"field":"injuries_SUM","label":"Injuries"}
      }
    };
    var chart = new Cedar({"type": "bar", "dataset": dataset});

    chart.override = {
      "height": 300,
      "marks": [{"properties": {
          "hover": {"fill": {"value": "#f8bb25"}},
          "update": {"fill": {"value": "#c60c46"}}
        }
      }]
    };

    //create and render a chart
    chart.show({
      'elementId': '#chart'
    });
    window.chart = chart;

    function onExtentChanged(){
      var extent = map.extent;
      extent = JSON.stringify(extent);
      chart.dataset.query.geometry = extent;
      chart.update();
    }


  });