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

   1 //<feature charts>
   2 (function () {
   3     /**
   4      * Demonstrates how to use Ext.chart.PlotChart
   5      */
   6     var fn = [
   7         function (x) { return Math.sin(5 * x); },
   8         function (x) { return x * x * 2 - 1; },
   9         function (x) { return Math.sqrt((1 + x) / 2) * 2 - 1; },
  10         function (x) { return Math.random() * 2 - 1; },
  11         function (x) { return x * x * x; },
  12         function (x) { return x * x * x - x; },
  13         function (x) { return Math.cos(10 * x); },
  14         function (x) { return Math.random() * 2 - 1; }
  15     ];
  16
  17     var ct = 0.04,
  18         delay = 10,
  19         i = 0, l;
  20
  21     var createData = function () {
  22         var delta = arguments[0],
  23             l = arguments.length,
  24             data = [],
  25             i, j,
  26             rec;
  27         for (i = -1; i <= 1; i += delta) {
  28             rec = {
  29                 id: i
  30             };
  31             for (j = 1; j < l; ++j) {
  32                 rec['g' + j] = arguments[j](i);
  33             }
  34             data.push(rec);
  35         }
  36         return data;
  37     };
  38     Ext.define('Kitchensink.view.PlotChart', {
  39         extend: 'Ext.Panel',
  40         requires: ['Ext.chart.Chart', 'Ext.chart.interactions.PanZoom',
  41                    'Ext.chart.series.Bar', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category'],
  42         config: {
  43             cls: 'card1',
  44             layout: 'fit',
  45             items: [
  46                 {
  47                     xtype: 'toolbar',
  48                     cls: 'charttoolbar',
  49                     top: 0,
  50                     right: 0,
  51                     zIndex: 50,
  52                     style: {
  53                         background: 'none'
  54                     },
  55                     items: [
  56                         {
  57                             xtype: 'spacer'
  58                         },
  59                         {
  60                             iconCls: 'refresh',
  61                             text: 'Refresh',
  62                             handler: function () {
  63                                 var store = Ext.getStore('PlotStore');
  64                                 Ext.getStore('PlotStore').setData(createData(ct, fn[++i % fn.length]));
  65                             }
  66                         },
  67                         {
  68                             text: 'Reset',
  69                             handler: function () {
  70                                 //ensure the query gets the chart for this kitchensink example
  71                                 var chart = Ext.ComponentQuery.query('chart', this.getParent().getParent())[0];
  72
  73                                 //reset the axis
  74                                 Ext.ComponentQuery.query('axis', chart)[1].setVisibleRange([0, 1]);
  75                                 chart.redraw();
  76                             }
  77                         }
  78                     ]
  79                 },
  80                 {
  81                     xtype: 'chart',
  82                     store: {
  83                         storeId: 'PlotStore',
  84                         fields: [ 'time', 'g1', 'g2', 'g3', 'g4', 'g5' ]
  85                     },
  86                     background: 'white',
  87                     colors: Kitchensink.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1}),
  88                     interactions: [
  89                         {
  90                             type: 'panzoom',
  91                             axes: {
  92                                 "left": {
  93                                     allowPan: false,
  94                                     allowZoom: false
  95                                 },
  96                                 "bottom": {
  97                                     allowPan: true,
  98                                     allowZoom: true
  99                                 }
 100                             }
 101                         }
 102                     ],
 103                     series: [
 104                         {
 105                             type: 'bar',
 106                             xField: 'id',
 107                             yField: ['g1'],
 108                             itemInstancing: {
 109                                 fx: {
 110                                     customDuration: {
 111                                         globalAlpha: 0
 112                                     }
 113                                 }
 114                             },
 115                             style: {
 116                                 stroke: Kitchensink.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1})[0],
 117                                 renderer: function (sprite, config, rendererData, index) {
 118                                     var val = Math.abs(sprite.attr.dataY[index]);
 119                                     config.globalAlpha = val < 0.01 ? 0 : val;
 120                                 }
 121                             }
 122                         }
 123                     ],
 124                     axes: [
 125                         {
 126                             type: 'numeric',
 127                             position: 'left',
 128                             fields: ['g1'],
 129                             title: 'f(x)',
 130                             minimum: -1,
 131                             maximum: 1
 132                         },
 133                         {
 134                             type: 'category',
 135                             position: 'bottom',
 136                             fields: ['id'],
 137                             title: 'x',
 138                             renderer: function (value) {
 139                                 return value.toFixed(2);
 140                             }
 141                         }
 142                     ]
 143                 }
 144             ]
 145         },
 146
 147         initialize: function () {
 148             this.callParent();
 149             Ext.getStore('PlotStore').setData(createData(ct, fn[0]));
 150             var toolbar = Ext.ComponentQuery.query('toolbar', this)[0],
 151                 interaction = Ext.ComponentQuery.query('interaction', this)[0];
 152             if (toolbar && interaction && !interaction.isMultiTouch()) {
 153                 toolbar.add(interaction.getModeToggleButton());
 154             }
 155         }
 156     });
 157 })();
 158 //</feature>