Hide Table of Contents
View Show query results with a Dojo chart sample in sandbox
Show query results with a Dojo chart

Description

This sample shows how you can display query task results in a Dojo chart.

When you run the sample, click on a census tract to view a chart of age information for that population in a Popup. Dojo provides several charting themes, this sample uses the "Julie" theme but can be modified to use another theme. View the DojoX Charting Preview page to view additional chart themes.

To switch the theme add a dojo.require for the theme you'd like to use:

dojo.require("dojox.charting.themes.Julie");
Next, set the theme in the PopupTemplate to the new theme.
template = new esri.dijit.PopupTemplate({
title
: "Age Distribution in {FIPS}",
mediaInfos
: [
{
type
: "piechart",
value
: {
fields
: [
"AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
"AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
],
theme: "Julie"
}
}
]
});

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Popup with Chart</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #mapDiv{padding:0;}
    </style>

    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="https://js.arcgis.com/3.38/"></script>
    <script src="javascript/basemapgallery.js"></script>
    <script src="javascript/ovmap.js"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");
      dojo.require("esri.tasks.geometry");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");

      // Make sure you include the theme you want here
      dojo.require("dojox.charting.themes.Julie");

      dojo.ready(pageReady);

      var map, queryTask, query, template;

      function pageReady() {
        map = new esri.Map("mapDiv", {
          basemap: "streets-vector",
          center: [-117.252, 34.067],
          zoom: 12
        });

        dojo.connect(map, "onLoad", mapReady);

        var censusLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
        map.addLayer(censusLayer);
      }

      function mapReady(map) {
        map.infoWindow.resize(270, 225);
        dojo.connect(map, "onClick", executeQueryTask);

        queryTask = new esri.tasks.QueryTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1");

        query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["*"];
        query.outSpatialReference = map.spatialReference;
        query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

        //Reference the chart theme here too
        template = new esri.dijit.PopupTemplate({
          title: "Age Distribution in {FIPS}",
          mediaInfos: [
            {
              type: "piechart",
              value: {
                fields: [
                  "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
                  "AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
                ],
                theme: "Julie"
              }
            }
          ]
        });

        //Add the overview map and basemap gallery to the app
        addBasemapGallery(map);
        addOverview(map);

        //resize the map when the browser resizes
        dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize);
      }

      function executeQueryTask(evt) {
        query.geometry = evt.mapPoint;

        var deferred = queryTask.execute(query);

        deferred.addCallback(function(response) {
          // response is a FeatureSet
          // Let's return an array of features.
          return dojo.map(response.features, function(feature) {
            feature.setInfoTemplate(template);
            return feature;
          });
        });


        // InfoWindow expects an array of features from each deferred
        // object that you pass. If the response from the task execution
        // above is not an array of features, then you need to add a callback
        // like the one above to post-process the response and return an
        // array of features.
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }
    </script>
  </head>
  <body class="claro" >
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:'false'" style="width: 100%; height: 100%;">
      <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
 
          
Show Modal