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

    File Name: bar.js

    Description: Chartjs bar chart

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

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

    Author: PIXINVENT

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

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



// Bar chart

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

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



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

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



    // Chart Options

    var chartOptions = {

        // Elements options apply to all of the options unless overridden in a dataset

        // In this case, we are setting the border of each horizontal bar to be 2px wide and green

        elements: {

            rectangle: {

                borderWidth: 2,

                borderColor: 'rgb(0, 255, 0)',

                borderSkipped: 'left'

            }

        },

        responsive: true,

        maintainAspectRatio: false,

        responsiveAnimationDuration:500,

        legend: {

            position: 'top',

        },

        scales: {

            xAxes: [{

                display: true,

                gridLines: {

                    color: "#f3f3f3",

                    drawTicks: false,

                },

                scaleLabel: {

                    display: true,

                }

            }],

            yAxes: [{

                display: true,

                gridLines: {

                    color: "#f3f3f3",

                    drawTicks: false,

                },

                scaleLabel: {

                    display: true,

                }

            }]

        },

        title: {

            display: false,

            text: 'Chart.js Horizontal Bar Chart'

        }

    };



    // Chart Data

    var chartData = {

        labels: ["January", "February", "March", "April"],

        datasets: [{

            label: "My First dataset",

            data: [65, 59, 80, 81],

            backgroundColor: "#28D094",

            hoverBackgroundColor: "rgba(22,211,154,.9)",

            borderColor: "transparent"

        }, {

            label: "My Second dataset",

            data: [28, 48, 40, 19],

            backgroundColor: "#F98E76",

            hoverBackgroundColor: "rgba(249,142,118,.9)",

            borderColor: "transparent"

        }]

    };



    var config = {

        type: 'horizontalBar',



        // Chart Options

        options : chartOptions,



        data : chartData

    };



    // Create the chart

    var lineChart = new Chart(ctx, config);

});