examples/charts/Area.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
   3
   4 Ext.onReady(function () {
   5     var win = Ext.create('Ext.Window', {
   6         width: 800,
   7         height: 600,
   8         hidden: false,
   9         shadow: false,
  10         maximizable: true,
  11         title: 'Area Chart',
  12         renderTo: Ext.getBody(),
  13         layout: 'fit',
  14         tbar: [{
  15             text: 'Reload Data',
  16             handler: function() {
  17                 store1.loadData(generateData());
  18             }
  19         }, {
  20             enableToggle: true,
  21             pressed: true,
  22             text: 'Animate',
  23             toggleHandler: function(btn, pressed) {
  24                 var chart = Ext.getCmp('chartCmp');
  25                 chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
  26             }
  27         }],
  28         items: {
  29             id: 'chartCmp',
  30             xtype: 'chart',
  31             style: 'background:#fff',
  32             animate: true,
  33             store: store1,
  34             legend: {
  35                 position: 'bottom'
  36             },
  37             axes: [{
  38                 type: 'Numeric',
  39                 grid: true,
  40                 position: 'left',
  41                 fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
  42                 title: 'Number of Hits',
  43                 grid: {
  44                     odd: {
  45                         opacity: 1,
  46                         fill: '#ddd',
  47                         stroke: '#bbb',
  48                         'stroke-width': 1
  49                     }
  50                 },
  51                 minimum: 0,
  52                 adjustMinimumByMajorUnit: 0
  53             }, {
  54                 type: 'Category',
  55                 position: 'bottom',
  56                 fields: ['name'],
  57                 title: 'Month of the Year',
  58                 grid: true,
  59                 label: {
  60                     rotate: {
  61                         degrees: 315
  62                     }
  63                 }
  64             }],
  65             series: [{
  66                 type: 'area',
  67                 highlight: false,
  68                 axis: 'left',
  69                 xField: 'name',
  70                 yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
  71                 style: {
  72                     opacity: 0.93
  73                 }
  74             }]
  75         }
  76     });
  77 });