The next step will be to provide compelling visualizations of the data for each census tract that a user clicks. We will use Google Charts Tools API, which provides a nice set of graphical data representations.

Adding the Google Charts API

Add the link to the Google Charts API in your header, below the other API calls.

Then, in your global space, add the following lines to access the visualization package.

Tracing the data to chart

First, let’s figure out what data variables we want to chart. The getATSData has a trace call in it, so let’s use the debug console to see what is returned from ArcGIS Server:

There are a lot of variables in the attributes for this census tract layer, and they can be accessed through this root variable:

data.features[0].attributes

In order to create a pie chart, we need to pick and choose which variables to include in the chart. Let’s take race as an example. In order to create a race pie chart, we need to include the following attributes:

• AMERI_ES
• ASIAN
• BLACK
• HAWN_PI
• MULT_RACE
• OTHER
• WHITE

Let’s put these variables into an array, and then feed the array to a new function drawChart that will generate a chart (lines 29 and 30 below). We will be creating the drawChart later:

Creating a function to generate charts

We will use the template provided by the Google Charts quick start documentation. This quick start includes a function that creates a chart:

Put this function in your code (we’ll modify it later). Now, when a user clicks on the map, it should produce a pie chart:

Of course, we need to modify the pie chart to reflect the attributes we dynamically retrieve from ArcGIS Server. The chart API requires you to provide the data as an array that looks like:

['name1', value1], ['name2', value2], ['name2', value2]...

For race, it should look something like:

['AMERI_ES',44],['ASIAN',447],['BLACK',375]...

We have already created a variable that stores the race attributes, so let’s modify the drawChart function so that it reads the array and displays its values:

Now the function accepts four parameters:

• agsdata: this is the data coming from ArcGIS Server
• vars: this is the list of variables that need to be included in the pie chart
• div_id: a unique identifier to generate a div for your chart dynamically
• title: a display title for the chart

Instead of hardcoding the pie chart data fields and values, we have added an $.each loop that goes through all the attributes provided by ArcGIS Server. The loop then checks it against the attributes in the vars variable, and IF an attibute is in the provided vars array, it then adds it to a chartdata array along with the value of the attribute. chartdata is then fed to the Google Chart data.addRows.