extjs/examples/kitchensink/classic/samples/view/charts/bar3d/Stacked.js

   1 /**
   2  * Stacked 3D bars are 3D bar charts where categories are stacked next to each
   3  * other. This is typically done to visually represent the total of all categories for a
   4  * given period or value.
   5  */
   6 Ext.define('KitchenSink.view.charts.bar3d.Stacked', {
   7     extend: 'Ext.Panel',
   8     xtype: 'bar-stacked-3d',
   9     controller: 'bar-stacked-3d',
  10
  11     // <example>
  12     // Content between example tags is omitted from code preview.
  13     bodyStyle: 'background: transparent !important',
  14     layout: {
  15         type: 'vbox',
  16         pack: 'center'
  17     },
  18     otherContent: [{
  19         type: 'Controller',
  20         path: 'classic/samples/view/charts/bar3d/StackedController.js'
  21     }, {
  22         type: 'Store',
  23         path: 'classic/samples/store/Browsers.js'
  24     }],
  25     // </example>
  26     width: 650,
  27
  28     initComponent: function() {
  29         var me = this;
  30         //<example>
  31         me.tbar = [
  32             '->',
  33             {
  34                 text: 'Preview',
  35                 handler: 'onPreview'
  36             }
  37         ];
  38         //</example>
  39         me.items = [{
  40             xtype: 'cartesian',
  41             reference: 'chart',
  42             theme: 'muted',
  43             width: '100%',
  44             height: 500,
  45             legend: {
  46                 docked: 'right'
  47             },
  48             store: {type: 'browsers'},
  49             insetPadding: 40,
  50             flipXY: true,
  51             animation: Ext.isIE8 ? false : {
  52                 easing: 'backOut',
  53                 duration: 500
  54             },
  55             sprites: [{
  56                 type: 'text',
  57                 text: 'Bar Charts - Stacked Bars',
  58                 fontSize: 22,
  59                 width: 100,
  60                 height: 30,
  61                 x: 40, // the sprite x position
  62                 y: 20  // the sprite y position
  63             }, {
  64                 type: 'text',
  65                 text: 'Data: Browser Stats 2012',
  66                 fontSize: 10,
  67                 x: 12,
  68                 y: 480
  69             }, {
  70                 type: 'text',
  71                 text: 'Source: http://www.w3schools.com/',
  72                 fontSize: 10,
  73                 x: 12,
  74                 y: 495
  75             }],
  76             axes: [{
  77                 type: 'numeric3d',
  78                 position: 'bottom',
  79                 adjustByMajorUnit: true,
  80                 grid: true,
  81                 renderer: 'onAxisLabelRender',
  82                 minimum: 0
  83             }, {
  84                 type: 'category3d',
  85                 position: 'left',
  86                 grid: true
  87             }],
  88             series: [{
  89                 type: 'bar3d',
  90                 title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ],
  91                 xField: 'month',
  92                 yField: [ 'data1', 'data2', 'data3', 'data4' ],
  93                 stacked: true,
  94                 highlight: true,
  95                 tooltip: {
  96                     trackMouse: true,
  97                     renderer: 'onSeriesTooltipRender'
  98                 }
  99             }]
 100         //<example>
 101         }, {
 102             style: 'margin-top: 10px;',
 103             xtype: 'gridpanel',
 104             columns : {
 105                 defaults: {
 106                     sortable: false,
 107                     menuDisabled: true,
 108                     renderer: 'onColumnRender'
 109                 },
 110                 items: [
 111                     { text: 'Month', dataIndex: 'month', renderer: Ext.identityFn },
 112                     { text: 'IE', dataIndex: 'data1' },
 113                     { text: 'Firefox', dataIndex: 'data2' },
 114                     { text: 'Chrome', dataIndex: 'data3' },
 115                     { text: 'Safari', dataIndex: 'data4' }
 116                 ]
 117             },
 118             store: {type: 'browsers'},
 119             width: '100%'
 120         //</example>
 121         }];
 122
 123         this.callParent();
 124     }
 125 });