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

   1 /**
   2  * This example shows how to create a 3D Pie chart.
   3  *
   4  * The example makes use of the 'rotate' interaction. To use it, click or tap and then
   5  * drag anywhere on the chart.
   6  */
   7 Ext.define('KitchenSink.view.charts.pie.Pie3D', {
   8     extend: 'Ext.Panel',
   9     xtype: 'pie-3d',
  10     controller: 'pie-3d',
  11     requires: [
  12         'Ext.chart.PolarChart'
  13     ],
  14     // <example>
  15     // Content between example tags is omitted from code preview.
  16     otherContent: [{
  17         type: 'Controller',
  18         path: 'classic/samples/view/charts/pie/Pie3DController.js'
  19     }, {
  20         type: 'Store',
  21         path: 'classic/samples/store/Pie.js'
  22     }],
  23     // </example>
  24
  25     layout: 'vbox',
  26     width: 650,
  27
  28     tbar: [
  29         '->',
  30         {
  31             xtype: 'segmentedbutton',
  32             defaults: {
  33                 width: 100
  34             },
  35             items: [{
  36                 text: 'Opaque',
  37                 pressed: true
  38             }, {
  39                 text: 'Translucent'
  40             }],
  41             listeners: {
  42                 toggle: 'onStyleToggle'
  43             }
  44         },
  45         {
  46             text: 'Switch Theme',
  47             handler: 'onThemeSwitch'
  48         }
  49     ],
  50
  51     items: [{
  52         xtype: 'polar',
  53         reference: 'chart',
  54         innerPadding: 40,
  55         width: '100%',
  56         height: 500,
  57         store: {
  58             type: 'device-market-share'
  59         },
  60         theme: 'Muted',
  61         interactions: ['itemhighlight', 'rotatePie3d'],
  62         legend: {
  63             docked: 'bottom'
  64         },
  65         series: [
  66             {
  67                 type: 'pie3d',
  68                 angleField: 'data1',
  69                 donut: 30,
  70                 distortion: 0.6,
  71                 highlight: {
  72                     margin: 40
  73                 },
  74                 label: {
  75                     field: 'os'
  76                 },
  77                 tooltip: {
  78                     trackMouse: true,
  79                     renderer: 'onSeriesTooltipRender'
  80                 }
  81             }
  82         ]
  83     }, {
  84         xtype: 'container',
  85         width: '100%',
  86         padding: 10,
  87         layout: {
  88             type: 'hbox',
  89             pack: 'center'
  90         },
  91         items: {
  92             xtype: 'form',
  93             defaults: {
  94                 labelAlign: 'right',
  95                 labelPad: 15,
  96                 width: 400
  97             },
  98             items: [{
  99                 xtype: 'sliderfield',
 100                 fieldLabel: 'Thickness',
 101                 value: 35,
 102                 minValue: 20,
 103                 maxValue: 70,
 104                 listeners: {
 105                     change: 'onThicknessChange',
 106                     dragstart: 'onSliderDragStart',
 107                     dragend: 'onSliderDragEnd'
 108                 }
 109             }, {
 110                 xtype: 'sliderfield',
 111                 fieldLabel: 'Distortion',
 112                 value: 50,
 113                 minValue: 35,
 114                 maxValue: 65,
 115                 listeners: {
 116                     change: 'onDistortionChange',
 117                     dragstart: 'onSliderDragStart',
 118                     dragend: 'onSliderDragEnd'
 119                 }
 120             }, {
 121                 xtype: 'sliderfield',
 122                 fieldLabel: 'Bevel',
 123                 value: 5,
 124                 maxValue: 15,
 125                 listeners: {
 126                     change: 'onBevelChange',
 127                     dragstart: 'onSliderDragStart',
 128                     dragend: 'onSliderDragEnd'
 129                 }
 130             }, {
 131                 xtype: 'sliderfield',
 132                 fieldLabel: 'Donut',
 133                 value: 30,
 134                 maxValue: 50,
 135                 listeners: {
 136                     change: 'onDonutChange',
 137                     dragstart: 'onSliderDragStart',
 138                     dragend: 'onSliderDragEnd'
 139                 }
 140             }, {
 141                 xtype: 'sliderfield',
 142                 fieldLabel: 'Color Spread',
 143                 value: 1,
 144                 maxValue: 2,
 145                 increment: 0.05,
 146                 decimalPrecision: 2,
 147                 listeners: {
 148                     change: 'onColorSpreadChange',
 149                     dragstart: 'onSliderDragStart',
 150                     dragend: 'onSliderDragEnd'
 151                 }
 152             }]
 153         }
 154     }]
 155 });