chartkick

by ankane

ankane / chartkick

Create beautiful JavaScript charts with one line of Ruby

5.7K Stars 523 Forks Last release: Not found MIT License 412 Commits 58 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Chartkick

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

See it in action

:fire: For admin charts and dashboards, check out Blazer, and for advanced visualizations, check out Vega

:two_hearts: A perfect companion to Groupdate, Hightop, and ActiveMedian

Build Status

Quick Start

Add this line to your application's Gemfile:

gem "chartkick"

For Rails 6 / Webpacker, run:

yarn add chartkick chart.js

And in

app/javascript/packs/application.js
, add:
require("chartkick")
require("chart.js")

For Rails 5 / Sprockets, in

app/assets/javascripts/application.js
, add:
//= require chartkick
//= require Chart.bundle

This sets up Chartkick with Chart.js. For other charting libraries, see detailed instructions.

Charts

Line chart


Pie chart


Column chart


Bar chart


Area chart


Scatter chart


Geo chart - Google Charts


Timeline - Google Charts


Multiple series


or


Say Goodbye To Timeouts

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


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

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


Min and max values


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

Min and max for x-axis - Chart.js


Colors


Stacked columns or bars


Discrete axis


Label (for single series)


Axis titles


Straight lines between points instead of a curve


Hide points


Show or hide legend


Specify legend position


Defer chart creation until after the page loads


Donut chart


Prefix, useful for currency - Chart.js, Highcharts


Suffix, useful for percentages - Chart.js, Highcharts


Set a thousands separator - Chart.js, Highcharts


Set a decimal separator - Chart.js, Highcharts


Set significant digits - Chart.js, Highcharts


Set rounding - Chart.js, Highcharts


Show insignificant zeros, useful for currency - Chart.js, Highcharts


Friendly byte sizes - Chart.js 2.8+


Show a message when data is empty


Refresh data from a remote source every

n
seconds

You can pass options directly to the charting library with:


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

To customize datasets in Chart.js, use:


You can pass this option to individual series as well.

Global Options

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

config/initializers/chartkick.rb
with:
Chartkick.options = {
  height: "400px",
  colors: ["#b00", "#666"]
}

Customize the html

Chartkick.options[:html] = '
Loading...
'

You capture the JavaScript in a content block with:

Chartkick.options[:content_for] = :charts_js

Then, in your layout, use:


For Padrino, use

yield_content
instead of
yield
.

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

Data

Pass data as a hash or array

 10, "Basketball" => 5}) %>

For multiple series, use the format


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

 5, "2013-05-07 00:00:00 UTC" => 7}) %>

Multiple Series

You can pass a few options with a series:

  • name
  • data
  • color
  • dataset
    - Chart.js only
  • points
    - Chart.js only
  • curve
    - Chart.js only

Code

If you want to use the charting library directly, get the code with:


The code will be logged to the JavaScript console. JavaScript functions cannot be logged, so it may not be identical.

Download Charts

Chart.js only

Give users the ability to download charts. It all happens in the browser - no server-side code needed.


Safari will open the image in a new window instead of downloading.

Set the filename


Set the background color


Set title


Installation

Add this line to your application's Gemfile:

gem "chartkick"

Next, choose your charting library.

In the instructions below,

application.js
must be included before the charts in your views, unless using the
:content_for
option.

Chart.js

For Rails 6 / Webpacker, run:

yarn add chartkick chart.js

And in

app/javascript/packs/application.js
, add:
require("chartkick")
require("chart.js")

For Rails 5 / Sprockets, in

app/assets/javascripts/application.js
, add:
//= require chartkick
//= require Chart.bundle

Google Charts

In your layout or views, add:


For Rails 6 / Webpacker, run:

yarn add chartkick

And in

app/javascript/packs/application.js
, add:
require("chartkick")

For Rails 5 / Sprockets, in

app/assets/javascripts/application.js
, add:
//= require chartkick

To specify a language or Google Maps API key, use:

Chartkick.configure({language: "de", mapsApiKey: "..."})

before your charts.

Highcharts

For Rails 6 / Webpacker, run:

yarn add chartkick highcharts

And in

app/javascript/packs/application.js
, add:
require("chartkick").use(require("highcharts"))

For Rails 5 / Sprockets, download highcharts.js into

vendor/assets/javascripts
(or use
yarn add highcharts
in Rails 5.1+), and in
app/assets/javascripts/application.js
, add:
//= require chartkick
//= require highcharts

Sinatra and Padrino

Download chartkick.js and include it manually.


Then include the charting library.

Chart.js - download Chart.bundle.js


Google Charts


Highcharts - download highcharts.js


Multiple Libraries

If more than one charting library is loaded, choose between them with:

 

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()
chart.getAdapter()

Update the data with:

chart.updateData(newData)

You can also specify new options:

chart.setOptions(newOptions)
// or
chart.updateData(newData, newOptions)

Refresh the data from a remote source:

chart.refreshData()

Redraw the chart with:

chart.redraw()

Destroy the chart with:

chart.destroy()

Loop over charts with:

Chartkick.eachChart( function(chart) {
  // do something
})

Content Security Policy (CSP)

Check out how to configure CSP

No Ruby? No Problem

Check out chartkick.js

Tutorials

Upgrading

3.0

Breaking changes

  • Removed support for Rails < 4.2
  • Removed chartkick.js from asset precompile (no longer needed)
  • Removed
    xtype
    option - numeric axes are automatically detected
  • Removed
    window.Chartkick = {...}
    way to set config - use
    Chartkick.configure
    instead
  • Removed support for the Google Charts jsapi loader - use loader.js instead

Credits

Chartkick uses iso8601.js to parse dates and times.

History

View the changelog

Contributing

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

To get started with development:

git clone https://github.com/ankane/chartkick.git
cd chartkick
bundle install
bundle exec rake test

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.