• Stars
    star
    6,157
  • Rank 6,520 (Top 0.2 %)
  • Language
    Ruby
  • License
    MIT License
  • Created over 11 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create beautiful JavaScript charts with one line of Ruby

Chartkick

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

See it in action

๐Ÿ”ฅ For admin charts and dashboards, check out Blazer, and for advanced visualizations, check out Vega

๐Ÿ’• A perfect companion to Groupdate, Hightop, and ActiveMedian

Build Status

Quick Start

Add this line to your applicationโ€™s Gemfile:

gem "chartkick"

Then follow the instructions for your JavaScript setup:

This sets up Chartkick with Chart.js. For other charting libraries and frameworks, see these instructions.

Importmap

In config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

And in app/javascript/application.js, add:

import "chartkick"
import "Chart.bundle"

esbuild, rollup.js, or Webpack

Run:

yarn add chartkick chart.js

And in app/javascript/application.js, add:

import "chartkick/chart.js"

Note: For rollup.js, this requires format: "iife" in rollup.config.js.

Webpacker

Run:

yarn add chartkick chart.js

And in app/javascript/packs/application.js, add:

import "chartkick/chart.js"

Sprockets

In app/assets/javascripts/application.js, add:

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

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

<%= 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 [
  {name: "Workout", data: {"2021-01-01" => 3, "2021-01-02" => 4}},
  {name: "Call parents", data: {"2021-01-01" => 5, "2021-01-02" => 3}}
] %>

or

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

Data

Data can be a hash, array, or URL.

Hash

<%= line_chart({"2021-01-01" => 2, "2021-01-02" => 3}) %>

Array

<%= line_chart [["2021-01-01", 2], ["2021-01-02", 3]] %>

URL

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

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.

Min and max for x-axis - Chart.js

<%= line_chart data, xmin: "2021-01-01", xmax: "2022-01-01" %>

Colors

<%= line_chart data, colors: ["#b00", "#666"] %>

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

Straight lines between points instead of a curve

<%= line_chart data, curve: false %>

Hide points

<%= line_chart data, points: false %>

Show or hide legend

<%= line_chart data, legend: false %>

Specify legend position

<%= line_chart data, legend: "bottom" %>

Donut chart

<%= pie_chart data, donut: true %>

Prefix, useful for currency - Chart.js, Highcharts

<%= line_chart data, prefix: "$" %>

Suffix, useful for percentages - Chart.js, Highcharts

<%= line_chart data, suffix: "%" %>

Set a thousands separator - Chart.js, Highcharts

<%= line_chart data, thousands: "," %>

Set a decimal separator - Chart.js, Highcharts

<%= line_chart data, decimal: "," %>

Set significant digits - Chart.js, Highcharts

<%= line_chart data, precision: 3 %>

Set rounding - Chart.js, Highcharts

<%= line_chart data, round: 2 %>

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

<%= line_chart data, round: 2, zeros: true %>

Friendly byte sizes - Chart.js

<%= line_chart data, bytes: true %>

Specify the message when data is loading

<%= line_chart data, loading: "Loading..." %>

Specify the message when data is empty

<%= line_chart data, empty: "No data" %>

Refresh data from a remote source every n seconds

<%= line_chart url, refresh: 60 %>

You can pass options directly to the charting library with:

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

See the documentation for Chart.js, Google Charts, and Highcharts for more info. For Chart.js plugins, check out this guide.

To customize datasets in Chart.js, use:

<%= line_chart data, dataset: {borderWidth: 10} %>

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] = '<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, use:

<%= yield :charts_js %>

For Padrino, use yield_content instead of yield.

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

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:

<%= line_chart data, code: true %>

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.

<%= line_chart data, download: true %>

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

Set the filename

<%= line_chart data, download: {filename: "boom"} %>

Set the background color

<%= line_chart data, download: {background: "#ffffff"} %>

Set title

<%= line_chart data, title: "Awesome chart" %>

Additional Charting Libraries

Google Charts

In your layout or views, add:

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>

For Importmap (Rails 7 default), in config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"

And in app/javascript/application.js, add:

import "chartkick"

For Webpacker (Rails 6 default), run:

yarn add chartkick

And in app/javascript/packs/application.js, add:

import "chartkick"

For 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 Importmap (Rails 7 default), run:

bin/importmap pin highcharts --download

And in config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"

And in app/javascript/application.js, add:

import "chartkick"
import Highcharts from "highcharts"

window.Highcharts = Highcharts

For Webpacker (Rails 6 default), run:

yarn add chartkick highcharts

