For more info on Chart.js, have a look at the first post in this three-post series.
For looking at the data in the ACLED app, I wanted to be able to view violent events by the day, ranging back over an explicit period. The result would be a line chart:
The problem was, when I tried to make the line chart span too large of a time period, the lines would show up…but the date labels along the bottom would become too numerous, and so would get squished together on top of each other to form a thick, illegible, greyish-white bar. So in order to have any idea what sorts of time periods we were talking about, I needed the ability to show chart labels less frequent than every single day. So, maybe something like this:
Easy. Quick. Also, clunky and kind of gross.
Later, I switched to this better implementation, which reduces the creation of @each_month to a few lines inside the controller method for yielding this page:
This uses a few new turns of syntax (it’ll catch on) to do what we want. Translated into English, it sayeth:
.map: Create an array called @each_month. For each element in the array called @days,
Date.parse(day.to_s): parse that element to a string and,
ternary operator (the ? and : line): if it is at the beginning of the month, then inject into @each_month a string with that date (specifically just the month and year), otherwise inject into @each_month an empty string.
I love learning new syntax like this (and also new ways to avoid loops, which this ternary operator kindly provides).
Reblogged this on Dinesh Ram Kali..