Skip to content

Examples: Dynamic Chart

Jump to bottom
Susan E. McGregor edited this page Feb 7, 2014 · 1 revision

examples/dynamic_chart

One of the features of DataDocs we're most excited about is its support for visualizations (even interactive ones!) driven by API data. In this example we show how the Google Visualizations API can be used to create customized, interactive line charts using API data, though any combination of data and visualization library can be used as long as the results are rendered inside a div.

Note: Due to the implementation details of Google Visualizations, this particular example is not properly interactive in fullscreen mode, though it works as expected at its original resolution. Over time, we hope to include to provide an index of libraries that work correctly in fullscreen mode as well.

As in the "simple api" example, we'll start with empty divs and then add the visualizations to them once our libraries have loaded:

  1. Open the dd_dynamic_chart.html file, and update the number/ids of the empty divs in the "overlays" div. In css/dd_dynamic_chart.css update the positioning of the divs by creating or modifying the corresponding css classes. In main.js, adjust the "data_doc.addSalt" calls to target your updated divs.

  2. Before we can render our chart, we need to make sure the charting library has loaded. In dd_dynamic_chart.html, the Google Visualization API is loaded just below the "load the google visualization library". After our "data_doc.addSalt" calls in main.js, we'll use the google.load method to load the "corechart" package and tell it to run the function "loadChartData" once the library is loaded (this is specified in the "callback" parameter).

  3. Once the library is loaded, the function "loadChartData" will be called, so inside this function we'll use $.get requests to load our data files. In this example, we're looking at unemployment data from the FRED API. Each of these requests will trigger an individual function to reformat the data, customize the look and feel of the chart and build it in a specified div.

Note: For a discussion of how to use cron jobs to have the data in your JSON files update automatically from an API, see the "simple api" tutorial.

  1. In the JSON callback function ("buildU3Chart" and "buildU6Chart" in our example), we first create a Google Visualization DataTable object, and then reformat our JSON data into an array of arrays and use Google's built-in "addRows" method to add it to our DataTable object. In the "options" JSON object, we can customize virtually everything about our chart's appearance according to the documentation here (https://developers.google.com/chart/interactive/docs/gallery/linechart?csw=1#Configuration_Options) . Finally, we pass our target div via javascript the "google.visualization.LineChart" method and call the "draw" function with the DataTable and our options object to draw the chart.

Note: The google.visualization.LineChart function must be passed a div retrieved with plain JavaScript; a jQuery object will not work properly.

  1. Open up the dd_dyanmic_chart.html file in FireFox to view your video with its included dynamic charts!
Clone this wiki locally