IMMREX7

aku nok ndi : /home/spdtg/www/gomygps/public/dist/js/pages/charts/
File Up :
aku nok ndi : /home/spdtg/www/gomygps/public/dist/js/pages/charts/morris.js

$(function() {
    "use strict";
    MorrisArea();
    MorrisLineChart();
    MorrisDonutChart();
    MorrisBarChart();
});

// Morris-chart
function MorrisArea() {
    Morris.Area({
        element: 'm_area_chart',
        data: [{
                period: '2011',
                iphone: 45,
                ipad: 75,
                itouch: 18
            }, {
                period: '2012',
                iphone: 130,
                ipad: 110,
                itouch: 82
            }, {
                period: '2013',
                iphone: 80,
                ipad: 60,
                itouch: 85
            }, {
                period: '2014',
                iphone: 78,
                ipad: 205,
                itouch: 135
            }, {
                period: '2015',
                iphone: 180,
                ipad: 124,
                itouch: 140
            }, {
                period: '2016',
                iphone: 105,
                ipad: 100,
                itouch: 85
            },
            {
                period: '2017',
                iphone: 210,
                ipad: 180,
                itouch: 120
            }
        ],
        xkey: 'period',
        ykeys: ['iphone', 'ipad', 'itouch'],
        labels: ['iPhone', 'iPad', 'iPod Touch'],
        pointSize: 3,
        fillOpacity: 0,
        pointStrokeColors: ['#222222', '#cccccc', '#379c94'],
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        lineWidth: 2,
        hideHover: 'auto',
        lineColors: ['#222222', '#cccccc', '#379c94'],
        resize: true

    });
    Morris.Area({
        element: 'm_area_chart2',
        data: [{
                period: '2012',
                SiteA: 10,
                SiteB: 0,

            }, {
                period: '2013',
                SiteA: 126,
                SiteB: 78,

            }, {
                period: '2014',
                SiteA: 78,
                SiteB: 58,

            }, {
                period: '2015',
                SiteA: 89,
                SiteB: 185,

            }, {
                period: '2016',
                SiteA: 175,
                SiteB: 124,

            }, {
                period: '2017',
                SiteA: 126,
                SiteB: 102  ,

            }
        ],
        xkey: 'period',
        ykeys: ['SiteA', 'SiteB'],
        labels: ['Site A', 'Site B'],
        pointSize: 0,
        fillOpacity: 0.4,
        pointStrokeColors: ['#9e9e9e', '#457fca'],
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        lineWidth: 0,
        smooth: false,
        hideHover: 'auto',
        lineColors: ['#9e9e9e', '#457fca'],
        resize: true

    });
    Morris.Area({
        element: 'e_area_chart',
            data: [{
                period: '2011',
                iphone: 10,
                ipad: 0,
                itouch: 0
            }, {
                period: '2012',
                iphone: 35,
                ipad: 65,
                itouch: 5
            }, {
                period: '2013',
                iphone: 25,
                ipad: 30,
                itouch: 65
            }, {
                period: '2014',
                iphone: 80,
                ipad: 12,
                itouch: 7
            }, {
                period: '2015',
                iphone: 30,
                ipad: 32,
                itouch: 120
            }, {
                period: '2016',
                iphone: 25,
                ipad: 80,
                itouch: 40
            }, {
                period: '2017',
                iphone: 70,
                ipad: 10,
                itouch: 26
            }


        ],
        lineColors: ['#F15F79', '#424242', '#ffc107'],
        xkey: 'period',
        ykeys: ['iphone', 'ipad', 'itouch'],
        labels: ['Site A', 'Site B', 'Site C'],
        pointSize: 0,
        lineWidth: 0,
        resize: true,
        fillOpacity: 0.8,
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        hideHover: 'auto'

    });
}
// LINE CHART
function MorrisLineChart() {
    var line = new Morris.Line({
        element: 'm_line_chart',
        resize: true,
        data: [{
                y: '2014 Q1',
                item1: 2356
            },
            {
                y: '2015 Q2',
                item1: 2586
            },
            {
                y: '2015 Q3',
                item1: 4512
            },
            {
                y: '2015 Q4',
                item1: 3265
            },
            {
                y: '2016 Q5',
                item1: 6258
            },
            {
                y: '2016 Q6',
                item1: 5234
            },
            {
                y: '2016 Q7',
                item1: 4725
            },
            {
                y: '2016 Q7',
                item1: 7526
            },
            {
                y: '2017 Q7',
                item1: 8452
            },
            {
                y: '2017 Q7',
                item1: 8931
            }
        ],
        xkey: 'y',
        ykeys: ['item1'],
        labels: ['Item 1'],
        gridLineColor: '#eef0f2',
        lineColors: ['#78b83e'],
        lineWidth: 2,
        pointSize: 3,
        hideHover: 'auto'
    });
}
// Morris donut chart
function MorrisDonutChart() {
    Morris.Donut({
        element: 'm_donut_chart',
        data: [
        {
            label: "Online Sales",
            value: 45,

        }, {
            label: "Store Sales",
            value: 35
        },{
            label: "Email Sales",
            value: 8
        }, {
            label: "Agent Sales",
            value: 12
        }],

        resize: true,
        colors: ['#ffd97f', '#fab2c0', '#80dad8', '#a1abb8']
    });
}
// Morris bar chart
function MorrisBarChart() {
    Morris.Bar({
        element: 'm_bar_chart',
        data: [{
            y: '2011',
            a: 80,
            b: 56,
            c: 89
        }, {
            y: '2012',
            a: 75,
            b: 65,
            c: 38
        }, {
            y: '2013',
            a: 59,
            b: 30,
            c: 37
        }, {
            y: '2014',
            a: 75,
            b: 65,
            c: 40
        }, {
            y: '2015',
            a: 55,
            b: 40,
            c: 45
        }, {
            y: '2016',
            a: 75,
            b: 65,
            c: 40
        }, {
            y: '2017',
            a: 87,
            b: 88,
            c: 36
        }],
        xkey: 'y',
        ykeys: ['a', 'b', 'c'],
        labels: ['A', 'B', 'C'],
        barColors: ['#757575', '#26c6da', '#ffcc80'],
        hideHover: 'auto',
        gridLineColor: '#eef0f2',
        resize: true
    });
}
// Extra chart

Copyright © 2021 - 2025 IMMREX7