1#@!#!123s

: / home5 / rakcha / www / app / assets / js / page /
Filename : chart-morris.js
back
'use strict';

$(function () {

    getMorris('line', 'line_chart');

    getMorris('bar', 'bar_chart');

    getMorris('area', 'area_chart');

    getMorris('donut', 'donut_chart');

});





function getMorris(type, element) {

    if (type === 'line') {

        Morris.Line({

            element: element,

            data: [{

                period: '2008',

                iphone: 35,

                ipad: 67,

                itouch: 15

            }, {

                period: '2009',

                iphone: 140,

                ipad: 189,

                itouch: 67

            }, {

                period: '2010',

                iphone: 50,

                ipad: 80,

                itouch: 22

            }, {

                period: '2011',

                iphone: 180,

                ipad: 220,

                itouch: 76

            }, {

                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', '#f96332'],

            behaveLikeLine: true,

            gridLineColor: '#e0e0e0',

            lineWidth: 2,

            hideHover: 'auto',

            lineColors: ['#222222', '#20B2AA', '#f96332'],

            resize: true

        });

    } else if (type === 'bar') {

        Morris.Bar({

            element: element,

            data: [{

                x: '2011 Q1',

                y: 66,

                z: 54,

                a: 38

            }, {

                x: '2011 Q2',

                y: 98,

                z: 75,

                a: 45

            }, {

                x: '2011 Q3',

                y: 73,

                z: 52,

                a: 44

            }, {

                x: '2011 Q4',

                y: 82,

                z: 64,

                a: 43

            }],

            xkey: 'x',

            ykeys: ['y', 'z', 'a'],

            labels: ['Y', 'Z', 'A'],

            barColors: ['#01B8AA', '#F2C80F', '#5F6B6D'],

            hideHover: 'auto'

        });



    } else if (type === 'area') {

        Morris.Area({

            element: element,

            data: [

                { w: '2011 Q1', x: 2, y: 0, z: 0 },

                { w: '2011 Q2', x: 50, y: 15, z: 5 },

                { w: '2011 Q3', x: 15, y: 50, z: 23 },

                { w: '2011 Q4', x: 45, y: 12, z: 7 },

                { w: '2011 Q5', x: 20, y: 32, z: 55 },

                { w: '2011 Q6', x: 39, y: 67, z: 20 },

                { w: '2011 Q7', x: 20, y: 9, z: 5 }

            ],

            xkey: 'w',

            ykeys: ['x', 'y', 'z'],

            labels: ['X', 'Y', 'Z'],

            pointSize: 0,

            lineWidth: 0,

            resize: true,

            fillOpacity: 0.8,

            behaveLikeLine: true,

            gridLineColor: '#e0e0e0',

            hideHover: 'auto',

            lineColors: ['rgb(97, 97, 97)', 'rgb(0, 206, 209)', 'rgb(255, 117, 142)']

        });

    } else if (type === 'donut') {

        Morris.Donut({

            element: element,

            data: [{

                label: 'Chrome',

                value: 37

            }, {

                label: 'Firefox',

                value: 30

            }, {

                label: 'Safari',

                value: 18

            }, {

                label: 'Opera',

                value: 12

            },

            {

                label: 'Other',

                value: 3

            }],

            colors: ['rgb(255, 206, 86)', 'rgb(65, 196, 216)', 'rgb(109, 109, 109)', 'rgb(255, 99, 132)', 'rgb(75, 192, 192)'],

            formatter: function (y) {

                return y + '%'

            }

        });

    }

}