Charts and Graphs

#55 Charts and Graphs
11/21/2016

Summary

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.
19
rails javascript view 7:42 min

Summary

Gemfilegem 'chartkick'

Chart.js

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

Highcharts

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();
  setInterval(function(){
    var indexToUpdate = Math.round(Math.random() * 30);
    chart.data.datasets[0].data[indexToUpdate] = Math.random() * 100;
    chart.update();
  }, 1);
});

Chart Options

config/initializers/chartkick.rbChartkick.options = {
  colors: ['#41060f', "pink"]
}
8632141?v=3&s=64
RailsCod3rFuture said 16 days ago:

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

https://github.com/charlotte-ruby/impressionist

635114?v=3&s=64
kobaltz said 16 days ago:

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

current_user.impressions.group_by_day(:created_at).count

8632141?v=3&s=64
RailsCod3rFuture said 16 days ago:

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.

Thanks.


635114?v=3&s=64
kobaltz said 16 days ago:

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.

8632141?v=3&s=64
RailsCod3rFuture said 16 days ago:

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

Login to Comment