This example shows how to pull data from a Socrata Dataset (in this case, the City of Chicago crime records) with the Google “Calendar Chart” visualization. As a bonus, we will then embed that chart into a Socrata Perspectives page.
The Google Charts library provides a number of different chart types for visualization that can be leveraged using the SODA API. The “Calendar Chart” is useful when you have incident level data for which you would like to visualize by daily density over the course of a year.
There are a number of prerequisites necessary before starting with this example:
Check out all of the different chart types available through the Google Charts library.
The Calendar Chart requires at a minimum two fields - a date and a numeric value. So we’ll use the SoQL
$group parameters to aggregate our dataset to daily roll-ups, this results in a SoQL query that looks like the following:
The results will be aggregated like the following:
We’ll define a
fetchValues function that uses the
Once we’ve got our data from the SODA API, we’ll plumb it into the Google Calendar Chart library to visualize the actual data. We do this in our
DataTable and add two columns - one for our date and another for our value.
Calendar, feeding it our target element by ID,
Finally, we tie things all together by having the Google Charts library call our function when it loads:
To get access to Socrata Perspectives page, you'll need to work for one of our awesome customers. Maybe your local government is hiring!
Once you’ve created your visualization, you can use the ability for Perspectives to include embedded content to embed your visualization into a new story. To do so, first you’ll need to craft a very simple HTML page like the following which loads your visualization. Make sure you include in that page the
script tags to load your dependencies, in this case both jQuery and the Google Charts library.
Then, to add it as a content block in your story:
That’s it! Click below to see what this looks like.