examples/charts/Pie.js

   1 Ext.require('Ext.chart.*');
   2 Ext.require('Ext.layout.container.Fit');
   3
   4 Ext.onReady(function () {
   5     store1.loadData(generateData(6, 20));
   6
   7     var donut = false,
   8         panel1 = Ext.create('widget.panel', {
   9         width: 800,
  10         height: 600,
  11         title: 'Semester Trends',
  12         renderTo: Ext.getBody(),
  13         layout: 'fit',
  14         tbar: [{
  15             text: 'Reload Data',
  16             handler: function() {
  17                 store1.loadData(generateData(6, 20));
  18             }
  19         }, {
  20             enableToggle: true,
  21             pressed: false,
  22             text: 'Donut',
  23             toggleHandler: function(btn, pressed) {
  24                 var chart = Ext.getCmp('chartCmp');
  25                 chart.series.first().donut = pressed ? 35 : false;
  26                 chart.refresh();
  27             }
  28         }],
  29         items: {
  30             xtype: 'chart',
  31             id: 'chartCmp',
  32             animate: true,
  33             store: store1,
  34             shadow: true,
  35             legend: {
  36                 position: 'right'
  37             },
  38             insetPadding: 60,
  39             theme: 'Base:gradients',
  40             series: [{
  41                 type: 'pie',
  42                 field: 'data1',
  43                 showInLegend: true,
  44                 donut: donut,
  45                 tips: {
  46                   trackMouse: true,
  47                   width: 140,
  48                   height: 28,
  49                   renderer: function(storeItem, item) {
  50                     //calculate percentage.
  51                     var total = 0;
  52                     store1.each(function(rec) {
  53                         total += rec.get('data1');
  54                     });
  55                     this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
  56                   }
  57                 },
  58                 highlight: {
  59                   segment: {
  60                     margin: 20
  61                   }
  62                 },
  63                 label: {
  64                     field: 'name',
  65                     display: 'rotate',
  66                     contrast: true,
  67                     font: '18px Arial'
  68                 }
  69             }]
  70         }
  71     });
  72 });