examples/charts/RadarFill.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     store1.loadData(generateData());
   6
   7     var win = Ext.create('Ext.Window', {
   8         width: 800,
   9         height: 600,
  10         hidden: false,
  11         shadow: false,
  12         maximizable: true,
  13         style: 'overflow: hidden;',
  14         title: 'Filled Radar Chart',
  15         renderTo: Ext.getBody(),
  16         layout: 'fit',
  17         tbar: [{
  18             text: 'Reload Data',
  19             handler: function() {
  20                 store1.loadData(generateData());
  21             }
  22         }, {
  23             enableToggle: true,
  24             pressed: true,
  25             text: 'Animate',
  26             toggleHandler: function(btn, pressed) {
  27                 var chart = Ext.getCmp('chartCmp');
  28                 chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
  29             }
  30         }],
  31         items: {
  32             id: 'chartCmp',
  33             xtype: 'chart',
  34             style: 'background:#fff',
  35             theme: 'Category2',
  36             insetPadding: 20,
  37             animate: true,
  38             store: store1,
  39             legend: {
  40                 position: 'right'
  41             },
  42             axes: [{
  43                 type: 'Radial',
  44                 position: 'radial',
  45                 label: {
  46                     display: true
  47                 }
  48             }],
  49             series: [{
  50                 showInLegend: true,
  51                 type: 'radar',
  52                 xField: 'name',
  53                 yField: 'data1',
  54                 style: {
  55                     opacity: 0.4
  56                 }
  57             },{
  58                 showInLegend: true,
  59                 type: 'radar',
  60                 xField: 'name',
  61                 yField: 'data2',
  62                 style: {
  63                     opacity: 0.4
  64                 }
  65             },{
  66                 showInLegend: true,
  67                 type: 'radar',
  68                 xField: 'name',
  69                 yField: 'data3',
  70                 style: {
  71                     opacity: 0.4
  72                 }
  73             }]
  74         }
  75     });
  76 });