1. Chartkick là gì?
Chartkick là một bộ thư viện giúp chúng ta trực quan hóa các dữ liệu thống kê một cách dễ dàng. Nó có các framework hỗ trợ nhiều ngôn ngữ lập trình khác nhau như:
- Ruby on rails
- Python
- Javascript
- …
Đồng thời có thể sử dụng các thư viện adapter khác nhau như: Chart.js, highcharts hoặc googlechart.
2. Hướng dẫn cài đặt
2.1. Thêm gem "chartkick" vào Gemfile sau đó bundle
2.2. Cài đặt các thư viện JS cần thiết để vẽ biểu đồ
Cài đặt với ChartJS
- Với Rails 6/ Webpacker:
chạy lệnh sau để download các thư việc cần thiết về thư mục:
yarn add chartkick chart.js và trong file app/javascript/packs/application.js thêm vào các dòng sau:
1 2 3 | <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"chartkick"</span><span class="token punctuation">)</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"chart.js"</span><span class="token punctuation">)</span> |
- Với Rails 5:
Thêm các dòng sau vào app/assets/javascripts/application.js:
1 2 3 | <span class="token comment">//= require chartkick</span> <span class="token comment">//= require Chart.bundle</span> |
Cài đặt với GoogleChart
Thêm asset tag này vào trong layout:
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> javascript_include_tag <span class="token string">"https://www.gstatic.com/charts/loader.js"</span> <span class="token operator">%</span><span class="token operator">></span> |
- Với Rails 6/Webpacker, ta thêm:
Ta chạy yarn add chartkick để cài chartkick và trong file app/javascript/packs/application.js ta thêm:
1 2 | <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"chartkick"</span><span class="token punctuation">)</span> |
- Với Rails 5:
Bổ sung vào file app/assets/javascripts/application.js :
1 2 | <span class="token comment">//= require chartkick</span> |
Chú ý: Để config ngôn ngữ hay ggmap API cho googlechart thì chỉ cần thêm dòng này trước khi sử dụng chart:
1 2 | Chartkick<span class="token punctuation">.</span><span class="token function">configure</span><span class="token punctuation">(</span><span class="token punctuation">{</span>language<span class="token punctuation">:</span> <span class="token string">"de"</span><span class="token punctuation">,</span> mapsApiKey<span class="token punctuation">:</span> <span class="token string">"..."</span><span class="token punctuation">}</span><span class="token punctuation">)</span> |
Cài đặt với highcharts
- Với Rails 6/ Webpacker:
chạy lệnh sau để download các thư việc cần thiết về thư mục:
yarn add chartkick chart.js và trong file app/javascript/packs/application.js thêm vào các dòng sau:
1 2 | <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"chartkick"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"highcharts"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
- Với Rails 5 Ta cần phải download highcharts.js về trong thư mục
vendor/assets/javascripts. Nếu sử dụng Rails 5.1+ thì có thể sử dụng lệnh sau để cài đặtyarn add highcharts.
Thêm các dòng sau vàoapp/assets/javascripts/application.js:
1 2 3 | //= require chartkick //= require highcharts |
2.3. Cài đặt các tool cần thiết cho database phục vụ việc thống kê
Có một số thứ cần thiết cho việc thống kê của chúng ta ví dụ như: GroupDate, Hightop và ActiveMedian
Việc cài đặt các bạn hãy follow theo các link trên.
Sau khi đã hoàn tất các bước cơ bản các bạn có thể vẽ.
3. Vẽ các biểu đồ đặc trưng
Chú ý: Nếu sử dụng nhiều thư viện biểu đồ một lúc. Thì phải thêm tùy chọn sau(tùy chọn thự viện):
1 2 3 4 | <%= line_chart data, adapter: "google" %> <span class="token comment"><!-- or highcharts or chartjs --></span> |
Các loại biều đồ đơn (Chỉ có 1 loạiiểu đồ trong một biểu đồ)
Cú pháp chung:
1 2 | function_chart data<span class="token punctuation">,</span> options<span class="token operator">*</span> |
Data sẽ là một hash hoặc array:
1 2 3 | <span class="token operator"><</span><span class="token operator">%=</span> <span class="token function">pie_chart</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">"Football"</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">"Basketball"</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%=</span> pie_chart <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"Football"</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"Basketball"</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">%</span><span class="token operator">></span> |
Ví dụ:
Các loại biểu đồ:
Line chart
<%= line_chart User.group_by_day(:created_at).count %>
Pie chart
<%= pie_chart Goal.group(:name).count %>
Column chart
<%= column_chart Task.group_by_hour_of_day(:created_at, format: "%l %P").count %>
Bar chart
<%= bar_chart Shirt.group(:size).sum(:price) %>
Area chart
<%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>
Các tùy chọn:
Id, width, and height
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> line_chart data<span class="token punctuation">,</span> id<span class="token punctuation">:</span> <span class="token string">"users-chart"</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token string">"800px"</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token string">"500px"</span> <span class="token operator">%</span><span class="token operator">></span> |
Min and max values
1 2 | <%= line_chart data, min: 1000, max: 5000 %> |
min defaults to 0 for charts with non-negative values. Use nil to let the charting library decide.
Min and max for x-axis – Chart.js
1 2 | <span class="token operator"><</span><span class="token operator">%=</span> line_chart data<span class="token punctuation">,</span> xmin<span class="token operator">:</span> <span class="token string">"2018-01-01"</span><span class="token punctuation">,</span> xmax<span class="token operator">:</span> <span class="token string">"2019-01-01"</span> <span class="token operator">%</span><span class="token operator">></span> |
Colors
1 2 | <%= line_chart data, colors: ["#b00", "#666"] %> |
Stacked columns or bars
1 2 | <%= column_chart data, stacked: true %> |
Discrete axis
1 2 | <span class="token operator"><</span><span class="token comment">%= line_chart data, discrete: true %></span> |
Label (for single series)
1 2 | <%= line_chart data, label: "Value" %> |
Axis titles
1 2 | <span class="token operator"><</span><span class="token operator">%=</span> line_chart data<span class="token punctuation">,</span> xtitle<span class="token punctuation">:</span> <span class="token string">"Time"</span><span class="token punctuation">,</span> ytitle<span class="token punctuation">:</span> <span class="token string">"Population"</span> <span class="token operator">%</span><span class="token operator">></span> |
Straight lines between points instead of a curve
1 2 | <%= line_chart data, curve: false %> |
Hide points
1 2 | <%= line_chart data, points: false %> |
Show or hide legend
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> line_chart data<span class="token punctuation">,</span> legend<span class="token punctuation">:</span> <span class="token keyword">false</span> <span class="token operator">%</span><span class="token operator">></span> |
Specify legend position
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> line_chart data<span class="token punctuation">,</span> legend<span class="token punctuation">:</span> <span class="token string">"bottom"</span> <span class="token operator">%</span><span class="token operator">></span> |
Defer chart creation until after the page loads
1 2 | <%= line_chart data, defer: true %> |
Donut chart
1 2 | <span class="token operator"><</span><span class="token comment">%= pie_chart data, donut: true %></span> |
Prefix, useful for currency – Chart.js, Highcharts
1 2 | <%= line_chart data, prefix: "$" %> |
Suffix, useful for percentages – Chart.js, Highcharts
1 2 | <%= line_chart data, suffix: "%" %> |
Set a thousands separator – Chart.js, Highcharts
1 2 | <%= line_chart data, thousands: "," %> |
Set a decimal separator – Chart.js, Highcharts
1 2 | <%= line_chart data, decimal: "," %> |
Set significant digits – Chart.js, Highcharts
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> line_chart data<span class="token punctuation">,</span> precision<span class="token punctuation">:</span> <span class="token number">3</span> <span class="token operator">%</span><span class="token operator">></span> |
Set rounding – Chart.js, Highcharts
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> line_chart data<span class="token punctuation">,</span> round<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token operator">%</span><span class="token operator">></span> |
Show insignificant zeros, useful for currency – Chart.js, Highcharts
1 2 | <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">=</span> line_chart data<span class="token punctuation">,</span> round<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> zeros<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token operator">%</span><span class="token operator">></span> |
Friendly byte sizes – Chart.js 2.8+
1 2 | <%= line_chart data, bytes: true %> |
Show a message when data is empty
1 2 | <%= line_chart data, messages: {empty: "No data"} %> |
Refresh data from a remote source every n seconds
1 2 | <%= line_chart url, refresh: 60 %> |
You can pass options directly to the charting library with:
1 2 | <%= line_chart data, library: {backgroundColor: "#eee"} %> |
Tối ưu performance với biểu đồ đơn
Làm cho các trang của bạn tải siêu nhanh và không lo ngại về thời gian chờ. Ta sử dụng url cho riêng nó và load dữ liệu về.
Tạo controller
1 2 3 4 5 6 | <span class="token keyword">class</span> <span class="token class-name">ChartsController</span> <span class="token operator"><</span> <span class="token constant">ApplicationController</span> <span class="token keyword">def</span> completed_tasks render json<span class="token punctuation">:</span> <span class="token constant">Task</span><span class="token punctuation">.</span><span class="token function">group_by_day</span><span class="token punctuation">(</span><span class="token symbol">:completed_at</span><span class="token punctuation">)</span><span class="token punctuation">.</span>count <span class="token keyword">end</span> <span class="token keyword">end</span> |
**Nếu dùng để vẽ nhiều dạng cùng kiều thì như sau: **
1 2 | render json<span class="token punctuation">:</span> <span class="token constant">Task</span><span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token symbol">:goal_id</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">group_by_day</span><span class="token punctuation">(</span><span class="token symbol">:completed_at</span><span class="token punctuation">)</span><span class="token punctuation">.</span>count<span class="token punctuation">.</span>chart_json |
Vẽ biểu đồ
Ví dụ kiều biều đồ đường:
1 2 | <%= line_chart completed_tasks_charts_path %> |
4. Custom một số biểu đồ theo ý muốn
4.1. Vẽ biều đồ kết hợp dạng server side rendering
Chúng ta sẽ kết hợp nhiều loại biểu đồ trong 1 biểu đồ phía client.
- Ưu điểm:
- Triển khai nhanh
- Đơn giản
- Nhược điểm:
- Thời gian load trang chậm do phải tổng hợp dữ liệu
Ví dụ:
1 2 3 4 5 6 | <%= line_chart [ {name: "Data1", type: "line", data: data}, {name: "Data1", type: "column", data: data} ], prefix: "$", adapter: "highcharts", messages: {empty: I18n.t("chart.message.empty")} %> |
Lúc này biểu đồ, sẽ có 1 line và cột.
4.2. Vẽ biểu đồ kết hợp dạng client side rendering
Code demo
1 2 3 4 5 6 7 8 | var data = [ {name: "Apple", type: "line", data: {"Tuesday": 3, "Friday": 4}}, {name: "Pear", type: "line", data: {"Tuesday": 1, "Friday": 8}}, {name: "Carrot", type: "line", data: {"Tuesday": 3, "Friday": 4}}, {name: "Beet", type: "column", data: {"Tuesday": 1, "Friday": 8}} ]; new Chartkick.LineChart("chart-12345", data, {adapter:"highcharts"}); |