codebase/js/pages/be_pages_ecom_dashboard.js

/*
 *  Document   : be_pages_ecom_dashboard.js
 *  Author     : pixelcave
 *  Description: Custom JS code used in e-Commerce Dashboard Page
 */

var BePagesEcomDashboard = function() {
    // Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
    var initEcomChartJS = function () {
        // Set Global Chart.js configuration
        Chart.defaults.global.defaultFontColor              = '#555555';
        Chart.defaults.scale.gridLines.color                = "transparent";
        Chart.defaults.scale.gridLines.zeroLineColor        = "transparent";
        Chart.defaults.scale.display                        = false;
        Chart.defaults.scale.ticks.beginAtZero              = true;
        Chart.defaults.scale.ticks.suggestedMax             = 4300;
        Chart.defaults.global.elements.line.borderWidth     = 2;
        Chart.defaults.global.elements.point.radius         = 5;
        Chart.defaults.global.elements.point.hoverRadius    = 7;
        Chart.defaults.global.tooltips.cornerRadius         = 3;
        Chart.defaults.global.legend.display                = false;

        // Chart Containers
        var chartEcomEarningsCon    = jQuery('.js-chartjs-ecom-dashboard-earnings');
        var chartEcomOrdersCon      = jQuery('.js-chartjs-ecom-dashboard-orders');

        // Charts Variables
        var chartEcomOrders, chartEcomEarnings;

        // Charts Data
        var chartEcomEarningsData = {
            labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
            datasets: [
                {
                    label: 'Earnings',
                    fill: true,
                    backgroundColor: 'rgba(188,38,211,.25)',
                    borderColor: 'rgba(188,38,211,1)',
                    pointBackgroundColor: 'rgba(188,38,211,1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(188,38,211,1)',
                    data: [1780, 2440, 3252, 2109, 1892, 3890, 1820]
                }
            ]
        };

        var chartEcomOrdersData = {
            labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
            datasets: [
                {
                    label: 'Orders',
                    fill: true,
                    backgroundColor: 'rgba(112,178,156,.25)',
                    borderColor: 'rgba(112,178,156,1)',
                    pointBackgroundColor: 'rgba(112,178,156,1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(112,178,156,1)',
                    data: [20, 27, 40, 19, 23, 38, 16]
                }
            ]
        };

        // Init Charts
        if (chartEcomEarningsCon.length ) {
            chartEcomEarnings = new Chart(chartEcomEarningsCon, { type: 'line', data: chartEcomEarningsData, options: {
                tooltips: {
                    callbacks: {
                        label: function(tooltipItems, data) {
                            return data.datasets[tooltipItems.datasetIndex].label +': $' + tooltipItems.yLabel;
                        }
                    }

                }
            }});
        }

        if (chartEcomOrdersCon.length ) {
            Chart.defaults.scale.ticks.suggestedMax = 60;

            chartEcomOrders  = new Chart(chartEcomOrdersCon, { type: 'line', data: chartEcomOrdersData});
        }
    };

    return {
        init: function () {
            // Init Chart.js Charts
            initEcomChartJS();
        }
    };
}();

// Initialize when page loads
jQuery(function(){ BePagesEcomDashboard.init(); });