After using AJAX to allow the CaBi Mapper app to get fresh data, I wanted a way to visualize the flow and ebb of data. I selected Google Chart Tools as the visual interface for my new CaBi Dashboard app. The app keeps track of the number of bikes and docks for each station with a stepped area chart. You can also view the current status of stations using the gauge visualization.

The stepped area chart resembles a seismograph, recording the number of available bikes and empty docks. The values are stacked on top of each other instead of overlapping, so the total is consistent. The program does not retrieve old historical data; it accumulates data as long as you keep the window open.

The AJAX code enables the charts to be continuously updated, live from Capital Bikeshare‘s XML feed. The frequency is chosen by the user. They can be displayed in any order. The most valuable sort shows the most unbalanced stations on top, those where the number of docks or bikes is closest to zero. The order of the charts is updated as new data arrives that affects the sorting order.

Switching the view to gauges gives you a fancy snapshot of the current status. The gauges are fancy pie charts, and it’s fun to watch the needles move as the percentages are adjusted.

Because the gauges are difficult to read when small, and I didn’t want to have to scroll to see them all, an option lets you determine how many to display.

Unlike the area charts, the order (and thus the displayed gauges) doesn’t change as new data arrives. You can change the order by selecting a new sorting method.

Surprisingly, Google implements the series of gauges as a single chart. Using their DataTable class, each row represents a different gauge.

Behind the scenes, I have my own PHP program as the proxy to CaBi’s XML data, in order for the AJAX magic (OK, XMLHttpRequest) to do its work.

This is the first version of the CaBi Dashboard app. As always, bug reports and suggestions are welcome.

CaBi Dashboard with Google Chart Tools

Leave a Reply