And in app/javascript/packs/application.js, add:

import "chartkick/highcharts"

For 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

Multiple Libraries

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

<%= line_chart data, adapter: "google" %> <!-- or highcharts or chartjs -->

Sinatra and Padrino

Download chartkick.js and include it manually.

<script src="chartkick.js"></script>

Then include the charting library.

Chart.js - download Chart.js and the date-fns adapter bundle

<script src="chart.js"></script>
<script src="chartjs-adapter-date-fns.bundle.js"></script>

Google Charts

<script src="https://www.gstatic.com/charts/loader.js"></script>

Highcharts - download highcharts.js

<script src="highcharts.js"></script>

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

Tutorials

Upgrading

5.0

If you use Importmap or Sprockets, update the gem and youโ€™re good to go!

If you use esbuild, Webpack, or Webpacker, run:

yarn upgrade chartkick --latest

If you use Chart.js with esbuild, Webpack, or Webpacker, also run:

yarn upgrade chart.js --latest

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

More Repositories

1

pghero

A performance dashboard for Postgres
Ruby
7,123
star
2

searchkick

Intelligent search made easy
Ruby
6,257
star
3

blazer

Business intelligence made simple
Ruby
4,511
star
4

ahoy

Simple, powerful, first-party analytics for Rails
Ruby
3,872
star
5

strong_migrations

Catch unsafe migrations in development
Ruby
3,662
star
6

groupdate

The simplest way to group temporal data
Ruby
3,617
star
7

pgsync

Sync data from one Postgres database to another
Ruby
2,787
star
8

the-ultimate-guide-to-ruby-timeouts

Timeouts for popular Ruby gems
Ruby
2,212
star
9

production_rails

Best practices for running Rails in production
1,975
star
10

dexter

The automatic indexer for Postgres
Ruby
1,491
star
11

lockbox

Modern encryption for Ruby and Rails
Ruby
1,290
star
12

chartkick.js

Create beautiful charts with one line of JavaScript
JavaScript
1,211
star
13

react-chartkick

Create beautiful JavaScript charts with one line of React
JavaScript
1,183
star
14

pretender

Log in as another user in Rails
Ruby
1,124
star
15

ahoy_email

First-party email analytics for Rails
Ruby
1,051
star
16

secure_rails

Rails security best practices
954
star
17

pgslice

Postgres partitioning as easy as pie
Ruby
953
star
18

mailkick

Email subscriptions for Rails
Ruby
847
star
19

vue-chartkick

Create beautiful JavaScript charts with one line of Vue
JavaScript
747
star
20

eps

Machine learning for Ruby
Ruby
609
star
21

awesome-legal

Awesome free legal documents for companies
589
star
22

searchjoy

Search analytics made easy
Ruby
579
star
23

polars-ruby

Blazingly fast DataFrames for Ruby
Ruby
563
star
24

torch.rb

Deep learning for Ruby, powered by LibTorch
Ruby
552
star
25

blind_index

Securely search encrypted database fields
Ruby
470
star
26

safely

Rescue and report exceptions in non-critical code
Ruby
470
star
27

authtrail

Track Devise login activity
Ruby
466
star
28

multiverse

Multiple databases for Rails ๐ŸŽ‰
Ruby
463
star
29

ahoy.js

Simple, powerful JavaScript analytics
JavaScript
463
star
30

hightop

A nice shortcut for group count queries
Ruby
462
star
31

field_test

A/B testing for Rails
Ruby
460
star
32

s3tk

A security toolkit for Amazon S3
Python
439
star
33

disco

Recommendations for Ruby and Rails using collaborative filtering
Ruby
431
star
34

active_median

Median and percentile for Active Record, Mongoid, arrays, and hashes
Ruby
427
star
35

informers

State-of-the-art natural language processing for Ruby
Ruby
417
star
36

notable

Track notable requests and background jobs
Ruby
402
star
37

shorts

Short, random tutorials and posts
379
star
38

tensorflow-ruby

Deep learning for Ruby
Ruby
350
star
39

distribute_reads

Scale database reads to replicas in Rails
Ruby
328
star
40

slowpoke

Rack::Timeout enhancements for Rails
Ruby
327
star
41

prophet-ruby

Time series forecasting for Ruby
Ruby
321
star
42

rover

Simple, powerful data frames for Ruby
Ruby
311
star
43

groupdate.sql

The simplest way to group temporal data
PLpgSQL
280
star
44

kms_encrypted

Simple, secure key management for Lockbox and attr_encrypted
Ruby
235
star
45

jetpack

A friendly package manager for R
R
234
star
46

