add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / charts / line / Plot.js

/**\r
 * This example shows how to create a Plot chart with floating axes linked to each other\r
 * at the origin. Floating axes can track a value on another axis running in the oppsosite\r
 * direction. This is handy for visualizing mathematical functions. Try zooming and panning\r
 * the chart to see the effect.\r
 *\r
 * To zoom the chart, use the pinch-in/pinch-out gestures, if you are on a mobile device.\r
 * Or click and drag, if you are using a desktop browser. Click and drag also acts as a\r
 * panning gesture on desktops. You can use the Pan/Zoom toggle in the upper-left corner\r
 * of the chart to switch modes.\r
 */\r
Ext.define('KitchenSink.view.charts.line.Plot', {\r
    extend: 'Ext.panel.Panel',\r
    xtype: 'line-plot',\r
    controller: 'line-plot',\r
\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
    // <example>\r
    // Content between example tags is omitted from code preview.\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/charts/line/PlotController.js'\r
    }, {\r
        type: 'Store',\r
        path: 'classic/samples/store/Plot.js'\r
    }],\r
    // </example>\r
    layout: 'fit',\r
    width: 650,\r
\r
    tbar: {\r
        reference: 'toolbar',\r
        items: [\r
            '->',\r
            {\r
                text: 'Next function',\r
                handler: 'onRefresh'\r
            },\r
            {\r
                text: 'Preview',\r
                handler: 'onPreview'\r
            },\r
            {\r
                text: 'Reset pan/zoom',\r
                handler: 'onPanZoomReset'\r
            }\r
        ]\r
    },\r
\r
    items: [{\r
        xtype: 'cartesian',\r
        reference: 'chart',\r
        height: 500,\r
        store: {\r
            type: 'plot'\r
        },\r
        padding: 10,\r
        insetPadding: 0,\r
        interactions: {\r
            type: 'panzoom',\r
            zoomOnPanGesture: true\r
        },\r
        // <example>\r
        // TODO: must be able to control how series are displayed\r
        // TODO: for undefined data points (apply fillStyle to the series\r
        // TODO: to see the issue)\r
        // </example>\r
        series: [\r
            {\r
                type: 'line',\r
                xField: 'x',\r
                yField: 'y1',\r
                style: {\r
                    lineWidth: 2,\r
                    strokeStyle: 'rgb(0, 119, 204)'\r
                }\r
            }\r
            // <example>\r
// TODO: The second line series does not render correctly, it should look the same\r
// TODO: as the blue series will look on next refresh button tap, but doesn't,\r
// TODO: even though the data looks alright.\r
// TODO: add 'me.fn[(me.fnIndex + 1) % me.fn.length]' to Plot store's traverseFunctions\r
// TODO: as a third parameter to test this.\r
// TODO:               {\r
// TODO:                   type: 'line',\r
// TODO:                   xField: 'x',\r
// TODO:                   yField: 'y2',\r
// TODO:                   style: {\r
// TODO:                       lineWidth: 2,\r
// TODO:                       lineDash: [3, 3],\r
// TODO:                       strokeStyle: 'rgb(230, 119, 204)'\r
// TODO:                   }\r
// TODO:               }\r
            // </example>\r
        ],\r
        axes: [\r
            {\r
                type: 'numeric',\r
                position: 'left',\r
                fields: ['y1'],\r
                titleMargin: 20,\r
                title: {\r
                    text: 'f(x)',\r
                    fillStyle: 'rgb(255, 0, 136)'\r
                },\r
                minimum: -4,\r
                maximum: 4,\r
                minorTickSteps: 3,\r
                style: {\r
                    minorTicks: true,\r
                    minorTickSize: 4,\r
                    majorTickSize: 7\r
                },\r
                floating: {\r
                    value: 0,\r
                    alongAxis: 1\r
                },\r
                grid: true\r
            },\r
            {\r
                type: 'numeric',\r
                position: 'bottom',\r
                fields: ['x'],\r
                titleMargin: 6,\r
                minorTickSteps: 3,\r
                style: {\r
                    minorTicks: true,\r
                    minorTickSize: 4,\r
                    majorTickSize: 7\r
                },\r
                title: {\r
                    text: 'x',\r
                    fillStyle: 'rgb(255, 0, 136)'\r
                },\r
                floating: {\r
                    value: 0,\r
                    alongAxis: 0\r
                },\r
                grid: true\r
            }\r
        ]\r
    }],\r
\r
    listeners: {\r
        afterrender: 'onAfterRender'\r
    }\r
\r
});\r