<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The source code</title> <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="../resources/prettify/prettify.js"></script> <style type="text/css"> .highlight { display: block; background-color: #ddd; } </style> <script type="text/javascript"> function highlight() { document.getElementById(location.hash.replace(/#/, "")).className = "highlight"; } </script> </head> <body onload="prettyPrint(); highlight();"> <pre class="prettyprint lang-js"><span id='Ext-chart-series-Column'>/** </span> * @class Ext.chart.series.Column * * 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 categories that can * show some progression (or regression) in the data set. As with all other series, the Column Series * must be appended in the *series* Chart array configuration. See the Chart documentation for more * information. A typical configuration object for the column series could be: * * @example * var store = Ext.create('Ext.data.JsonStore', { * fields: ['name', 'data'], * data: [ * { 'name': 'metric one', 'data':10 }, * { 'name': 'metric two', 'data': 7 }, * { 'name': 'metric three', 'data': 5 }, * { 'name': 'metric four', 'data': 2 }, * { 'name': 'metric five', 'data':27 } * ] * }); * * Ext.create('Ext.chart.Chart', { * renderTo: Ext.getBody(), * width: 500, * height: 300, * animate: true, * store: store, * axes: [ * { * type: 'Numeric', * position: 'left', * fields: ['data'], * label: { * renderer: Ext.util.Format.numberRenderer('0,0') * }, * title: 'Sample Values', * grid: true, * minimum: 0 * }, * { * type: 'Category', * position: 'bottom', * fields: ['name'], * title: 'Sample Metrics' * } * ], * series: [ * { * type: 'column', * axis: 'left', * highlight: true, * tips: { * trackMouse: true, * width: 140, * height: 28, * renderer: function(storeItem, item) { * this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $'); * } * }, * label: { * display: 'insideEnd', * 'text-anchor': 'middle', * field: 'data', * renderer: Ext.util.Format.numberRenderer('0'), * orientation: 'vertical', * color: '#333' * }, * xField: 'name', * yField: 'data' * } * ] * }); * * 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 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. */ Ext.define('Ext.chart.series.Column', { /* Begin Definitions */ alternateClassName: ['Ext.chart.ColumnSeries', 'Ext.chart.ColumnChart', 'Ext.chart.StackedColumnChart'], extend: 'Ext.chart.series.Bar', /* End Definitions */ type: 'column', alias: 'series.column', column: true, <span id='Ext-chart-series-Column-cfg-xPadding'> /** </span> * @cfg {Number} xPadding * Padding between the left/right axes and the bars */ xPadding: 10, <span id='Ext-chart-series-Column-cfg-yPadding'> /** </span> * @cfg {Number} yPadding * Padding between the top/bottom axes and the bars */ yPadding: 0 });</pre> </body> </html>