Visualize statistical data in rails with the Chartkick gem and custom charts

1. What is Chartkick?

Chartkick is a library that helps us visualize statistics data easily. It has frameworks that support many different programming languages, such as:

• Ruby on rails
• Python
• Javascript
• …

It is also possible to use different adapter libraries such as Chart.js, highcharts or googlechart.

2. Installation instructions

2.1. Add the gem "chartkick" to Gemfile then bundle

2.2. Install the necessary JS libraries to draw the chart

Installed with ChartJS

• With Rails 6 / Webpacker:

Run the following command to download the necessary libraries to the directory:

yarn add chartkick chart.js and in the app / javascript / packs / application.js file add the following lines:

• With Rails 5:

Add the following lines to app/assets/javascripts/application.js :

Install with GoogleChart

Add this asset tag into the layout:

• With Rails 6 / Webpacker, we add:

We run yarn add chartkick to install chartkick and in app/javascript/packs/application.js we add:

• With Rails 5:

Add the file app/assets/javascripts/application.js :

Note: To configure a language or ggmap API for googlechart, just add this line before using the chart:

Install with highcharts

• With Rails 6 / Webpacker:

Run the following command to download the necessary libraries to the directory:

yarn add chartkick chart.js and in the app / javascript / packs / application.js file add the following lines:

• For Rails 5, we need to download highcharts.js in vendor/assets/javascripts . If you use Rails 5.1+ then you can use the following command to install yarn add highcharts . Add the following lines to app/assets/javascripts/application.js :

2.3. Install the necessary tools for the database to serve statistics

There are a few things that are essential to our statistics, such as GroupDate , Hightop and ActiveMedian.

The installation, please follow the links above.

After you have completed the basic steps you can draw.

3. Draw the characteristic chart

Note: If using multiple chart libraries at once. You have to add the following option (villa option):

Types of single charts (There is only 1 chart type in a chart)

General syntax:

Data will be a hash or array:

For example:

Types of charts:

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) %>

Options:

Id, width, and height

Min and max values

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

Colors

Stacked columns or bars

Discrete axis

Label (for single series)

Axis titles

Straight lines between points instead of a curve

Hide points

Show or hide legend

Specify legend position

Defer chart creation until after the page loads

Donut chart

Prefix, useful for currency – Chart.js, Highcharts

Suffix, useful for percentages – Chart.js, Highcharts

Set a thousands separator – Chart.js, Highcharts

Set a decimal separator – Chart.js, Highcharts

Set significant digits – Chart.js, Highcharts

Set rounding – Chart.js, Highcharts

Show insignificant zeros, useful for currency – Chart.js, Highcharts

Friendly byte sizes – Chart.js 2.8+

Show a message when data is empty

Refresh data from a remote source every n seconds

You can pass options directly to the charting library with:

Optimize performance with a single chart Make your pages load super fast and don’t worry about waiting time. We use it’s own url and load the data.

Create controller

** If used to draw a variety of styles with the same overseas life:

Draw a chart Example of a line chart:

4. Custom some charts as you like

4.1. Draw a server side rendering combination diagram

We will combine different types of charts in one client-side chart.

• Advantages:
  • Fast deployment
  • Simple
• Defect:
  • The page load time is slow due to data aggregation

For example:

At this point, the chart will have 1 line and a column.

4.2. Draw a client side rendering combination chart

Demo code

References

• https://github.com/ankane/chartkick
• https://chartkick.com/
• https://www.highcharts.com/demo