add extjs 6.0.1 sources

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

/**\r
 * Demonstrates how to use Ext.chart.ScatterChart\r
 */\r
Ext.define('KitchenSink.view.chart.Scatter', {\r
    extend: 'Ext.Panel',\r
    requires: [\r
        'Ext.chart.CartesianChart',\r
        'Ext.chart.series.Scatter',\r
        'Ext.chart.axis.Numeric'\r
    ],\r
\r
    controller: {\r
        type: 'chart',\r
        defaultVisibleRange: {\r
            left: [0, 1],\r
            bottom: [0, 0.5]\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
        background: 'white',\r
        interactions: [\r
            'panzoom',\r
            'itemhighlight'\r
        ],\r
        series: [{\r
            type: 'scatter',\r
            xField: 'id',\r
            yField: 'g1',\r
            highlightCfg: {\r
                strokeStyle: 'red',\r
                lineWidth: 5\r
            },\r
            marker: {\r
                type: 'path',\r
                path: [\r
                    ['M', 0, 1],\r
                    ['L', 1, 0],\r
                    ['L', 0, -1],\r
                    ['L', -1, 0],\r
                    ['Z']\r
                ],\r
                scale: 10,\r
                lineWidth: 2\r
            }\r
        }, {\r
            type: 'scatter',\r
            xField: 'id',\r
            yField: 'g2',\r
            highlightCfg: {\r
                strokeStyle: 'red',\r
                lineWidth: 5\r
            },\r
            marker: {\r
                type: 'circle',\r
                radius: 10,\r
                lineWidth: 2\r
            }\r
        }],\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            fields: ['g1', 'g2', 'g3', 'g4'],\r
            visibleRange: [0, 1],\r
            style: {\r
                estStepSize: 20\r
            },\r
            label: {\r
                rotate: {\r
                    degrees: -30\r
                }\r
            }\r
        }, {\r
            type: 'category',\r
            position: 'bottom',\r
            visibleRange: [0, 0.5],\r
            fields: 'id'\r
        }]\r
    }],\r
\r
    initialize: function() {\r
        this.callParent();\r
        Ext.getStore('OrderItems').generateData(25);\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
});