examples/charts/Radar.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         style: 'overflow: hidden;',
  12         title: 'Radar Chart',
  13         renderTo: Ext.getBody(),
  14         layout: 'fit',
  15         tbar: [{
  16             text: 'Reload Data',
  17             handler: function() {
  18                 store1.loadData(generateData());
  19             }
  20         }, {
  21             enableToggle: true,
  22             pressed: true,
  23             text: 'Animate',
  24             toggleHandler: function(btn, pressed) {
  25                 var chart = Ext.getCmp('chartCmp');
  26                 chart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
  27             }
  28         }],
  29         items: {
  30             id: 'chartCmp',
  31             xtype: 'chart',
  32             style: 'background:#fff',
  33             theme: 'Category2',
  34             animate: true,
  35             store: store1,
  36             insetPadding: 20,
  37             legend: {
  38                 position: 'right'
  39             },
  40             axes: [{
  41                 type: 'Radial',
  42                 position: 'radial',
  43                 label: {
  44                     display: true
  45                 }
  46             }],
  47             series: [{
  48                 type: 'radar',
  49                 xField: 'name',
  50                 yField: 'data1',
  51                 showInLegend: true,
  52                 showMarkers: true,
  53                 markerConfig: {
  54                     radius: 5,
  55                     size: 5
  56                 },
  57                 style: {
  58                     'stroke-width': 2,
  59                     fill: 'none'
  60                 }
  61             },{
  62                 type: 'radar',
  63                 xField: 'name',
  64                 yField: 'data2',
  65                 showInLegend: true,
  66                 showMarkers: true,
  67                 markerConfig: {
  68                     radius: 5,
  69                     size: 5
  70                 },
  71                 style: {
  72                     'stroke-width': 2,
  73                     fill: 'none'
  74                 }
  75             },{
  76                 type: 'radar',
  77                 xField: 'name',
  78                 yField: 'data3',
  79                 showMarkers: true,
  80                 showInLegend: true,
  81                 markerConfig: {
  82                     radius: 5,
  83                     size: 5
  84                 },
  85                 style: {
  86                     'stroke-width': 2,
  87                     fill: 'none'
  88                 }
  89             }]
  90         }
  91     });
  92 });