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

See it in action

Works with Rails, Sinatra and most browsers (including IE 6)

💕 A perfect companion to groupdate and active_median

💬 Get handcrafted updates for new features

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, format: "%l %P").count %>

Bar chart

<%= bar_chart Shirt.group(:size).sum(:price) %>

Area chart

<%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>

Geo chart

<%= geo_chart Medal.group(:country).count %>

Multiple series

<%= 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 or Zepto at the moment.

Id and height

<%= line_chart data, id: "users-chart", height: "500px" %>

Min and max values

<%= line_chart data, min: 1000, max: 5000 %>

min defaults to 0 for charts with non-negative values. Use nil to let the charting library decide.

Colors

<%= line_chart data, colors: ["pink", "#999"] %>

Stacked columns or bars

<%= column_chart data, stacked: true %>

Discrete axis

<%= line_chart data, discrete: true %>

You can pass options directly to the charting library with:

<%= line_chart data, library: {backgroundColor: "#eee"} %>

See the documentation for Google Charts and Highcharts for more info.

You can also pass a content_for option, which will put the javascript in a content block. This is great for including all of your javascript at the bottom of the page.

<%= line_chart data, content_for: :charts_js %>

Then, in your layout:

<%= yield :charts_js %> <%# Rails %>
<%= yield_content :charts_js %> <%# Padrino %>

To set options for all of your charts, create an initializer with:

Chartkick.options = {
  height: "400px",
  colors: ["pink", "#999"],
  content_for: :charts_js
}

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. These files must be included before the helper methods, unless using the :content_for option.

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.js runs as a Rails engine - no need to install it.

You must include chartkick.js manually. Download it here

For Rails 2.3, you must use a script tag for Google Charts due to this bug.

<script src="//www.google.com/jsapi"></script>

You must include chartkick.js manually. Download it here

<script src="//www.google.com/jsapi"></script>
<script src="chartkick.js"></script>

You must include chartkick.js manually. Download it here

In addition, you must specify http or https if you use Google Charts, since Padrino tries to append .js to protocol relative urls.

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

To specify a language for Google Charts, add:

<script>
  var Chartkick = {"language": "de"};
</script>

before the javascript files.

Check out chartkick.js

Chartkick uses iso8601.js to parse dates and times.

View the changelog

Chartkick follows Semantic Versioning

Everyone is encouraged to help improve this project. Here are a few ways you can help:

• Report bugs
• Fix bugs and submit pull requests
• Write, clarify, or fix documentation
• Suggest or add new features