Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries!
๐ฅ For admin charts and dashboards, check out Blazer
๐ A perfect companion to Groupdate, Hightop, and ActiveMedian
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
<%= 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 %>
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
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.
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.
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"
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.
In application.js
, add:
//= require Chart.bundle
//= require chartkick
In application.js
, add:
//= require chartkick
In your views, before application.js
, add:
<%= javascript_include_tag "https://www.google.com/jsapi" %>
Download highcharts.js into vendor/assets/javascripts
.
In application.js
, add:
//= require highcharts
//= require chartkick
Works with Highcharts 2.1+
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>
You must include chartkick.js
manually. Download it here
<script src="https://www.google.com/jsapi"></script>
<script src="chartkick.js"></script>
You must include chartkick.js
manually. Download it here
<%= 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.
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();
Check out chartkick.js
- Make Easy Graphs and Charts on Rails with Chartkick
- Practical Graphs on Rails: Chartkick in Practice
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
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