PageRenderTime 22ms CodeModel.GetById 13ms app.highlight 6ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.0.7/docs/source/Column4.html

https://bitbucket.org/srogerf/javascript
HTML | 124 lines | 116 code | 8 blank | 0 comment | 0 complexity | 553ef0f128b0a578a27bf73a7a3b722d MD5 | raw file
  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 */
 96Ext.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>