Chartkick

Create beautiful Javascript charts with one line of Ruby. No more fighting with charting libraries!

Works with Rails 3.1+ and most browsers (including IE 6)

💕 A perfect companion to groupdate

Usage

Line chart

<%= line_chart User.group_by_day(:created_at).count %>

Pie chart

<%= pie_chart Goal.group("name").count %>

Column chart

<%= column_chart Task.group_by_hour_of_day(:created_at).count %>

Multiple series (except pie chart)

<%= line_chart @goals.map{|goal|
    {:name => goal.name, :data => goal.feats.group_by_week(:created_at).count }
} %>

Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

<%= line_chart completed_tasks_charts_path %>

And in your controller, pass the data as JSON.

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

Note: This feature requires jQuery at the moment.

id and height

<%= line_chart User.group_by_day(:created_at).count, :id => "users-chart", :height => "500px" %>

min and max values (except pie chart)

<%= line_chart User.group_by_day(:created_at).count, :min => 1000, :max => 5000 %>

Pass data as a Hash or Array

<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
<%= pie_chart [["Football", 10], ["Basketball", 5]] %>

For multiple series, use the format

<%= line_chart [
  {:name => "Series A", :data => series_a},
  {:name => "Series B", :data => series_b}
] %>

Times can be a time, a timestamp, or a string (strings are parsed)

<%= line_chart({20.day.ago => 5, 1368174456 => 4, "2013-05-07 00:00:00 UTC" => 7}) %>

Add this line to your application's Gemfile:

gem "chartkick"

And add the javascript files to your views. chartkick.js runs as a Rails engine - no need to install it.

Note: These files must be included before the helper methods.

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" %>

Chartkick uses iso8601.js to parse dates and times.