Examples: Dynamic Chart

examples/dynamic_chart

live demo

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 <div> tags 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" comment. 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.

4. 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 . Finally, we pass our target <div> tag 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.

5. Open up the dd_dyanmic_chart.html file in FireFox to view your video with its included dynamic charts!