add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / charts / bar / Stacked.js

/**\r
 * Stacked bars are multi-series bar charts where categories are stacked next to each\r
 * other. This is typically done to visually represent the total of all categories for a\r
 * given period or value.\r
 */\r
Ext.define('KitchenSink.view.charts.bar.Stacked', {\r
    extend: 'Ext.Panel',\r
    xtype: 'bar-stacked',\r
    controller: 'bar-stacked',\r
    // <example>\r
    // Content between example tags is omitted from code preview.\r
    bodyStyle: 'background: transparent !important',\r
    layout: {\r
        type: 'vbox',\r
        pack: 'center'\r
    },\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/bar/StackedController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/Browsers.js'\r
    }],\r
    // </example>\r
\r
    width: 650,\r
\r
    initComponent: function() {\r
        var me = this;\r
        //<example>\r
        me.tbar = [\r
            '->',\r
            {\r
                text: 'Preview',\r
                handler: 'onPreview'\r
            }\r
        ];\r
        //</example>\r
        me.items = [{\r
            xtype: 'cartesian',\r
            reference: 'chart',\r
            width: '100%',\r
            height: 500,\r
            legend: {\r
                docked: 'right'\r
            },\r
            store: {type: 'browsers'},\r
            insetPadding: 40,\r
            flipXY: true,\r
            sprites: [{\r
                type: 'text',\r
                text: 'Bar Charts - Stacked Bars',\r
                fontSize: 22,\r
                width: 100,\r
                height: 30,\r
                x: 40, // the sprite x position\r
                y: 20  // the sprite y position\r
            }, {\r
                type: 'text',\r
                text: 'Data: Browser Stats 2012',\r
                fontSize: 10,\r
                x: 12,\r
                y: 480\r
            }, {\r
                type: 'text',\r
                text: 'Source: http://www.w3schools.com/',\r
                fontSize: 10,\r
                x: 12,\r
                y: 495\r
            }],\r
            axes: [{\r
                type: 'numeric',\r
                position: 'bottom',\r
                adjustByMajorUnit: true,\r
                fields: 'data1',\r
                grid: true,\r
                renderer: 'onAxisLabelRender',\r
                minimum: 0\r
            }, {\r
                type: 'category',\r
                position: 'left',\r
                fields: 'month',\r
                grid: true\r
            }],\r
            series: [{\r
                type: 'bar',\r
                axis: 'bottom',\r
                title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],\r
                xField: 'month',\r
                yField: [ 'data1', 'data2', 'data3', 'data4' ],\r
                stacked: true,\r
                style: {\r
                    opacity: 0.80\r
                },\r
                highlight: {\r
                    fillStyle: 'yellow'\r
                },\r
                tooltip: {\r
                    trackMouse: true,\r
                    renderer: 'onSeriesTooltipRender'\r
                }\r
            }]\r
        //<example>\r
        }, {\r
            style: 'margin-top: 10px;',\r
            xtype: 'gridpanel',\r
            columns : {\r
                defaults: {\r
                    sortable: false,\r
                    menuDisabled: true,\r
                    renderer: 'onColumnRender'\r
                },\r
                items: [\r
                    { text: 'Month', dataIndex: 'month', renderer: Ext.identityFn },\r
                    { text: 'IE', dataIndex: 'data1' },\r
                    { text: 'Firefox', dataIndex: 'data2' },\r
                    { text: 'Chrome', dataIndex: 'data3' },\r
                    { text: 'Safari', dataIndex: 'data4' }\r
                ]\r
            },\r
            store: {type: 'browsers'},\r
            width: '100%'\r
        //</example>\r
        }];\r
\r
        this.callParent();\r
    }\r
});\r