src/examples/kitchensink/app/view/CandlestickChart.js

   1 /**
   2  * Demonstrates how to use Ext.chart.series.CandleStick
   3  */
   4 //<feature charts>
   5 Ext.define('Kitchensink.view.CandlestickChart', {
   6     extend: 'Ext.Panel',
   7     requires: [
   8         'Ext.chart.Chart',
   9         'Ext.chart.series.Line',
  10         'Ext.chart.axis.Numeric',
  11         'Ext.chart.axis.Time',
  12         'Ext.chart.series.CandleStick'
  13     ],
  14     config: {
  15         cls: 'card1',
  16         layout: 'fit',
  17         items: [
  18             {
  19                 xtype: 'toolbar',
  20                 cls: 'charttoolbar',
  21                 top: 0,
  22                 right: 0,
  23                 zIndex: 50,
  24                 style: {
  25                     background: 'none'
  26                 },
  27                 items: [
  28                     {
  29                         xtype: 'spacer'
  30                     },
  31                     {
  32                         text: 'Reset',
  33                         handler: function () {
  34                             //ensure the query gets the chart for this kitchensink example
  35                             var chart = Ext.ComponentQuery.query('chart', this.getParent().getParent())[0];
  36
  37                             //reset the axis
  38                             Ext.ComponentQuery.query('axis', chart)[1].setVisibleRange([0, 0.3]);
  39                             chart.redraw();
  40                         }
  41                     }
  42                 ]
  43             },
  44             {
  45                 xtype: 'chart',
  46                 background: 'white',
  47                 interactions: [
  48                     {
  49                         type: 'panzoom',
  50                         enabled: false,
  51                         zoomOnPanGesture: false,
  52                         axes: {
  53                             left: {
  54                                 allowPan: false,
  55                                 allowZoom: false
  56                             },
  57                             bottom: {
  58                                 allowPan: true,
  59                                 allowZoom: true
  60                             }
  61                         }
  62                     },
  63                     {
  64                         type: 'crosshair'
  65                     }
  66                 ],
  67                 series: [
  68                     {
  69                         store: 'StockPrice',
  70                         type: 'candlestick',
  71                         xField: 'time',
  72                         openField: 'open',
  73                         highField: 'high',
  74                         lowField: 'low',
  75                         closeField: 'close',
  76                         style: {
  77                             barWidth: 10,
  78                             opacity: 0.9,
  79                             dropStyle: {
  80                                 fill: 'rgb(237,123,43)',
  81                                 stroke: 'rgb(237,123,43)'
  82                             },
  83                             raiseStyle: {
  84                                 fill: 'rgb(55,153,19)',
  85                                 stroke: 'rgb(55,153,19)'
  86                             }
  87                         },
  88                         aggregator: {
  89                             strategy: 'time'
  90                         }
  91                     }
  92                 ],
  93                 axes: [
  94                     {
  95                         type: 'numeric',
  96                         fields: ['open', 'high', 'low', 'close'],
  97                         position: 'left',
  98                         maximum: 1000,
  99                         minimum: 0
 100                     },
 101                     {
 102                         type: 'time',
 103                         fields: ['time'],
 104                         position: 'bottom',
 105                         visibleRange: [0, 0.3],
 106                         style: {
 107                             axisLine: false
 108                         }
 109                     }
 110                 ]
 111             }
 112         ]
 113     },
 114     initialize: function () {
 115         this.callSuper();
 116         var toolbar = Ext.ComponentQuery.query('toolbar', this)[0],
 117             interactions = Ext.ComponentQuery.query('interaction', this),
 118             panzoom = interactions[0],
 119             crosshair = interactions[1];
 120
 121         toolbar.add({
 122             xtype: 'segmentedbutton',
 123             margin: '0 5 0 0',
 124             items: [
 125                 {
 126                     text: 'Crosshair',
 127                     pressed: true,
 128                     handler: function () {
 129                         crosshair.setEnabled(true);
 130                         panzoom.setEnabled(false);
 131                     }
 132                 },
 133                 {
 134                     text: 'Pan/Zoom',
 135                     handler: function () {
 136                         panzoom.setEnabled(true);
 137                         crosshair.setEnabled(false);
 138                     }
 139                 }
 140             ]
 141         });
 142         if (toolbar && panzoom && !panzoom.isMultiTouch()) {
 143             toolbar.add(panzoom.getModeToggleButton());
 144         }
 145     }
 146 });
 147 //</feature>