PiCharts: Easy JavaScript charts with Ruby

When building web applications I often come across use cases where I’d like to have a chart. Even when I’m not building web applications, I find that having a visualization of data in different contexts can provide me with a better understanding of the underlying data as I’ve written about before.

I’ve personally found the tools I had available to me with Ruby to be rather limited, or — more specifically — not what I wanted specifically. In some cases, I found extremely simple solutions; with others, I found much more complex APIs that may not even make interactive charts. Moreover: they seemed rather clumsy to work with.

While looking at the available charting options available to me, I stumbled across chartjs which provided a relatively simple JavaScript interface to building elegant, responsive charts that I thought could be perfect my uses cases.

Web applications gott’a have it I guess.

For me, the downside was building charts with JavaScript — leaving the beauty of my Ruby world.

I decided I would just build Javascript charts with Ruby.


To install the gem I created ( assuming you have Ruby installed ):

$ gem install pi_charts


My goal with PiCharts was to create an interface to be able to build charts with that is hopefully intuitive enough for people to use. I’ve included 16 examples for usage for the the project on GitHub to help people get started.

Let’s Bake a Pie

This is a simple example of using Sinatra and PiCharts to build an example pie chart application. Very intricate stuff, I know.

Don’t worry: no cats or dogs were hurt in the making of this pie.

In this pie, we’re going to throw in 80 cats, and 50 dogs.

We’re going to throw it in the oven with a cdn, a little hover goodness, and responsiveness.

Then we’re going to bake that chart up at 60% width for the html.

Serving the Pie

When we start this application:

$ ruby bake_a_pie.rb

We’ll see the chart on the left with random colors set for both datasets generated every time we visit /serve_pie on localhost ( port 4567 ).

How does this work?

While looking over the chartjs documentation — which is fantastic — I found a really lovely little bit of magic in how the charts with chartjs are setup:

We can see that the majority of the magic is tied to a hash ( key, value pairing ) that is setting up the chart including the data, options and even the type.

With Ruby, if we simply build up that same relative key value pairing then just serialize that data into a bit of a JSON, we can then populate the needed options for the chart instance in a very straightforward manner.

Line Charts

If pie charts aren’t you thing — or maybe you really just want to express the change in data over time — then a line chart is another type of chart you can build with PiCharts.

Bar Charts

Got a lot on the line? Maybe you should try out a bar chart! Maybe I should give up on terrible puns? Not today though.

Conclusion on PiCharts

Right now PiCharts only supports three kinds of charts: bar, pie, and line. It’d probably be pretty easy to implement the rest of the types of charts that are supported by chartjs. Right now I haven’t had a need to use those other charts, but I do plan on adding them in the future — especially if I suddenly end up needing to use them.

Also, whilst PiCharts uses the underlying magic of chartjs, I didn’t attempt to make an exact 1 to 1 replica of all the options available to you when working with chartjs directly. I’ve added in the options that I find myself using right now: things like optionally setting colors for chart datasets, adding data to existing datasets optionally, and things that I think other people might find useful. There are still plenty of features that can be brought over, they simply just don’t all exist — yet.

Until next time, thaz’all folks.

I still don’t know the difference between charts and graphs.