add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / scatter / Bubble.js

/**\r
 * Demonstrates how to make a bubble chart using Ext.chart.series.Scatter\r
 *\r
 * Bubble charts, similarly to Line charts, allow to visualize the evolution of a\r
 * parameter over time or the ratio between any two parameters, but in addition they\r
 * can also display intrinsic values of these parameters by assigning them to the\r
 * diameter or the color of the bubbles.\r
 */\r
Ext.define('KitchenSink.view.charts.scatter.Bubble', {\r
    extend: 'Ext.Panel',\r
    xtype: 'scatter-bubble',\r
    controller: 'scatter-bubble',\r
    // <example>\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/scatter/BubbleController.js'\r
    }],\r
    // </example>\r
\r
    requires: [\r
        'Ext.draw.Color',\r
        'Ext.chart.CartesianChart',\r
        'Ext.chart.series.Scatter',\r
        'Ext.chart.axis.Numeric',\r
        'Ext.chart.interactions.*'\r
    ],\r
\r
    layout: 'fit',\r
    width: 650,\r
\r
    tbar: [\r
        '->',\r
        {\r
            text: 'Refresh',\r
            handler: 'onRefresh'\r
        },\r
        {\r
            text: 'Drop all bubbles',\r
            handler: 'onDropBubble'\r
        }\r
    ],\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        reference: 'chart',\r
        background: '#242021',\r
\r
        width: '100%',\r
        height: 500,\r
        insetPadding: 20,\r
\r
        store: {\r
            fields: [ 'x', 'g1', 'g2', 'g3', 'g4', 'g5' ]\r
        },\r
\r
        interactions: {\r
            type: 'itemedit',\r
            tooltip: {\r
                renderer: 'onEditTipRender'\r
            }\r
        },\r
\r
        series: {\r
            type: 'scatter',\r
            xField: 'x',\r
            yField: 'g2',\r
            highlightCfg: {\r
                scale: 1.3\r
            },\r
            marker: {\r
                type: 'circle',\r
                radius: 5,\r
                fillStyle: 'rgb(203,143,203)',\r
                miterLimit: 1,\r
                lineCap: 'butt',\r
                lineWidth: 1,\r
                fx: {\r
                    duration: 200\r
                }\r
            },\r
            style: {\r
                renderer: 'onItemRender'\r
            }\r
        },\r
        axes: [{\r
            type: 'numeric',\r
            position: 'left',\r
            fields: 'g2',\r
            minimum: 0,\r
            style: {\r
                majorTickSize: 10,\r
                lineWidth: 3,\r
                stroke: '#888',\r
                estStepSize: 50\r
            },\r
            label: {\r
                color: '#888',\r
                fontFamily: 'Chalkboard, sans-serif',\r
                fontSize: 20\r
            },\r
            grid: {\r
                stroke: '#444',\r
                odd: {\r
                    fill: '#333'\r
                }\r
            }\r
        }, {\r
            type: 'numeric',\r
            position: 'bottom',\r
            fields: 'x',\r
            minimum: 0,\r
            maximum: 50,\r
            style: {\r
                majorTickSize: 10,\r
                lineWidth: 3,\r
                stroke: '#888',\r
                estStepSize: 100\r
            },\r
            label: {\r
                color: '#888',\r
                fontFamily: 'Chalkboard, sans-serif',\r
                fontSize: 20\r
            },\r
            grid: {\r
                stroke: '#444'\r
            }\r
        }],\r
\r
        listeners: {\r
            afterrender: 'onAfterRender'\r
        }\r
    }]\r
});\r