add extjs 6.0.1 sources

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

/**\r
 * Demonstrates how to use Ext.chart.AreaChart\r
 */\r
Ext.define('KitchenSink.view.chart.Area', {\r
    extend: 'Ext.Panel',\r
    requires: [\r
        'Ext.chart.CartesianChart',\r
        'Ext.chart.interactions.PanZoom',\r
        'Ext.chart.series.Area',\r
        'Ext.chart.axis.Numeric',\r
        'KitchenSink.view.chart.ChartController'\r
    ],\r
\r
    controller: {\r
        type: 'chart',\r
        defaultVisibleRange: {\r
            bottom: [0, 0.25]\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('OrderItems').generateData(25);\r
            }\r
        }, {\r
            text: 'Reset',\r
            handler: 'onReset'\r
        }]\r
    }, {\r
        xtype: 'cartesian',\r
        store: 'OrderItems',\r
        legend: {\r
            position: 'bottom'\r
        },\r
        insetPadding: {\r
            left: 10,\r
            bottom: 0,\r
            top: 15,\r
            right: 35\r
        },\r
        interactions: [{\r
            type: 'panzoom',\r
            axes: {\r
                left: {\r
                    allowPan: false,\r
                    allowZoom: false\r
                },\r
                bottom: {\r
                    allowPan: true,\r
                    allowZoom: true\r
                }\r
            }\r
        }],\r
        series: [{\r
            type: 'area',\r
            xField: 'name',\r
            yField: ['g1', 'g2', 'g3', 'g4', 'g5'],\r
            title: ['G1', 'G2', 'G3', 'G4', 'G5'],\r
            style: {\r
                stroke: 'black',\r
                lineWidth: 2,\r
                fillOpacity: 0.8\r
            }\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            fields: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6'],\r
            label: {\r
                rotate: {\r
                    degrees: -30\r
                }\r
            },\r
            grid: {\r
                odd: {\r
                    fill: '#e8e8e8'\r
                }\r
            },\r
            title: {\r
                text: 'Summation of Data',\r
                fontSize: 20\r
            }\r
        }, {\r
            type: 'category',\r
            position: 'bottom',\r
            fields: 'name',\r
            grid: true,\r
            visibleRange: [0, 0.25],\r
            title: {\r
                text: 'Item Names',\r
                fontSize: 20\r
            }\r
        }]\r
    }],\r
\r
    initialize: function() {\r
        this.callParent();\r
        Ext.getStore('OrderItems').generateData(25);\r
    }\r
});