projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | /**\r |
| 2 | * Demonstrates how to use Ext.chart.series.CandleStick\r | |
| 3 | */\r | |
| 4 | Ext.define('KitchenSink.view.chart.Candlestick', {\r | |
| 5 | extend: 'Ext.Panel',\r | |
| 6 | requires: [\r | |
| 7 | 'Ext.chart.CartesianChart',\r | |
| 8 | 'Ext.chart.series.Line',\r | |
| 9 | 'Ext.chart.axis.Numeric',\r | |
| 10 | 'Ext.chart.axis.Time',\r | |
| 11 | 'Ext.chart.series.CandleStick',\r | |
| 12 | 'KitchenSink.store.StockPrice',\r | |
| 13 | 'Ext.chart.interactions.Crosshair'\r | |
| 14 | ],\r | |
| 15 | \r | |
| 16 | controller: {\r | |
| 17 | type: 'chart',\r | |
| 18 | defaultVisibleRange: {\r | |
| 19 | bottom: [0, 0.3]\r | |
| 20 | }\r | |
| 21 | },\r | |
| 22 | \r | |
| 23 | layout: 'fit',\r | |
| 24 | items: [{\r | |
| 25 | xtype: 'toolbar',\r | |
| 26 | docked: 'top',\r | |
| 27 | cls: 'charttoolbar',\r | |
| 28 | items: [{\r | |
| 29 | xtype: 'spacer'\r | |
| 30 | }, {\r | |
| 31 | text: 'Reset',\r | |
| 32 | handler: 'onReset'\r | |
| 33 | }]\r | |
| 34 | }, {\r | |
| 35 | xtype: 'cartesian',\r | |
| 36 | store: {\r | |
| 37 | type: 'StockPrice'\r | |
| 38 | },\r | |
| 39 | interactions: [{\r | |
| 40 | type: 'panzoom',\r | |
| 41 | enabled: false,\r | |
| 42 | zoomOnPanGesture: false,\r | |
| 43 | axes: {\r | |
| 44 | left: {\r | |
| 45 | allowPan: false,\r | |
| 46 | allowZoom: false\r | |
| 47 | },\r | |
| 48 | bottom: {\r | |
| 49 | allowPan: true,\r | |
| 50 | allowZoom: true\r | |
| 51 | }\r | |
| 52 | }\r | |
| 53 | }, {\r | |
| 54 | type: 'crosshair',\r | |
| 55 | axes: {\r | |
| 56 | label: {\r | |
| 57 | fillStyle: 'white'\r | |
| 58 | },\r | |
| 59 | rect: {\r | |
| 60 | fillStyle: '#344459',\r | |
| 61 | opacity: 0.7,\r | |
| 62 | radius: 5\r | |
| 63 | }\r | |
| 64 | }\r | |
| 65 | }],\r | |
| 66 | series: [{\r | |
| 67 | type: 'candlestick',\r | |
| 68 | xField: 'time',\r | |
| 69 | openField: 'open',\r | |
| 70 | highField: 'high',\r | |
| 71 | lowField: 'low',\r | |
| 72 | closeField: 'close',\r | |
| 73 | style: {\r | |
| 74 | barWidth: 10,\r | |
| 75 | opacity: 0.9,\r | |
| 76 | dropStyle: {\r | |
| 77 | fill: 'rgb(237,123,43)',\r | |
| 78 | stroke: 'rgb(237,123,43)'\r | |
| 79 | },\r | |
| 80 | raiseStyle: {\r | |
| 81 | fill: 'rgb(55,153,19)',\r | |
| 82 | stroke: 'rgb(55,153,19)'\r | |
| 83 | }\r | |
| 84 | }\r | |
| 85 | }],\r | |
| 86 | axes: [{\r | |
| 87 | type: 'numeric',\r | |
| 88 | fields: ['open', 'high', 'low', 'close'],\r | |
| 89 | position: 'left',\r | |
| 90 | maximum: 1000,\r | |
| 91 | minimum: 0\r | |
| 92 | }, {\r | |
| 93 | type: 'time',\r | |
| 94 | fields: ['time'],\r | |
| 95 | position: 'bottom',\r | |
| 96 | visibleRange: [0, 0.3],\r | |
| 97 | style: {\r | |
| 98 | axisLine: false\r | |
| 99 | }\r | |
| 100 | }]\r | |
| 101 | }],\r | |
| 102 | \r | |
| 103 | initialize: function() {\r | |
| 104 | this.callParent();\r | |
| 105 | var toolbar = Ext.ComponentQuery.query('toolbar', this)[0],\r | |
| 106 | interactions = Ext.ComponentQuery.query('interaction', this),\r | |
| 107 | panzoom = interactions[0],\r | |
| 108 | crosshair = interactions[1];\r | |
| 109 | \r | |
| 110 | toolbar.add({\r | |
| 111 | xtype: 'segmentedbutton',\r | |
| 112 | margin: '0 5 0 0',\r | |
| 113 | items: [{\r | |
| 114 | text: 'Crosshair',\r | |
| 115 | pressed: true,\r | |
| 116 | handler: function() {\r | |
| 117 | crosshair.setEnabled(true);\r | |
| 118 | panzoom.setEnabled(false);\r | |
| 119 | }\r | |
| 120 | }, {\r | |
| 121 | text: 'Pan/Zoom',\r | |
| 122 | handler: function() {\r | |
| 123 | panzoom.setEnabled(true);\r | |
| 124 | crosshair.setEnabled(false);\r | |
| 125 | }\r | |
| 126 | }]\r | |
| 127 | });\r | |
| 128 | if (toolbar && panzoom && !panzoom.isMultiTouch()) {\r | |
| 129 | toolbar.add(panzoom.getModeToggleButton());\r | |
| 130 | }\r | |
| 131 | }\r | |
| 132 | }); |