add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / modern / src / view / chart / Bar.js

/**\r
 * Demonstrates how to use Ext.chart.BarChart\r
 */\r
Ext.define('KitchenSink.view.chart.Bar', {\r
    extend: 'Ext.Panel',\r
    requires: [\r
        'Ext.chart.CartesianChart', \r
        'Ext.chart.interactions.PanZoom',\r
        'Ext.chart.series.Bar', \r
        'Ext.chart.axis.Numeric', \r
        'Ext.chart.axis.Category'\r
    ],\r
\r
    controller: {\r
        type: 'chart',\r
        defaultVisibleRange: {\r
            left: [0, 1]\r
        }\r
    },\r
\r
    layout: 'fit',\r
    items: [{\r
        xtype: 'toolbar',\r
        docked: 'top',\r
        cls: 'charttoolbar',\r
        items: [{\r
            xtype: 'spacer'\r
        }, {\r
            iconCls: 'x-fa fa-picture-o',\r
            text: 'Theme',\r
            handler: 'onThemeChange'\r
        }, {\r
            iconCls: 'x-fa fa-refresh',\r
            text: 'Refresh',\r
            handler: function() {\r
                Ext.getStore('Pie').generateData(15);\r
            }\r
        }, {\r
            text: 'Reset',\r
            handler: 'onReset'\r
        }]\r
    }, {\r
        xtype: 'cartesian',\r
        store: 'Pie',\r
        background: 'white',\r
        flipXY: true,\r
        interactions: [{\r
            type: 'panzoom'\r
        }, {\r
            type: 'itemhighlight'\r
        }],\r
        series: [{\r
            type: 'bar',\r
            xField: 'name',\r
            yField: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6'],\r
            highlightCfg: {\r
                strokeStyle: 'red',\r
                lineWidth: 3\r
            },\r
            style: {\r
                lineWidth: 2,\r
                maxBarWidth: 30,\r
                stroke: 'rgb(40,40,40)'\r
            }\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'bottom',\r
            fields: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6'],\r
            grid: {\r
                even: {\r
                    lineWidth: 1\r
                },\r
                odd: {\r
                    stroke: '#fff'\r
                }\r
            },\r
            label: {\r
                rotate: {\r
                    degrees: -90\r
                }\r
            },\r
            maxZoom: 1\r
        }, {\r
            type: 'category',\r
            position: 'left',\r
            fields: 'name',\r
            maxZoom: 4\r
        }]\r
    }],\r
\r
    initialize: function() {\r
        this.callParent();\r
        Ext.getStore('Pie').generateData(15);\r
        var toolbar = Ext.ComponentQuery.query('toolbar', this)[0],\r
            interaction = Ext.ComponentQuery.query('interaction', this)[0];\r
        if (toolbar && interaction && !interaction.isMultiTouch()) {\r
            toolbar.add(interaction.getModeToggleButton());\r
        }\r
    },\r
\r
    refreshData: function() {\r
        \r
    }\r
});