How to set category type with Highcharts and chartkick?

Question

Use Gem: https://github.com/ankane/chartkick created charts

the erb code:

<%= line_chart [
   {name: "线上消费会员", data: @product_users_days_line_chart},
   {name: "线下消费会员", data: @pay_users_days_line_chart},
   {name: "会员数", data: @users_days_line_chart}] %>

The generate javascript code:

new Chartkick.LineChart("chart-1", [{
 "name": "线上消费会员",
 "data": [
  ["10-21", 6],
  ["10-23", 1]
 ]
}, {
 "name": "线下消费会员",
 "data": [
  ["09-27", 419],
  ["09-28", 534],
  ["09-29", 562],
  ["09-30", 750],
  ["10-01", 770],
  ["10-02", 631],
  ["10-03", 625],
  ["10-04", 600],
  ["10-05", 665],
  ["10-06", 977],
  ["10-07", 923],
  ["10-08", 384],
  ["10-09", 495],
  ["10-10", 486],
  ["10-11", 465],
  ["10-12", 678],
  ["10-13", 1304],
  ["10-14", 1222],
  ["10-15", 387],
  ["10-16", 457],
  ["10-17", 504],
  ["10-18", 432],
  ["10-19", 657],
  ["10-20", 1215],
  ["10-21", 1260],
  ["10-22", 15],
  ["10-23", 2]
 ]
}, {
 "name": "会员数",
 "data": [
  ["09-27", 232],
  ["09-28", 454],
  ["09-29", 520],
  ["09-30", 679],
  ["10-01", 1097],
  ["10-02", 860],
  ["10-03", 886],
  ["10-04", 811],
  ["10-05", 903],
  ["10-06", 1307],
  ["10-07", 1053],
  ["10-08", 305],
  ["10-09", 358],
  ["10-10", 433],
  ["10-11", 361],
  ["10-12", 537],
  ["10-13", 1272],
  ["10-14", 1026],
  ["10-15", 310],
  ["10-16", 328],
  ["10-17", 412],
  ["10-18", 342],
  ["10-19", 500],
  ["10-20", 1191],
  ["10-21", 1031],
  ["10-22", 12]
 ]
}], {});

some error like this

but the chart xAxis not sort with datetime order

I think the default xAxis type is datetime, but I format with ruby code d.cal_at.strftime("%m-%d"), the type is string, so, i read Highcharts docs, need set Highcharts xAxis type to category

this 线上消费会员 line chart xAxis error, data example:

 {
     "name": "线上消费会员",
     "data": [
      ["10-21", 6],
      ["10-23", 1]
     ]
    }

lidashuang lidashuang · Accepted Answer · 2018-10-28T15:23:24

  def format_order_date(data)
    sql_data = data.map {|d| [d.cal_at.strftime("%m-%d"), d.count]}.to_h
    (1.month.ago.to_date..Date.today).map{ |date| date.strftime("%m-%d") }.map do |key|
      [key, sql_data[key] || 0]
    end
  end

I generate same x for every data set

How to set category type with Highcharts and chartkick?

1 Answers