Lets Make Pie(charts)

Are you a Rails developer wishing your brilliantly arranged database would just…display? Have you ever been amazed by the quality of somebody else’s infographics, and felt a little pang of jealousy?

Yeah me too. Chartkick is a javascript library built for Rails, rendering beautiful SVG’s for your application. Chartkick is relatively easy to install and use. With a minimal amount of setup, you can generate some pretty nifty charts and graphs of your data so those ActiveRecord skills of yours can get the appreciation they deserve.

But why bother? Not merely for our own edification. Because the simple act of visualizing data helps us recognize patterns we otherwise might’ve missed.

The red is cholera. The cat-eyes are wells. That people drink from.

Looking at that map of the 1854 cholera outbreak in London for about six seconds and the pattern is clear. They were sure the contaminant was in the air. A simple data visualization saved thousands of lives, and helped advance our understanding of germ theory, in turn saving millions more. Imagine building out a massive table of infected persons, and their addresses without a computer, and try to make sense of where the infection is coming from.

So, now that you’re convinced, lets claim the power of data visualization for ourselves! First I’m going to give the simplest possible overview of how to get a chart on the page.

In your Gemfile:

gem 'chartkick'

In your application.js file:

//= require Chart.bundle
//= require chartkick

//= require_tree .

In your controller:

@my_pets = {dog: 1, cat: 2}

The data that you pass into the chart method needs to be formatted as a hash; this is because chartkick uses the keys as names for our data-fields. Certain types of charts need the values to be integers, because that’s how the y-axis in a column chart is labelled, for example.

In your view:

<%= pie_chart @my_pets, donut: true %> 

Will produce:

(It doesn’t have to be a donut, that’s just nice).

That’s it. It may behoove us to write some methods that take ActiveRecord collections and return delicious hashes you can use to make pie(charts).

Lets take it home. What if you want to be able to download a chart of my pets? What then? This then:

<%= column_chart @my_pets, download: "my-pets-pie-chart" %>

Now you can.

I have more pets than when I started writing.

But hey, maybe we don’t wanna put our pets into a pie. Lets change our ERB to this:

<%= line_chart @my_pets %>

Stunning. Actually, lets use bar-charts instead. That should give a clearer idea of how many pets I have.

<%= column_chart @my_pets %>
What happened to my snails?

If you’re dealing with several charts dealing with many different collections, you may want to build them their own controller. If, on the off-chance that you wanted to display data other than the number of pets you have — say, something from your database? — we might just make our own controller for passing formatted data to our views.

class ChartsController < ApplicationController
def completed_tasks
render json: Task.group_by_day(:completed_at).count

But wait — what’s that wonderful group_by_day method? Does that come with?

No. That’s called Groupdate.

Go grab it if you want, I’d recommend it even if you don’t plan to create graphs. Groupdate methods return hashes, which makes it the perfect companion to Chartkick.

gem 'groupdate'

Groupdate does more or less what the name suggests, allowing you to group collections by whatever unit of time you want. Which is crazy useful when you think about it.

So this, in your controller:

@data = Order.group_by_day_of_week(:created_at, format: "%a").count

and this in your view:

<%= line_chart @data, download: "orders" %>

Gives you this on the page:

Actually kind of useful

That’s a visual depiction of how many Orders in our database were created on each day of the week. And its downloadable.

…and that’s that. A few lines of code and we can generate some passably appealing charts for our app which can be downloaded directly by the browser.


For great documentation and tons of display options for Chartkick check out: https://chartkick.com/

Groupdate on GitHub: https://github.com/ankane/groupdate