Thư viện Highcharts và ứng dụng trong Rails

1. Highcharts là gì?

Highcharts là một thư viện biểu đồ viết bằng HTML5 và JavaScript cung cấp biểu đồ tương tác và trực quan để biểu diễn dữ liệu. Highcharts hỗ trợ hầu như tất cả các loại biểu đồ, có thể dùng cho nhiều mục đích khác nhau, khá đẹp và hỗ trợ các option config vô cùng đầy đủ Các bạn có thể dạo một vòng các demo để xem thử sự bá đạo của thư viện này: http://www.highcharts.com/demo/ Bài viết này mình sẽ giới thiệu cụ thể về bộ thư viện, các config cơ bản cũng như cách kết hợp highcharts với rails Để cho đơn giản mình sẽ chạy flow từ controller - view và cuối cùng mới đến việc config và sử dụng highchart. Như vậy việc hình dung luồng dữ liệu chạy cũng dễ dàng hơn

2. Cấu hình rails

Trong phạm vi bài viết, mình sẽ mặc định như chúng ta đều đã hiểu rõ về rails, và đang có 1 controller dùng cho việc xử lí và hiển thì biểu đồ

class SalesController < ApplicationController
  def load_graph
    respond_to do |format|
      format.html
      format.js{render json: load_data_graph}
    end
  end

  private
  def load_data_graph
  real_time_sales = Sale.on_this_month.pluck(:sale_day,  :total)
    {
      real_time_sales: real_time_sales
    }
  end
end

Và cấu hình routes

get "load_graph", to: "sales#load_graph"

3. Cần chuẩn bị để làm việc với highcharts?

Tại view các bạn tạo 1 thẻ div cho graph

<div id="graph-container"></div>

Sau đó thì import thư viện này vào dự án nào. Có rất nhiều cách, bạn có thể thêm đường dẫn thư viện vào trong thẻ head

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Hoặc vào trang https://code.highcharts.com/highcharts.js coppy toàn bộ code cho vào một file highchart_lib.js rồi cho vào dự án Thư viện này hỗ trợ 1 tỉ các config khác nhau, các bạn có thể tham khảo ở đây trước khi bắt tay vào code: https://api.highcharts.com/highcharts/

4. Vui đùa cùng highcharts

Các setting thì thật sự là quá nhiều(link API ở trên) nên mình sẽ không chỉ cụ thể ra, vì tin rằng chỉ ngay trên viblo này cũng đã có rất nhiều bạn giải thích từng setting rất cụ thể rồi. Việc chúng ta cần bây giờ chỉ là tập trung vào việc ứng dụng, mình sẽ cố giải thích cụ thể nhất có thể

Tạo 1 file assets/javascripts/highcharts.js(không phải file thư viện lúc nãy nha)

function initChart(dataRealSales, saleTarget) {
  Highcharts.setOptions({
    global: {
      timezone: "Europe/Oslo"
      // mình khá là chú ý chỗ này bởi trong lúc làm việc với thư viện mình đã mất khá nhiều thời gian cho việc xử lí đồng bộ dữ liêu date time từ rails sang đây. 
      //mặc định của Highcharts sẽ là giờ UTC, cần chú ý để tránh những conflict xảy ra nếu như biểu đồ của bạn có liên quan đến thời gian
    }
  });
// đưa biểu đồ vào div đã tạo lúc nãy 
  $('#graph-container').highcharts({
  // option đặt tên, mình chọn false vì simple man không cần tên tuổi =)). Nhưng nếu bạn cần thì có khá nhiều option như title, subtitle . . .
    title: false,
    credits: {
    // Không có cái này thì sẽ có dòng Highcharts.com nằm dưới biểu đồ của bạn
        enabled: false
    },
    //các option cho trục hoành 
    xAxis: {
      startOnTick: true,
      // ở đây mình tạo trục x dạng thời gian 
      type: 'datetime',
      dateTimeLabelFormats: {
        hour: "%I:%M%p"
      },
      opposite:'true',
      labels: {
        overflow: 'justify'
      }
    },
    legend: false,
    yAxis: {
      min:0,
      tickAmount: 0,
      title: false,
      height: '100%',
    },
    series: [{
        data: realTimeSales,
        name: 'Total'
    }]
  });
}
// lấy dữ liệu từ server gửi lên thôi mà
function getDataChartServer(){
  $.ajax({
    type: "GET",
    url: "/load_graph/",
    dataType: "json",
    success: function(data){
      realTimeSales = data.real_time_sales;
      initChart(realTimeSales,);
    }
  })
}

$(document).ready(function(){
  getDataChartServer();
});

Chúc các bạn làm việc hiệu quả cùng thư viện Highcharts trong Rails 5