Chartkick

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

See it in action

Chartkick 2.0 was just released! See instructions for upgrading

💕 A perfect companion to groupdate, hightop, and active_median

💬 Get handcrafted updates for new features

Charts

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

Scatter chart - Google Charts and Highcharts

<%= scatter_chart City.pluck(:size, :population) %>

Geo chart - Google Charts

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

Timeline - Google Charts

<%= timeline [
  ["Washington", "1789-04-29", "1797-03-03"],
  ["Adams", "1797-03-03", "1801-03-03"],
  ["Jefferson", "1801-03-03", "1809-03-03"]
] %>

Multiple series

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

or

<%= line_chart Feat.group(:goal_id).group_by_week(:created_at).count %>

Say Goodbye To Timeouts

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.

For multiple series, add chart_json at the end.

render json: Task.group(:goal_id).group_by_day(:completed_at).count.chart_json

Options

Id, width, and height

<%= line_chart data, id: "users-chart", width: "800px", 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 %>

Label (for single series)

<%= line_chart data, label: "Value" %>

Axis titles

<%= line_chart data, xtitle: "Time", ytitle: "Population" %>

You can pass options directly to the charting library with:

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

See the documentation for Google Charts, Highcharts, and Chart.js for more info.

Global Options

To set options for all of your charts, create an initializer config/initializers/chartkick.rb with:

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

Customize the html

Chartkick.options[:html] = '<div id="%{id}" style="height: %{height};">Loading...</div>'

You capture the JavaScript in a content block with:

Chartkick.options[:content_for] = :charts_js

Then, in your layout:

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

This is great for including all of your JavaScript at the bottom of the page.

Data

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}) %>

Installation

Add this line to your application's Gemfile:

gem "chartkick"

Next, choose your charting library.

Note: In the instructions below, application.js must be included before the helper methods in your views, unless using the :content_for option.

Chart.js

In application.js, add:

//= require Chart.bundle
//= require chartkick

Google Charts

In application.js, add:

//= require chartkick

In your views, before application.js, add:

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

Highcharts

Download highcharts.js into vendor/assets/javascripts.

In application.js, add:

//= require highcharts
//= require chartkick

Works with Highcharts 2.1+

For Rails 2.3 and 3.0

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="https://www.google.com/jsapi"></script>

For Sinatra

You must include chartkick.js manually. Download it here

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

For Padrino

You must include chartkick.js manually. Download it here

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

Localization

To specify a language for Google Charts, add:

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

before the JavaScript files.

JavaScript API

Access a chart with:

var chart = Chartkick.charts["chart-id"];

Get the underlying chart object with:

chart.getChartObject();

You can also use:

chart.getElement();
chart.getData();
chart.getOptions();

No Ruby? No Problem

Check out chartkick.js

Upgrading

2.0

Breaking changes

• Chart.js is now the default adapter if multiple are loaded - yay open source!
• Axis types are automatically detected - no need for discrete: true
• Better date support - dates are no longer treated as UTC

Credits

Chartkick uses iso8601.js to parse dates and times.

History

View the changelog

Chartkick follows Semantic Versioning

Contributing

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