For those of you that don’t know,
- Open Gov built a financial transparency portal for The City of Fort Lauderdale.
- This is the tutorial from a Code for Fort Lauderdale meeting on April 1, 2015.
Step 0 – Plain Jane
Step 1 – Adding a Title
Step 2 – Resize
After adding the title, the graph looks cramped. We can alter the height and width parameters to fix this as the below gist illustrates.
Step 3 – Formatting Currency
The scientific notation on the left (y-axis) and on the values makes sense, but isn’t terribly readable. Fortunately, we can beautifully format currency with a great library called numeral.js. You can see it in action below. This turns “$10e+7” into “$10 m”.
Step 4 – Set Axis Label Width
Step 5 – Refactor
Our astute readers and developers will notice the identical code that formats the currency for the axisLabelFormatter and
valueFormatter. For consistency’s and stability’s sake, we need to rectify this situation. In our case, we create and use a single function called formatLikeCurrency.
Step 6 – Debugging Tip
As you work through dygraphs, for debugging it can be helpful to use the hideOverlayOnMouseOut property. This prevents the chart corresponding to the mouse position to stay visible until making another selection. Consider moving between other sites, text editor, e-mail and folder/file viewer. It’s important to keep your frustration to a minimum.
Step 7 – Styling
Styling creates a better visualize experience for anyone using or viewing your data. Fortunately, we easily style the visualizations generated with dygraphs using CSS. First we need to configure our class structure that will be used by CSS selectors. Then, we tell dygraphs the correct class to put the labels, that appear on mouse hover.
Step 8 – Profit