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