مشاهدة ملف: dashboard.js

"use strict";
// Sales graph chart
var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
//$('#revenue-chart').get(0).getContext('2d');

var salesGraphChartData = {
    labels: weeklyData,
    datasets: [
        {
            label: 'Email',
            fill: false,
            borderWidth: 2,
            lineTension: 0,
            spanGaps: true,
            borderColor: '#efefef',
            pointRadius: 3,
            pointHoverRadius: 7,
            pointColor: '#efefef',
            pointBackgroundColor: '#efefef',
            data: chartInbox
        }
    ]
}

var salesGraphChartOptions = {
    maintainAspectRatio: false,
    responsive: true,
    legend: {
        display: false,
    },
    scales: {
        xAxes: [{
            ticks: {
                fontColor: '#efefef',
            },
            gridLines: {
                display: false,
                color: '#efefef',
                drawBorder: false,
            }
        }],
        yAxes: [{
            ticks: {
                stepSize: 5000,
                fontColor: '#efefef',
            },
            gridLines: {
                display: true,
                color: '#efefef',
                drawBorder: false,
            }
        }]
    }
}

// This will get the first returned node in the jQuery collection.
var salesGraphChart = new Chart(salesGraphChartCanvas, {
        type: 'line',
        data: salesGraphChartData,
        options: salesGraphChartOptions
    }
);

$(function () {
    var line_data1 = {
        data: clickReport,
        color: '#eb150b'
    }
    var line_data2 = {
        data: openReport,
        color: '#00c0ef'
    }
    $.plot('#line_chart', [line_data1, line_data2], {
        grid: {
            hoverable: true,
            borderColor: '#f3f3f3',
            borderWidth: 1,
            tickColor: '#f3f3f3'
        },
        series: {
            shadowSize: 0,
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        lines: {
            fill: false,
            color: ['#3c8dbc', '#f56954']
        },
        yaxis: {
            show: true
        },
        xaxis: {
            show: true
        }
    })
    //Initialize tooltip on hover
    $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
        position: 'absolute',
        display: 'none',
        opacity: 0.8
    }).appendTo('body')
    $('#line_chart').bind('plothover', function (event, pos, item) {

        if (item) {
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1]

            $('#line-chart-tooltip').html(y)
                .css({
                    top: item.pageY + 5,
                    left: item.pageX + 5
                })
                .fadeIn(200)
        } else {
            $('#line-chart-tooltip').hide()
        }

    })
});