/*=========================================================================================

    File Name: line.js

    Description: Chartjs simple line chart

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    Author: PIXINVENT

    Author URL: http://www.themeforest.net/user/pixinvent

==========================================================================================*/



// Line chart

// ------------------------------

$(window).on("load", function(){



    //Get the context of the Chart canvas element we want to select

    var ctx = $("#line-chart");



    // Chart Options

    var chartOptions = {

        responsive: true,

        maintainAspectRatio: false,

        legend: {

            position: 'bottom',

        },

        hover: {

            mode: 'label'

        },

        scales: {

            xAxes: [{

                display: true,

                gridLines: {

                    color: "#f3f3f3",

                    drawTicks: false,

                },

                scaleLabel: {

                    display: true,

                    labelString: 'Month'

                }

            }],

            yAxes: [{

                display: true,

                gridLines: {

                    color: "#f3f3f3",

                    drawTicks: false,

                },

                scaleLabel: {

                    display: true,

                    labelString: 'Value'

                }

            }]

        },

        title: {

            display: true,

            text: 'Chart.js Line Chart - Legend'

        }

    };



    // Chart Data

    var chartData = {

        labels: ["January", "February", "March", "April", "May", "June", "July"],

        datasets: [{

            label: "My First dataset",

            data: [65, 59, 80, 81, 56, 55, 40],

            fill: false,

            borderDash: [5, 5],

            borderColor: "#9C27B0",

            pointBorderColor: "#9C27B0",

            pointBackgroundColor: "#FFF",

            pointBorderWidth: 2,

            pointHoverBorderWidth: 2,

            pointRadius: 4,

        }, {

            label: "My Second dataset",

            data: [28, 48, 40, 19, 86, 27, 90],

            fill: false,

            borderDash: [5, 5],

            borderColor: "#00A5A8",

            pointBorderColor: "#00A5A8",

            pointBackgroundColor: "#FFF",

            pointBorderWidth: 2,

            pointHoverBorderWidth: 2,

            pointRadius: 4,

        }, {

            label: "My Third dataset - No bezier",

            data: [45, 25, 16, 36, 67, 18, 76],

            lineTension: 0,

            fill: false,

            borderColor: "#FF7D4D",

            pointBorderColor: "#FF7D4D",

            pointBackgroundColor: "#FFF",

            pointBorderWidth: 2,

            pointHoverBorderWidth: 2,

            pointRadius: 4,

        }]

    };



    var config = {

        type: 'line',



        // Chart Options

        options : chartOptions,



        data : chartData

    };



    // Create the chart

    var lineChart = new Chart(ctx, config);

});