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

    File Name: line-stacked-area.js

    Description: Chartjs line stacked area chart

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

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

    Author: PIXINVENT

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

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



// Line stacked area chart

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

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



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

    // var ctx = document.getElementById("line-stacked-area").getContext("2d");

    var ctx = $('#line-stacked-area');



    // 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],

            backgroundColor: "rgba(22,211,154,.5)",

            borderColor: "transparent",

            pointBorderColor: "#28D094",

            pointBackgroundColor: "#FFF",

            pointBorderWidth: 2,

            pointHoverBorderWidth: 2,

            pointRadius: 4,

        }, {

            label: "My Second dataset",

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

            backgroundColor: "rgba(81,117,224,.5)",

            borderColor: "transparent",

            pointBorderColor: "#5175E0",

            pointBackgroundColor: "#FFF",

            pointBorderWidth: 2,

            pointHoverBorderWidth: 2,

            pointRadius: 4,

        }, {

            label: "My Third dataset",

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

            backgroundColor: "rgba(249,142,118,.5)",

            borderColor: "transparent",

            pointBorderColor: "#F98E76",

            pointBackgroundColor: "#FFF",

            pointBorderWidth: 2,

            pointHoverBorderWidth: 2,

            pointRadius: 4,

        }]

    };



    var config = {

        type: 'line',



        // Chart Options

        options : chartOptions,



        // Chart Data

        data : chartData

    };



    // Create the chart

    var stackedAreaChart = new Chart(ctx, config);

});