docs/source/Column4.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-chart-series-Column'>/**
  19 </span> * @class Ext.chart.series.Column
  20  * @extends Ext.chart.series.Bar
  21  *
  22  * Creates a Column Chart. Much of the methods are inherited from Bar. A Column Chart is a useful
  23  * visualization technique to display quantitative information for different categories that can
  24  * show some progression (or regression) in the data set. As with all other series, the Column Series
  25  * must be appended in the *series* Chart array configuration. See the Chart documentation for more
  26  * information. A typical configuration object for the column series could be:
  27  *
  28  *     @example
  29  *     var store = Ext.create('Ext.data.JsonStore', {
  30  *         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  31  *         data: [
  32  *             { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
  33  *             { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
  34  *             { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
  35  *             { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
  36  *             { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
  37  *         ]
  38  *     });
  39  *
  40  *     Ext.create('Ext.chart.Chart', {
  41  *         renderTo: Ext.getBody(),
  42  *         width: 500,
  43  *         height: 300,
  44  *         animate: true,
  45  *         store: store,
  46  *         axes: [
  47  *             {
  48  *                 type: 'Numeric',
  49  *                 position: 'left',
  50  *                 fields: ['data1'],
  51  *                 label: {
  52  *                     renderer: Ext.util.Format.numberRenderer('0,0')
  53  *                 },
  54  *                 title: 'Sample Values',
  55  *                 grid: true,
  56  *                 minimum: 0
  57  *             },
  58  *             {
  59  *                 type: 'Category',
  60  *                 position: 'bottom',
  61  *                 fields: ['name'],
  62  *                 title: 'Sample Metrics'
  63  *             }
  64  *         ],
  65  *         series: [
  66  *             {
  67  *                 type: 'column',
  68  *                 axis: 'left',
  69  *                 highlight: true,
  70  *                 tips: {
  71  *                   trackMouse: true,
  72  *                   width: 140,
  73  *                   height: 28,
  74  *                   renderer: function(storeItem, item) {
  75  *                     this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
  76  *                   }
  77  *                 },
  78  *                 label: {
  79  *                   display: 'insideEnd',
  80  *                   'text-anchor': 'middle',
  81  *                     field: 'data1',
  82  *                     renderer: Ext.util.Format.numberRenderer('0'),
  83  *                     orientation: 'vertical',
  84  *                     color: '#333'
  85  *                 },
  86  *                 xField: 'name',
  87  *                 yField: 'data1'
  88  *             }
  89  *         ]
  90  *     });
  91  *
  92  * In this configuration we set `column` as the series type, bind the values of the bars to the bottom axis,
  93  * set `highlight` to true so that bars are smoothly highlighted when hovered and bind the `xField` or category
  94  * field to the data store `name` property and the `yField` as the data1 property of a store element.
  95  */
  96 Ext.define('Ext.chart.series.Column', {
  97
  98     /* Begin Definitions */
  99
 100     alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'],
 101
 102     extend: 'Ext.chart.series.Bar',
 103
 104     /* End Definitions */
 105
 106     type: 'column',
 107     alias: 'series.column',
 108
 109     column: true,
 110
 111 <span id='Ext-chart-series-Column-cfg-xPadding'>    /**
 112 </span>     * @cfg {Number} xPadding
 113      * Padding between the left/right axes and the bars
 114      */
 115     xPadding: 10,
 116
 117 <span id='Ext-chart-series-Column-cfg-yPadding'>    /**
 118 </span>     * @cfg {Number} yPadding
 119      * Padding between the top/bottom axes and the bars
 120      */
 121     yPadding: 0
 122 });</pre>
 123 </body>
 124 </html>