This example shows how to pull data from a Socrata Dataset (in this case, some Phoenix performance metrics) with the Google “Gauge” 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 “Gauge” visualization is useful when you have a single metric or measure you’d like to compare against a baseline or goal.
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.
First you need to fetch the value for your Gauge using the SODA API. We’ll use a Simple Filter to fetch our single metric:
The result will look like the following:
We’ll define a
fetchValues function that uses the
jQuery.get(...) function to fetch data from the SODA API, transform it into an array of objects, and returns it for handling:
Once we’ve got our data from the SODA API, we’ll plumb it into the Google Chart library to visualize the actual data. We do this in our
DataTable with our data
options object with our gauge configuration. We’ll set our gauge color bands, maximum, and size. See the Google Charts Library documentation for all of the available configuration options
Gauge, 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.