extjs/build/examples/kitchensink/classic/samples/view/charts/column/Basic.js

   1 /**
   2  * The Basic Column Chart displays a set of random data in a column series. The "Reload Data"
   3  * button will randomly generate a new set of data in the store.
   4  *
   5  * Tapping or hovering a column will highlight it.
   6  * Dragging a column will change the underlying data.
   7  * Try dragging below 65 degrees Fahrenheit.
   8  */
   9 Ext.define('KitchenSink.view.charts.column.Basic', {
  10     extend: 'Ext.Panel',
  11     xtype: 'column-basic',
  12     controller: 'column-basic',
  13     // <example>
  14     // Content between example tags is omitted from code preview.
  15     bodyStyle: 'background: transparent !important',
  16     layout: 'fit',
  17     otherContent: [{
  18         type: 'Controller',
  19         path: 'classic/samples/view/charts/column/BasicController.js'
  20     }, {
  21         type: 'Store',
  22         path: 'classic/samples/store/Climate.js'
  23     }],
  24     // </example>
  25     width: 650,
  26     height: 500,
  27
  28     tbar: [
  29         '->',
  30         {
  31             text: 'Preview',
  32             platformConfig: {
  33                 desktop: {
  34                     text: 'Download'
  35                 }
  36             },
  37             handler: 'onDownload'
  38         },
  39         {
  40             text: 'Reload Data',
  41             handler: 'onReloadData'
  42         }
  43     ],
  44
  45     items: {
  46         xtype: 'cartesian',
  47         reference: 'chart',
  48         store: {
  49             type: 'climate'
  50         },
  51         insetPadding: {
  52             top: 40,
  53             bottom: 40,
  54             left: 20,
  55             right: 40
  56         },
  57         interactions: {
  58             type: 'itemedit',
  59             tooltip: {
  60                 renderer: 'onEditTipRender'
  61             },
  62             renderer: 'onColumnEdit'
  63         },
  64         axes: [{
  65             type: 'numeric',
  66             position: 'left',
  67             minimum: 30,
  68             titleMargin: 20,
  69             title: {
  70                 text: 'Temperature in °F'
  71             },
  72             listeners: {
  73                 rangechange: 'onAxisRangeChange'
  74             }
  75         }, {
  76             type: 'category',
  77             position: 'bottom'
  78         }],
  79         animation: Ext.isIE8 ? false : true,
  80         series: {
  81             type: 'bar',
  82             xField: 'month',
  83             yField: 'highF',
  84             style: {
  85                 minGapWidth: 20
  86             },
  87             highlight: {
  88                 strokeStyle: 'black',
  89                 fillStyle: 'gold'
  90             },
  91             label: {
  92                 field: 'highF',
  93                 display: 'insideEnd',
  94                 renderer: 'onSeriesLabelRender'
  95             }
  96         },
  97         sprites: {
  98             type: 'text',
  99             text: 'Redwood City Climate Data',
 100             fontSize: 22,
 101             width: 100,
 102             height: 30,
 103             x: 40, // the sprite x position
 104             y: 20  // the sprite y position
 105         },
 106         listeners: {
 107             afterrender: 'onAfterRender',
 108             beginitemedit: 'onBeginItemEdit',
 109             enditemedit: 'onEndItemEdit'
 110         }
 111     }
 112
 113 });