Chia sẻ về sử dụng thư viện highcharts

Xin chào mọi người, trước khi bắt đầu bài viết thì mình sẽ giới thiệu qua về bản thân cũng như nội dung chính sẽ đề cập ở dưới. Mình hiện đang là practice ở mảng ROR được 2 tháng. Vì thời gian tiếp cận với ROR cũng chưa lâu nên nội dung bài viết của mình sẽ không phải là hướng dẫn hoặc là giới thiệu một kĩ thuật, phương pháp hoặc là một cách dùng gem. Mà mình sẽ chia sẻ lại về một trong các lần được nhận các vấn đề mới(đối với mình là mới), cách mà một thực tập sinh tiếp cận vấn đề, các lỗi gặp phải cũng như là cách mình đã khắc phục.

OK, đi vào thẳng vấn đề của bài hôm nay.

Vấn đề chính

Sử dụng thư viện highcharts để vẽ biểu đồ

Giới thiệu nhanh

Highcharts là gì?

Highcharts là thư viện biểu đồ bằng Javascript giúp bạn dễ dàng tạo các loại biểu đồ khác nhau (line, spline, area, areaspline, column, bar, pie & scatter).

Nội dung biểu đồ sẽ vẽ.

Mình đang xây dựng một ứng dụng gửi report hàng ngày (Daily report system). Hàng ngày mỗi user sẽ gửi report về cho hệ thống , report phân loại theo Progess(Tutorials, Project 1, Project2, ...)

Và biểu đồ mình cần vẽ ra sẽ là biểu đồ thống kê lại số lượng report của từng progess theo ngày.

Bắt tay vào làm

Đầu tiên mình import thư viện highcharts

Vào trang này coppy toàn bộ code cho vào một file highcharts.js sau đó link tới file js đó bằng cách thêm //= require highcharts vào application.js

Tiếp theo, chọn loại biểu đồ muốn vẽ

Bằng cách là vào trang này, lựa chọn loại biểu đồ. Ở đây, mình chọn biểu đồ cột để hiện thị số lượng report của từng progess theo ngày.

Sau khi chọn xong,

Ở trang index của dashboard của admin (trang mình sẽ vẽ biểu đồ), tạo một thẻ div

<div id="dn-chart-report"></div>

Tạo 1 file assets/javascripts/admin/dashboard.js

$(function () {
    $('#dn-chart-report').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'World's largest cities per 2014'
        },
        subtitle: {
            text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
        },
        series: [{
            name: 'Population',
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1],
                ['Istanbul', 14.2],
                ['Karachi', 14.0],
                ['Mumbai', 12.5],
                ['Moscow', 12.1],
                ['São Paulo', 11.8],
                ['Beijing', 11.7],
                ['Guangzhou', 11.1],
                ['Delhi', 11.1],
                ['Shenzhen', 10.5],
                ['Seoul', 10.4],
                ['Jakarta', 10.0],
                ['Kinshasa', 9.3],
                ['Tianjin', 9.3],
                ['Tokyo', 9.0],
                ['Cairo', 8.9],
                ['Dhaka', 8.9],
                ['Mexico City', 8.9],
                ['Lima', 8.9]
            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});

Màn hình thu được sẽ là biểu đồ với các thông số fix cứng giống hệt như demo của trang demo bên trên. Với cá nhân thì đến đây mình suy nghĩ là đã hiển thị được biểu đồ ra rồi, rất là mừng