Vẽ biểu đồ bằng thư viện Chart.js

Cài đặt Chart.JS

<script src="${contextURL}resources/js/plugin/chartjs/chart.min.js"></script>
You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN. Detailed installation instructions can be found on the installation page.

Tạo 1 Chart

It's easy to get started with Chart.js. All that's required is the script included in your page along with a single <canvas> node to render the chart.
In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the usage documentation

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Áp dụng: 

var dataArray = new Array();
var dateArray = new Array();
var label = getLabelChart(propName.toLowerCase());
drawChart(idChart, dataArray, dateArray, label);     
               
function drawChart(id, dataArray, dateArray, label) {   
    var LineConfig = {
        type: 'line',              
        data: {
            labels: dateArray,
            datasets: [{
                label: label,
                data: dataArray
            }]
        },
        options: {
            responsive: true,
            legend: { display: true },
            /* title: {
              display: true,
              text: 'Predicted world population (millions) in 2050'
            }, */
            tooltips: {enabled: true,mode: 'label'},
            hover: {mode: 'label'},
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Thời gian',
                        fontColor: "red",
                    },
                    ticks: {
                       /*  // Include a dollar sign in the ticks
                        callback: function(value, index, values) {
                           
                            var timeFormatedArr = value.split(" ");
                            var datePartsDDMMYYYY = timeFormatedArr[1].split("/");
                            return "$" + timeFormatedArr[0] + ' ' + datePartsDDMMYYYY[0] + '/' + datePartsDDMMYYYY[1];
                        } */
                    },
                   
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Giá trị',
                        fontColor: "green"
                    },
                    ticks: {
                        beginAtZero:true
                    }                   
                }]
            }
        }
    };
    $.each(LineConfig.data.datasets, function (i, dataset) {
        dataset.borderColor = 'rgba(0,0,0,0.15)';
        dataset.backgroundColor = 'rgba(0,0,0,0.15)';
        dataset.pointBorderColor = 'rgba(0,0,0,0.15)';
        dataset.pointBackgroundColor = 'rgba(0,0,0,0.15)';
        dataset.pointBorderWidth = 1;
    });

    var ctx = document.getElementById(id).getContext('2d');
    window.myLine = new Chart(ctx, LineConfig);
    window.myLine.update();
 }

Site tham khảo:

https://blazingspider.com/wp-demo/187/chart-js-time-scale-sample/
http://www.chartjs.org/
https://www.highcharts.com