Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chartkick y axis uncorrect labeling

I have chartkick 1.2.0 and groupdate 1.0.4 gem installed. When I try to do sth like:

  <%= area_chart Match.group_by_day_of_week(:created_at).count, :width=>"700px;", :height=>"150px;"  %>

I get this:

enter image description here

It always gives me the wrong y-axis. How should I format it so that it would display "Monday", "Tuesday" ...

My second example which I also can't get it right is grouping by hours in a day.

  <% abc=Matches.on_location(@location).group_by{|b| b.created_at.strftime("%H").to_i} %>
  <% abc.update(abc){|key, v| v.length} %>
  <%= abc=abc.sort_by{|k,v| k} %>
  <%= area_chart abc, :width=>"700px;", :height=>"150px;"  %>

What am I doing wrong, that it displays 1:00:00 AM etc? I would just like to have numbers ie.: 0, 1, 2, 3 .. 23?

I googled around, checked their docs top to bottom: http://ankane.github.io/chartkick/ for some hours now and I really don't know what have I missed. Any help would be greatly appreciated!

like image 427
necker Avatar asked Oct 25 '13 13:10

necker


2 Answers

This thread on Chartkick's Github indicates that the charting library (Highcharts, in your case?) makes assumptions about what kind of X-axis you want. At a guess, I would say that the issue here is that the library is making an incorrect assumption, so try naming your input's keys in a more obvious format.

In your first example, you could try using the "Monday", "Tuesday", etc as keys instead of 0, 1, etc:

results = Match.group_by_day_of_week(:created_at).count # hash with numeric keys
days = %w(Monday Tuesday Wednesday Thursday Friday Saturday Sunday)
results = results.inject({}){|a, (k,v)| a.update(days[k] => v); a } # change numeric keys to weekday name

For the second example, try formatting the date as %H:%M:%S so it's more obvious that you want a time axis:

abc=Matches.on_location(@location).group_by{|b| b.created_at.strftime("%H:%M:%S")}
like image 104
james246 Avatar answered Nov 02 '22 14:11

james246


Unfortunately, there's no way to do this right now. As an alternative, you could try a column chart.

like image 43
Andrew Kane Avatar answered Nov 02 '22 13:11

Andrew Kane