Adding Google Charts to your Active Admin Application

Active Admin is a fantastic library for building an administrator interface for a Rails application. Not only does it make creating CRUD pages incredibly simple, but it also allows for custom views–something I discovered recently when I needed to create a dashboard page that included several charts.

This post assumes you are already up and running with Active Admin. It will step through adding Google Charts to your Active Admin application.

1. Add Chartkick Gem

There is a handy gem for charting called Chartkick. It provides adapters for several charting libraries, and it also adds view helpers for generating charts. Add gem 'chartkick' to your Gemfile and run bundle install.

2. Register Google Charts JavaScript

There should be an Active Admin initializer at config/initializers/active_admin.rb. You need to register the Google Chart JavaScript within this config. It will look something like this:

  ActiveAdmin.setup do |config|
    config.register_javascript 'https://www.google.com/jsapi'
  end

3. Require Chartkick JavaScript

In order to access the Chartkick library, you need to require it in the base JavaScript file. The file, located at app/assets/javascripts/active_admin.js.coffee, will look like this:

#= require active_admin/base
#= require chartkick

4. Use Chartkick

You are now all set to begin using Chartkick. Check out the Chartkick docs to see all of the handy view helpers that it provides. Below is an example template.

<%= column_chart [["2016-01-01", 30], ["2016-02-01", 54]], stacked: true, library: {colors: ["#D80A5B", "#21C8A9", "#F39C12", "#A4C400"]} %>

Leveraging Active Admin

I've been really impressed with how easy it is to use and extend Active Admin. Adding charts to custom Active Admin views is just one example of what it can do. How else have you leveraged Active Admin to add quick value to your project?