extjs/build/examples/kitchensink/classic/samples/view/charts/bar3d/Basic.js

   1 /**
   2  * A basic 3D bar chart is a chart with horizontal bars of lengths proportional to the
   3  * magnitudes of the data it represents. Basic 3D bars can be used in the same manner as the
   4  * 3D column charts. Categories are typically organized along the vertical axis and values
   5  * along the horizontal axis. Tapping or hovering a bar will highlight it.
   6  */
   7 Ext.define('KitchenSink.view.charts.bar3d.Basic', {
   8     extend: 'Ext.Panel',
   9     xtype: 'bar-basic-3d',
  10     controller: 'bar-basic-3d',
  11
  12     requires: [
  13         'Ext.chart.theme.Muted'
  14     ],
  15
  16     // <example>
  17     // Content between example tags is omitted from code preview.
  18     bodyStyle: 'background: transparent !important',
  19     layout: {
  20         type: 'vbox',
  21         pack: 'center'
  22     },
  23     otherContent: [{
  24         type: 'Controller',
  25         path: 'classic/samples/view/charts/bar3d/BasicController.js'
  26     }, {
  27         type: 'Store',
  28         path: 'classic/samples/store/EconomySectors.js'
  29     }],
  30     // </example>
  31     width: 650,
  32
  33     items: [{
  34         xtype: 'cartesian',
  35         flipXY: true,
  36         reference: 'chart',
  37         width: '100%',
  38         height: 500,
  39         insetPadding: '40 40 30 40',
  40         innerPadding: '3 0 0 0',
  41         theme: {
  42             type: 'muted'
  43         },
  44         store: {
  45             type: 'economy-sectors'
  46         },
  47         animation: {
  48             easing: 'easeOut',
  49             duration: 500
  50         },
  51         interactions: ['itemhighlight'],
  52         axes: [{
  53             type: 'numeric3d',
  54             position: 'bottom',
  55             fields: 'ind',
  56             maximum: 4000000,
  57             majorTickSteps: 10,
  58             renderer: 'onAxisLabelRender',
  59             title: 'Billions of USD',
  60             grid: {
  61                 odd: {
  62                     fillStyle: 'rgba(245, 245, 245, 1.0)'
  63                 },
  64                 even: {
  65                     fillStyle: 'rgba(255, 255, 255, 1.0)'
  66                 }
  67             }
  68         }, {
  69             type: 'category3d',
  70             position: 'left',
  71             fields: 'country',
  72             label: {
  73                 textAlign: 'right'
  74             },
  75             grid: true
  76         }],
  77         series: [{
  78             type: 'bar3d',
  79             xField: 'country',
  80             yField: 'ind',
  81             style: {
  82                 minGapWidth: 10
  83             },
  84             highlight: true,
  85             label: {
  86                 field: 'ind',
  87                 display: 'insideEnd',
  88                 renderer: 'onSeriesLabelRender'
  89             },
  90             tooltip: {
  91                 trackMouse: true,
  92                 renderer: 'onSeriesTooltipRender'
  93             }
  94         }],
  95         sprites: [{
  96             type: 'text',
  97             text: 'Industry size in major economies (2011)',
  98             fontSize: 22,
  99             width: 100,
 100             height: 30,
 101             x: 40, // the sprite x position
 102             y: 20  // the sprite y position
 103         }, {
 104             type: 'text',
 105             text: 'Source: http://en.wikipedia.org/wiki/List_of_countries_by_GDP_sector_composition',
 106             fontSize: 10,
 107             x: 12,
 108             y: 490
 109         }]
 110     }],
 111
 112     tbar: [
 113         '->',
 114         {
 115             text: 'Preview',
 116             handler: 'onPreview'
 117         }
 118     ]
 119
 120 });