Return query results using a pie chart

Description

This example queries the map for census blocks within the current map extent. the user can then click on a census block to see an info window with a chart of the demographic makeup of the census block. the chart is created with the Google chart API.

This is an example of querying the block census data of the current map range. You can click the corresponding block on the layer obtained by the query to view the pie chart generated by using the demographic data of the block. This pie chart is generated using the Google chart API.

To accomplish the query, the example uses querytask, a class specific to the ArcGIS JavaScript extension. The URL of the map layer to be queried is passed to the querytask constructor:

qtask = new esri.arcgis.gmaps.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1");

To complete this query, the querytask object is used in this example, which is defined through ArcGIS JavaScript extension. To generate a querytask object, you must use a URL pointing to the map address and pass the URL as a parameter to the construter.

Notice the 1 at the end of the URL. this means that the layer with index number 1 in the esri_census_usa map service will be queried. to find out the layer index numbers and URLs for a given map service, use the Services Directory.

There is an index number at the end of the URL. different index numbers have different functions,

The querytask requires a query. the Code specifies the bounding box of the area to be queried (query. querygeometry) and the fields to return (query. outfields ). the query is also told to return the geometry information of the features (query. returngeometry ).

The querytask generated in the constructor is only a layer for query. To really execute the query, you also need a query. Query has the following parameters:

Boundingbox (query. querygeometry) of the queried Region)

Returned field of the query result (query. outfields)

Whether to return the query result graph (query. returngeometry = true ;)

This line runs the task, thereby executing the query:

qtask.execute(query, false, mycallback);

The three arguments represent 1) the query conditions, 2) whether to return kml, and 3) a callback function that runs immediately after the query is executed.

Execute the query statement qtask.exe cute (query, false, mycallback );

The three parameters respectively refer to: 1) query condition 2) whether to return kml 3) a callback function executed immediately after the query is executed

The callback function mycallback does the work of setting up the chart in the info window. the function takes as input the features returned from the query (fset ). it loops through each feature and does the following things:

1. Parses the information from the age Fields
2. Calculates the total population for the block group
3. Calculates a percentage of the population for each age group
4. Creates the text and images for the info window that will appear when someone clicks the feature. in doing so, the function passes the information on age distribution to the Google chart API to create a chart. look closely in the Code for http://chart.apis.google.com/chart? And you can see where the Google chart API is being referenced. See the Google chart API developer's Guide to learn about constructing charts in the Google chart API.
5. Adds the feature and its associated info window information to the map.

The mycallback function creates a pie chart in the info window. The parameters required for this function are the results obtained by the query (fset array), and then use a loop to do the following for each element in the array. 1. read data from the age field and convert it to a number. calculate all population 3. calculate the proportion of the population in each group. 4. create the text and pie chart displayed in the Information Window (the pie chart is obtained by passing the data of each scale as a parameter to the Google chart API. add features and the corresponding information window to the map sample source code: