Hide Table of Contents
Latest Samples
Image Layers
Show query results with a chart

Description

This sample shows how you can use query task results to construct a chart with the Google Chart API. When you run the sample, click on a county to see a chart of its demographic data appear in a dismissable InfoWindow.

The function init creates a Map, QueryTask and a Query. Notice that the constructor for the QueryTask requires the URL of a layer in a map service (http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3). The number 3 at the end of the URL is the index of the counties layer in the map table of contents. To find out the URL to your own map service and its layer indexes, use the Services Directory

The Query object contains the conditions for the query such as what geometry to query, whether or not to return the geometry so it can be displayed on the map, and which fields should be queried.

The following event listener detects when someone clicks the map:

dojo.connect(map, "onClick", doQuery);

The doQuery function in the above listener captures the location of the map click and sets it as the query.Geometry. The county that this point intersects will be queried. The following line runs the query task:

queryTask.execute(query);

When the query task completes, another event fires, calling the getChart function:

dojo.connect(queryTask, "onComplete", getChart);

getChart reads the query results, which are originally returned as a FeatureSet. The function parses the demographic totals, calculates percentages for each demographic group, and constructs the required URL syntax for the Google Chart API. This function also symbolizes the queried feature with a red dashed outline and displays the InfoWindow after the chart is created.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Demographic Charts</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      var map, queryTask, query, click;
      var wd = 240;
      var ht = 110;
      var chartParams = { cht:"p3", chl:"White|Black|Hispanic|Asian|Other" };

      function init() {     
        var extent = new esri.geometry.Extent({"xmin":-13022985,"ymin":3922153,"xmax":-11799993,"ymax":4533650,"spatialReference":{"wkid":102100}});       
        map = new esri.Map("map", {
          basemap: "streets",
          center: [-111.494, 35.47],
          zoom: 7
        });
        
        map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", { opacity:0.4 }));
        
        dojo.connect(map, "onClick", doQuery);

        queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
       
        dojo.connect(queryTask, "onComplete", getChart);

        dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});

        query = new esri.tasks.Query();
        query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
        query.outFields = ["NAME", "WHITE", "BLACK", "ASIAN", "HISPANIC", "OTHER"];
        query.returnGeometry = true;
        query.outSpatialReference = {"wkid":102100};

        map.infoWindow.resize(275,150);
      }

      function doQuery(evt) {
        click = query.geometry = evt.mapPoint;
        queryTask.execute(query);
      }

      function getChart(featureSet) {
        map.graphics.clear();
        var features = featureSet.features;
        var feature, attributes, white, black, asian, hispanic, other, total, graphic;
        for (var i=0; i<features.length; i++) {
          feature = features[i];
          attributes = feature.attributes;

          white = parseInt(attributes.WHITE);
          black = parseInt(attributes.BLACK);
          asian = parseInt(attributes.ASIAN);
          hispanic = parseInt(attributes.HISPANIC);
          other = parseInt(attributes.OTHER);

          total = white + black + asian + hispanic + other;

          white = (white / total) * 100;
          black = (black / total) * 100;
          asian = (asian / total) * 100;
          hispanic = (hispanic / total) * 100;
          other = (other / total) * 100;

          var params = dojo.mixin({
              chf:"bg,s,FFFFFF50",
              chs:wd + "x" + ht,
              chd: "t:" + white + "," + black + "," + hispanic + "," + asian + "," + other
            }, chartParams);

          var mySymbol = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2.5), new dojo.Color([255,255,0,0.25]));

          feature.setSymbol(mySymbol);
          map.graphics.add(feature);
          
          map.infoWindow.setTitle(attributes["NAME"]);
          console.log("infowindow");
          map.infoWindow.setContent("<img src=\"" + "http://chart.apis.google.com/chart?"
                                     + decodeURIComponent(dojo.objectToQuery(params)) + "\" />");
          
          map.infoWindow.show(map.toScreen(click),map.getInfoWindowAnchor(map.toScreen(click)))
        }
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <span style="font-size:200%; font-weight:bold;">USA County Demographics</span>
    <div id="map" style="width:1000px; height:500px; border:1px solid #000;"></div>
  </body>
</html>