#55 Charts and Graphs


Learn how to use one of three charting libraries, Chart.js, Highcharts, or Google Charts, using the Chartkick gem to create simple and unobtrusive charts in your application.
rails javascript view 7:42


Gemfilegem 'chartkick'


application.js//= require Chart.bundle
//= require chartkick


You will need to download highcharts javascript file and place it within the vendor/assets/javascripts folder.

application.js//= require highcharts
//= require chartkick

Google Charts

application.js//= require chartkick
app/views/layouts/application.rb<%= javascript_include_tag "https://www.google.com/jsapi" %>

view<%= line_chart @product.purchases.group(:purchased_on).sum(:purchased_price),
               id: 'purchase',
               library: { animation: { easing: 'easeOutQuad' }} %>

<%# line_chart({ 20.day.ago => 5, 10.day.ago => 10, "2016-010-07 00:00:00 UTC" => 7 }) %>

<%# pie_chart [["Football", 10], ["Basketball", 5]] %>

Interacting with a chart:

application.js$(document).on('turbolinks:load', function(event) {
  var chart = Chartkick.charts['purchase'].getChartObject();
    var indexToUpdate = Math.round(Math.random() * 30);
    chart.data.datasets[0].data[indexToUpdate] = Math.random() * 100;
  }, 1);

Chart Options

config/initializers/chartkick.rbChartkick.options = {
  colors: ['#41060f', "pink"]
RailsCod3rFuture said over 2 years ago on Charts and Graphs :

Greetings, I enjoyed your video on Chartkick, it's very informative. What I would like your advice on, is how do I use Chartkick alongside the Impressionist gem. To be more clear. I would like to graph the impressions of different pages. Lets say for example, the user show page.  I would like to get the

<%= line_chart current_user.impressionist_count, refresh: 60, xtitle: 'Monthly Profile View Count', ytitle: 'Amount of Views' %>

This approach isn't working for me. I need to be able to get the impressions count with scopes for days, weeks and months and years. I'm currently using Postgres. I've been searching for an approach all day long, to no avail.  If I'm able to use the scopes across model types like Product show page, etc. That would be great. Thanks again!

Impressionist documentation


kobaltz PRO said over 2 years ago on Charts and Graphs :

You might be able to do something like this for a daily count


RailsCod3rFuture said over 2 years ago on Charts and Graphs :

The group_by_day & and group_by_month, methods are not being found for some reason. It throws an undefined method error for model, when I try to use the it in my view. I don't know if its an issue with the gem or Postgres compatibility.


kobaltz PRO said over 2 years ago on Charts and Graphs :

The methods are within the GroupDate gem https://github.com/ankane/groupdate

The gem's documentation does say that it is compatible with postgres, but I am not sure if there is any additional setup on postgres like there is with MySQL.

RailsCod3rFuture said over 2 years ago on Charts and Graphs :

Your method is working perfectly in the rails console. I will test in the view today. Thanks.

Login to Comment