Chartjs line chart sample

html.html

<canvas id="canvas" width="500" height="100"></canvas>

js.js

/**
 * chartView01
 */

fnObj.chartView01 = {
    initView: function () {
        this.config = {
            type: 'line',
            data: {
                labels: [],
                datasets: []
            },
            options: {
                responsive: true,
                title: {
                    display: false,
                    text: 'Chart.js Line Chart'
                },
                legend: {
                    display: true,
                    position: "bottom"
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: false,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };

        this.ctx = document.getElementById("canvas").getContext("2d");
        this.target = new Chart(this.ctx, this.config);

    },
    setData: function (_data) {

        var chartData = {
            labels: [],
            datasets: [
                {
                    label: "연도별등록자현황",
                    backgroundColor: "#ff0000",
                    borderColor: "#ff0000",
                    data: [],
                    fill: false
                },
                {
                    label: "연도별참석자현황",
                    fill: false,
                    backgroundColor: "#0000ff",
                    borderColor: "#0000ff",
                    data: []
                }
            ]
        };

        var _year;
        _data["연도별참석자현황"].forEach(function (n) {
            chartData.labels.push(_year = n.year.number());
        });

        if (chartData.labels.length < 10) {
            for (var i = chartData.labels.length - 1; i < 9; i++) {
                chartData.labels.push(_year + i);
            }
        }

        _data["연도별참석자현황"].forEach(function (n) {
            chartData.datasets[0].data.push(n.count);
        });
        if(chartData.datasets[0].data.length < 10){
            for (var i = chartData.datasets[0].data.length - 1; i < 9; i++) {
                chartData.datasets[0].data.push(0);
            }
        }

        _data["연도별등록자현황"].forEach(function (n) {
            chartData.datasets[1].data.push(n.count);
        });
        if(chartData.datasets[1].data.length < 10){
            for (var i = chartData.datasets[1].data.length - 1; i < 9; i++) {
                chartData.datasets[1].data.push(0);
            }
        }

        this.target.data.labels = chartData.labels;
        this.target.data.datasets = chartData.datasets;
        this.target.update();
    },
    update: function () {
        this.target.update();
    }
};