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: 'classic/samples/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         width: '100%',
  42         height: 500,
  43         insetPadding: 50,
  44         innerPadding: 20,
  45         store: {
  46             type: 'mobile-os'
  47         },
  48         legend: {
  49             docked: 'bottom'
  50         },
  51         interactions: ['rotate', 'itemhighlight'],
  52         sprites: [{
  53             type: 'text',
  54             text: 'Donut Charts - Basic',
  55             fontSize: 22,
  56             width: 100,
  57             height: 30,
  58             x: 40, // the sprite x position
  59             y: 20  // the sprite y position
  60         }, {
  61             type: 'text',
  62             text: 'Data: IDC Predictions - 2017',
  63             x: 12,
  64             y: 425
  65         }, {
  66             type: 'text',
  67             text: 'Source: Internet',
  68             x: 12,
  69             y: 440
  70         }],
  71         series: [{
  72             type: 'pie',
  73             angleField: 'data1',
  74             donut: 50,
  75             label: {
  76                 field: 'os',
  77                 display: 'outside'
  78             },
  79             highlight: true,
  80             tooltip: {
  81                 trackMouse: true,
  82                 renderer: 'onSeriesTooltipRender'
  83             }
  84         }]
  85         //<example>
  86     }, {
  87         style: 'padding-top: 10px;',
  88         xtype: 'gridpanel',
  89         columns : {
  90             defaults: {
  91                 sortable: false,
  92                 menuDisabled: true
  93             },
  94             items: [
  95                 { text: 'OS', dataIndex: 'os' },
  96                 { text: 'Market Share', dataIndex: 'data1', width: 150, renderer: 'onDataRender' }
  97             ]
  98         },
  99         store: {
 100             type: 'mobile-os'
 101         },
 102         width: '100%'
 103         //</example>
 104     }]
 105
 106 });