neighbor

Nearest neighbor search for Rails and Postgres
Ruby
230
star
47

rollup

Rollup time-series data in Rails
Ruby
230
star
48

hypershield

Shield sensitive data in Postgres and MySQL
Ruby
227
star
49

logstop

Keep personal data out of your logs
Ruby
218
star
50

pdscan

Scan your data stores for unencrypted personal data (PII)
Go
213
star
51

delete_in_batches

Fast batch deletes for Active Record and Postgres
Ruby
202
star
52

vega-ruby

Interactive charts for Ruby, powered by Vega and Vega-Lite
Ruby
192
star
53

mapkick

Create beautiful JavaScript maps with one line of Ruby
Ruby
173
star
54

dbx

A fast, easy-to-use database library for R
R
171
star
55

fastText-ruby

Efficient text classification and representation learning for Ruby
Ruby
162
star
56

autosuggest

Autocomplete suggestions based on what your users search
Ruby
162
star
57

swipeout

Swipe-to-delete goodness for the mobile web
JavaScript
159
star
58

pghero.sql

Postgres insights made easy
PLpgSQL
154
star
59

mainstreet

Address verification for Ruby and Rails
Ruby
149
star
60

or-tools-ruby

Operations research tools for Ruby
Ruby
139
star
61

mapkick.js

Create beautiful, interactive maps with one line of JavaScript
JavaScript
138
star
62

trend-ruby

Anomaly detection and forecasting for Ruby
Ruby
128
star
63

mitie-ruby

Named-entity recognition for Ruby
Ruby
122
star
64

barkick

Barcodes made easy
Ruby
120
star
65

ownership

Code ownership for Rails
Ruby
111
star
66

anomaly

Easy-to-use anomaly detection for Ruby
Ruby
98
star
67

errbase

Common exception reporting for a variety of services
Ruby
87
star
68

tokenizers-ruby

Fast state-of-the-art tokenizers for Ruby
Rust
81
star
69

ip_anonymizer

IP address anonymizer for Ruby and Rails
Ruby
79
star
70

str_enum

String enums for Rails
Ruby
75
star
71

faiss-ruby

Efficient similarity search and clustering for Ruby
C++
73
star
72

trend-api

Anomaly detection and forecasting API
R
71
star
73

archer

Rails console history for Heroku, Docker, and more
Ruby
70
star
74

onnxruntime-ruby

Run ONNX models in Ruby
Ruby
70
star
75

xgboost-ruby

High performance gradient boosting for Ruby
Ruby
69
star
76

secure-spreadsheet

Encrypt and password protect sensitive CSV and XLSX files
JavaScript
66
star
77

active_hll

HyperLogLog for Rails and Postgres
Ruby
66
star
78

guess

Statistical gender detection for Ruby
Ruby
60
star
79

morph

An encrypted, in-memory, key-value store
C++
59
star
80

lightgbm-ruby

High performance gradient boosting for Ruby
Ruby
56
star
81

midas-ruby

Edge stream anomaly detection for Ruby
Ruby
54
star
82

moves

Ruby client for Moves
Ruby
54
star
83

blingfire-ruby

High speed text tokenization for Ruby
Ruby
54
star
84

vowpalwabbit-ruby

Fast online machine learning for Ruby
Ruby
52
star
85

xlearn-ruby

High performance factorization machines for Ruby
Ruby
51
star
86

tomoto-ruby

High performance topic modeling for Ruby
C++
51
star
87

trove

Deploy machine learning models in Ruby (and Rails)
Ruby
50
star
88

mapkick-static

Create beautiful static maps with one line of Ruby
Ruby
42
star
89

ahoy_events

Simple, powerful event tracking for Rails
Ruby
42
star
90

practical-search

Letโ€™s make search a better experience for our users
40
star
91

breakout-ruby

Breakout detection for Ruby
Ruby
40
star
92

plu

Price look-up codes made easy
Ruby
40
star
93

ngt-ruby

High-speed approximate nearest neighbors for Ruby
Ruby
39
star
94

gindex

Concurrent index migrations for Rails
Ruby
39
star
95

clockwork_web

A web interface for Clockwork
Ruby
38
star
96

ahoy_guide

A foundation of knowledge and libraries for solid analytics
38
star
97

notable_web

A web interface for Notable
HTML
36
star
98

AnomalyDetection.rb

Time series anomaly detection for Ruby
Ruby
34
star
99

khiva-ruby

High-performance time series algorithms for Ruby
Ruby
34
star
100

immudb-ruby

Ruby client for immudb, the immutable database
Ruby
34
star