Charts Made Simple

The Chartkick Gem and Google Charts

In the business world, data visualization is king. Whether you’re pitching a startup or delivering a quarterly statement, you’ll find that graphics immediately lend your presentation an air of legitimacy.

Although there has been a concerted push towards more modern tools, Excel is still undoubtedly the primary data management software in use today. While Excel has the ability to make very clean and professional graphics, its basic templates are immediately recognizable.

A generic Excel chart limping along
Another painfully obvious Excel chart

There is nothing inherently wrong with the default Excel charts — they are readable at a glance and dead simple to generate.

However, with the mobile revolution spurring a mass exodus from desktop computing, Excel is now synonymous with corporate workstations and a symbol of the hardware generation. A determined counterculture has emerged, setting itself against the ‘tired’ business tools of yesteryear.

There’s an unspoken expectation that ‘new tech’ must present itself with crisp, interactive charts that display as little information as possible while sliding and morphing at warp speed when hovered over.

Do you want charts like that? Of course you do. Luckily, Ruby has just the tool for you!

This isn’t a very good chart, but it’s already miles better than the Excel chart in terms of trendiness. It’s only got one color, but look at that tasteful gray font. And it’s sideways — always the sign of a chart master at work.

What’s better: you can generate it using your existing Rails model (you have one of those, don’t you?) in a single line.

This shows the power of the Chartkick Ruby gem, which is a wrapper for several of the most popular open-source chart libraries. This example (and the others on this page) uses Google Charts.

Note that you can simply call your ActiveRecord selector methods to aggregate your models into display groups.

You can also provide data outside of models (typically for smaller datasets).

If you’re not working in Rails, or don’t have an existing ActiveRecord model to pull in, you can implement Google Charts directly using Javascript! (Note: while Chartkick also supports Javascript, it’s limited by its option hash, which is located in a separate file from the chart object itself)

A Google Chart implementation will take slightly more than one line. For example, here’s the code for a simple timeline (one with even fewer fields than the Flatiron one above).

Luckily, even significantly more complicated charts still use the same code structure.

This short script generates a GeoChart based off of live Glassdoor jobs data, aggregated by state. Their API can be accessed with AJAX requests and served to the chart with minimal load time.

Total jobs posted, Software category, via Glassdoor 2016

In addition to Chartkick and Google Charts, there are Highcharts and Chart.js, which are both Javascript open-source chart libraries. Highcharts requires a paid subscription, but doesn’t offer any additional value unless you are making very complicated, detailed graphics. It’s tailored towards enterprise use.

Chart.js looks similar to Google Charts in implementation, though its aesthetic tends towards softer colors out of the box. The options hash requires more complicated nested logic, but also provides better documentation for live updating and animation control.

var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});
Like what you read? Give Wesley Davis a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.