add extjs 6.0.1 sources

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

(function() {\r
    /**\r
     * Demonstrates how to use Ext.chart.PlotChart\r
     */\r
    var fn = [\r
        function(x) {\r
            return Math.sin(5 * x);\r
        },\r
        function(x) {\r
            return x * x * 2 - 1;\r
        },\r
        function(x) {\r
            return Math.sqrt((1 + x) / 2) * 2 - 1;\r
        },\r
        function(x) {\r
            return x * x * x;\r
        },\r
        function(x) {\r
            return Math.cos(10 * x);\r
        },\r
        function(x) {\r
            return 2 * x;\r
        },\r
        function(x) {\r
            return Math.pow(x, -2);\r
        },\r
        function(x) {\r
            return Math.pow(x, -3);\r
        },\r
        function(x) {\r
            return Math.tan(5 * x);\r
        }\r
    ];\r
\r
    var ct = 0.02,\r
        i = 0;\r
\r
    var createData = function() {\r
        var delta = arguments[0],\r
            l = arguments.length,\r
            data = [],\r
            cap = 10000,\r
            i, j, y,\r
            rec;\r
        for (i = -2; i <= 2; i += delta) {\r
            rec = {\r
                x: i\r
            };\r
            for (j = 1; j < l; ++j) {\r
                y = arguments[j](i);\r
                if (y > cap) {\r
                    y = cap;\r
                }\r
                rec['y' + j] = y;\r
            }\r
            data.push(rec);\r
        }\r
        return data;\r
    };\r
\r
    Ext.define('KitchenSink.view.chart.Plot', {\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
                bottom: [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-refresh',\r
                text: 'Refresh',\r
                handler: function() {\r
                    Ext.getStore('PlotStore').setData(createData(ct, fn[++i % fn.length]));\r
                }\r
            }, {\r
                text: 'Reset',\r
                handler: 'onReset'\r
            }]\r
        }, {\r
            xtype: 'cartesian',\r
            store: {\r
                storeId: 'PlotStore',\r
                fields: ['x', 'y1', 'y2', 'y3', 'y4', 'y5']\r
            },\r
            background: 'white',\r
            theme: "Sky",\r
            interactions: 'panzoom',\r
            series: [{\r
                type: 'line',\r
                xField: 'x',\r
                yField: 'y1',\r
                style: {\r
                    lineWidth: 2,\r
                    strokeStyle: 'rgb(0, 119, 204)'\r
                }\r
            }],\r
            axes: [{\r
                type: 'numeric',\r
                position: 'left',\r
                fields: ['y1'],\r
                titleMargin: 20,\r
                title: {\r
                    text: 'f(x)',\r
                    fontSize: 16,\r
                    fillStyle: 'rgb(255, 0, 136)'\r
                },\r
                minimum: -4,\r
                maximum: 4,\r
                floating: {\r
                    value: 0,\r
                    alongAxis: 1\r
                },\r
                grid: true\r
            }, {\r
                type: 'numeric',\r
                position: 'bottom',\r
                fields: ['x'],\r
                titleMargin: 6,\r
                title: {\r
                    text: 'x',\r
                    fontSize: 16,\r
                    fillStyle: 'rgb(255, 0, 136)'\r
                },\r
                floating: {\r
                    value: 0,\r
                    alongAxis: 0\r
                },\r
                grid: true\r
            }]\r
        }],\r
\r
        initialize: function() {\r
            this.callParent();\r
            Ext.getStore('PlotStore').setData(createData(ct, fn[0]));\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
})();