Learn how to easily add dynamic data visualization to your Ruby on Rails web application with the Ruby gem Chartkick. Chartkick accesses the Google Charts and the Highcharts library so you can add add data visualization with one line or Ruby code.
1. Visualize Your Dynamic Data with
Chartkick
Nikki Murry @nikkilizmurray Maggie Epps
@mepptimist
Social Driver
2. The Problem: A mess of JavaScript
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
defs.append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", "#sphere");
3. We Discovered Chartkick!
When would you need Chartkick?
● Your Rails application needs
visualization
● Your priorities are speed,
maintainability, and extensibility
● You want graphs pretty enough
to be user facing, but also
functional enough for admin
reports (Disclosure: Not generated by
Chartkick)
4. About Chartkick
● Andrew Kane (many other cool gems): https:
//rubygems.org/profiles/ankane
● GroupDate (not compatible with SQLite)
● Gem code:
https://github.com/ankane/chartkick
● Documentation:
http://ankane.github.io/chartkick/
5. Libraries That Chartkick Uses:
Highcharts
Very configurable
Has a license fee
Google Charts
Limited library
Free
6. Installation
Add the gem to your Gemfile:
gem ‘chartkick’
Add the script tags to app/views/layouts/application.html.erb
For Google Charts, use:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
If you prefer Highcharts, use:
<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>
7. But I have a project that’s not in Ruby!!!!!
Not a problem!
Chartkick also has a JavaScript library:
https://github.com/ankane/chartkick.js
And a Python library:
https://github.com/mher/chartkick.py
8. What’s so special about Chartkick?
Create a graph with one line of Ruby!
9. Getting the data you want
● Important to know which
data specifically you
want to display
● ActiveRecord or other ORM Queries
● Figuring out the best
chart to display that data
14. I want my data even MORE dynamic!
You can use JSON!
In a controller:
class ChartsController < ApplicationController
def completed_tasks
render json: Task.group_by_day(:completed_at).count
end
end
In the view:
<%= line_chart completed_tasks_charts_path %>