Development | May 13, 2015

Chartkick: The Data Visualization Tool You’ve Been Waiting For

Chartkick: The Data Visualization Tool You’ve Been Waiting For

Data Visualization can help drive home a point and make trends easier to spot. Check out this great tool that will make your life so much simpler.

Visualizing data online can help drive home a point, make trends easier to spot, and give more context about the data. Reading a list of numbers can be boring, but luckily there are a lot of options to add dynamic data visualization to your website to not only bring clarity to the meaning behind the data, but do so in a visually appealing way.

I was working on an exciting internal tool for Social Driver that captured a lot of data that I wanted the team to be able to process easily. I knew where I was starting from (a boring page), and I knew where I wanted to go (a page filled with meaningful charts and graphs), but the route to get from one point to another seemed needlessly long and overly complicated. There should be a simple solution to this problem. Simple solutions are solutions with the least moving parts. The more parts you have, the more items you have to keep from breaking.

Since I was looking to get this app off the ground quickly, I wanted a simple solution. I looked first at d3.js, a Javascript library that has been used to make beautiful interactive charts, graphs, maps, and other means of visualizing data. However, it would have involved a lot of time and writing a lot of Javascript. I had several charts and graphs I wanted to display, and I wanted seamless integration with Ruby on Rails’ ActiveRecord and PostgreSQL. While Ruby was created to make developers happy, Javascript most certainly was not. It didn’t seem like a simple solution.

So I took to Google. There had to be a simple way I could create charts using Ruby! I spent some time reading about Highcharts, which is a fabulous library of interactive data representations, but is not free. I read about Google Charts, which has a lot of the same capabilities of Highcharts, but is available for free. Since I was going for simple and cost-effective ways of visualizing dynamic data, Google Charts was a perfect fit. But how to integrate it with my application quickly?

Chartkick area chart

(Captured from chartkick.com)

Ruby gems are open-source libraries of code that you can add into your core Ruby library to expand functionality. If you are running into a problem in Ruby, there’s usually a gem to help you out. I came across a Ruby gem called “Chartkick.” Chartkick can work with both Highcharts and Google charts to create dynamic interactive charts that draw data directly from whichever database you are using with your Rails application. Better yet, it does it with one line of Ruby code.

Chartkick is also currently available for people who program in Python and Javascript. It’s incredibly easy to use, and a few lines of CSS can be used to customize the charts and graphs to easily fit in with branding. This was the simple and cost-effective solution I needed.

For a Rails application you add the Chartkick gem to the Gemfile list, add the Javascript tags to your application layout file, specifying either Google Charts or Highcharts and you are set!

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

You can then use the helper methods to specify which type of chart or graph you want, and put in the appropriate ActiveRecord query.

ChartKick geo chart

(Captured from chartkick.com)

This gem interfaces with both the Google API and the Highcharts API and does all the work of having the Javascript run on the page.  There were some challenges along the way of figuring out which data I felt was important enough to visualize, and problem-solving of finding the right ActiveRecord query to get the data I wanted. Also important was experimenting with the charts. I tried pie charts, bar charts, and line charts trying to figure out which type of visualization best fit the data and the points I was trying to convey.

If you want to create charts and graphs easily in your web application, you can use Chartkick to access the Google Charts and Highcharts libraries with a small amount of set up. Going forward, a data visualization can quickly be added to any project I am working on. A chart or graph can be added to help drive home a point or emphasis how important the data is.

Want to hear more about the technical side of using Chartkick and customizing it for your brand? Two Drivers gave a talk on the subject at B’more on Rails on Tuesday May 12th, 2015. Check out the presentation slides here.

Social Sharing

Options: Facbeook, Twitter, Linkedin, Pinterest...

AUTHOR DETAILS

Options: Headshot, Bio Excerpt, Link to page with more details

By: Nikki Murray
Junior Associate, Engineering

Nikki works with clients to create member portals and web applications. Before joining Social Driver, Nikki worked as a social worker, and taught herself Ruby on Rails in order to make an app to assist her daily operations. Nikki received a Bachelor of Arts in Political Science from Allegheny College.