extjs/examples/kitchensink/classic/samples/view/charts/column3d/Stacked100.js

   1 /**
   2  * 100% stacked 3D columns are column charts where categories are stacked
   3  * on top of each other. The value of each category is recalculated, so that
   4  * it represents a share of the whole, which is the full stack and is equal
   5  * to 100 by default.
   6  */
   7 Ext.define('KitchenSink.view.charts.column3d.Stacked100', {
   8     extend: 'Ext.Panel',
   9     xtype: 'column-stacked-100-3d',
  10     requires: ['Ext.chart.theme.Muted'],
  11     controller: 'column-stacked-100-3d',
  12     // <example>
  13     // Content between example tags is omitted from code preview.
  14     bodyStyle: 'background: transparent !important',
  15     otherContent: [{
  16         type: 'Controller',
  17         path: 'classic/samples/view/charts/column3d/Stacked100Controller.js'
  18     }, {
  19         type: 'Store',
  20         path: 'classic/samples/store/Browsers.js'
  21     }],
  22     layout: {
  23         type: 'vbox',
  24         pack: 'center'
  25     },
  26     // </example>
  27     width: 650,
  28
  29     items: [{
  30         xtype: 'cartesian',
  31         reference: 'chart',
  32         interactions: ['itemhighlight'],
  33         width: '100%',
  34         height: 460,
  35         insetPadding: 40,
  36         innerPadding: '0 3 0 0',
  37         theme: 'Muted',
  38         legend: {
  39             docked: 'bottom'
  40         },
  41         store: {
  42             type: 'browsers'
  43         },
  44         animation: Ext.isIE8 ? false : {
  45             easing: 'backOut',
  46             duration: 500
  47         },
  48         axes: [{
  49             type: 'numeric3d',
  50             position: 'left',
  51             grid: true,
  52             fields: ['data1', 'data2', 'data3', 'data4', 'other' ],
  53             renderer: 'onAxisLabelRender',
  54             minimum: 0,
  55             maximum: 100
  56         }, {
  57             type: 'category3d',
  58             position: 'bottom',
  59             grid: true,
  60             fields: ['month'],
  61             label: {
  62                 rotate: {
  63                     degrees: -45
  64                 }
  65             }
  66         }],
  67         series: [{
  68             type: 'bar3d',
  69             fullStack: true,
  70             title: [ 'IE', 'Firefox', 'Chrome', 'Safari', 'Others' ],
  71             xField: 'month',
  72             yField: [ 'data1', 'data2', 'data3', 'data4', 'other' ],
  73             stacked: true,
  74             highlightCfg: {
  75                 brightnessFactor: 1.2,
  76                 saturationFactor: 1.5
  77             },
  78             tooltip: {
  79                 trackMouse: true,
  80                 renderer: 'onTooltipRender'
  81             }
  82         }],
  83         sprites: [{
  84             type: 'text',
  85             text: 'Usage share of desktop browsers',
  86             fontSize: 22,
  87             width: 100,
  88             height: 30,
  89             x: 40, // the sprite x position
  90             y: 20  // the sprite y position
  91         }, {
  92             type: 'text',
  93             text: 'Data: Browser Stats 2012',
  94             fontSize: 10,
  95             x: 12,
  96             y: 380
  97         }, {
  98             type: 'text',
  99             text: 'Source: http://www.w3schools.com/',
 100             fontSize: 10,
 101             x: 12,
 102             y: 395
 103         }]
 104     }],
 105
 106     tbar: [
 107         '->',
 108         {
 109             text: 'Preview',
 110             handler: 'onPreview'
 111         }
 112     ]
 113 });