examples/charts/ReloadChart.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require('Ext.layout.container.Fit');
   3
   4 Ext.onReady(function () {
   5     var panel1 = Ext.create('widget.panel', {
   6         width: 800,
   7         height: 400,
   8         title: 'Column Chart with Reload - Hits per Month',
   9         renderTo: Ext.getBody(),
  10         layout: 'fit',
  11         tbar: [{
  12             text: 'Reload Data',
  13             handler: function() {
  14                 store1.loadData(generateData());
  15             }
  16         }],
  17         items: {
  18             xtype: 'chart',
  19             animate: true,
  20             shadow: true,
  21             store: store1,
  22             axes: [{
  23                 type: 'Numeric',
  24                 position: 'left',
  25                 fields: ['data1'],
  26                 title: 'Hits',
  27                 grid: true,
  28                 minimum: 0
  29             }, {
  30                 type: 'Category',
  31                 position: 'bottom',
  32                 fields: ['name'],
  33                 title: 'Months',
  34                 label: {
  35                     rotate: {
  36                         degrees: 270
  37                     }
  38                 }
  39             }],
  40             series: [{
  41                 type: 'column',
  42                 axis: 'left',
  43                 gutter: 80,
  44                 xField: 'name',
  45                 yField: ['data1'],
  46                 tips: {
  47                     trackMouse: true,
  48                     width: 74,
  49                     height: 38,
  50                     renderer: function(storeItem, item) {
  51                         this.setTitle(storeItem.get('name') + '<br />' + storeItem.get('data1'));
  52                     }
  53                 },
  54                 style: {
  55                     fill: '#38B8BF'
  56                 }
  57             }]
  58         }
  59     });
  60 });