extjs/examples/kitchensink/classic/samples/view/charts/pie/Donut.js

   1 /**
   2  * A basic donut chart functions precisely like a pie chart. The only difference is that
   3  * the center is blank. This is typically done to increase the readability of the data
   4  * labels that may be around. The example makes use of two interactions: 'itemhighlight'
   5  * and 'rotate'. To use the first one, hover over or tap on a pie sector. To use the
   6  * second one, click or tap and then drag anywhere on the chart.
   7  */
   8 Ext.define('KitchenSink.view.charts.pie.Donut', {
   9     extend: 'Ext.Panel',
  10     xtype: 'pie-donut',
  11     controller: 'pie-basic',
  12
  13     //<example>
  14     // Content between example tags is omitted from code preview.
  15     otherContent: [{
  16         type: 'Controller',
  17         path: 'classic/samples/view/charts/pie/BasicController.js'
  18     }, {
  19         type: 'Store',
  20         path: 'app/store/MobileOS.js'
  21     }],
  22     bodyStyle: 'background: transparent !important',
  23     layout: {
  24         type: 'vbox',
  25         pack: 'center'
  26     },
  27     //</example>
  28     width: 650,
  29
  30     tbar: [
  31         '->',
  32         {
  33             text: 'Preview',
  34             handler: 'onPreview'
  35         }
  36     ],
  37
  38     items: [{
  39         xtype: 'polar',
  40         reference: 'chart',
  41         captions: {
  42             title: 'Donut Charts - Basic',
  43             credits: {
  44                 text: 'Data: IDC Predictions - 2017\n' +
  45                 'Source: Internet',
  46                 align: 'left'
  47             }
  48         },
  49         width: '100%',
  50         height: 500,
  51         innerPadding: 20,
  52         store: {
  53             type: 'mobile-os'
  54         },
  55         legend: {
  56             docked: 'bottom'
  57         },
  58         interactions: ['rotate', 'itemhighlight'],
  59         series: [{
  60             type: 'pie',
  61             angleField: 'data1',
  62             donut: 50,
  63             label: {
  64                 field: 'os',
  65                 display: 'outside'
  66             },
  67             highlight: true,
  68             tooltip: {
  69                 trackMouse: true,
  70                 renderer: 'onSeriesTooltipRender'
  71             }
  72         }]
  73         //<example>
  74     }]
  75
  76 });