Numeric.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  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-axis-Numeric'>/**
  19. </span> * @class Ext.chart.axis.Numeric
  20. *
  21. * An axis to handle numeric values. This axis is used for quantitative data as
  22. * opposed to the category axis. You can set mininum and maximum values to the
  23. * axis so that the values are bound to that. If no values are set, then the
  24. * scale will auto-adjust to the values.
  25. *
  26. * @example
  27. * var store = Ext.create('Ext.data.JsonStore', {
  28. * fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
  29. * data: [
  30. * {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
  31. * {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
  32. * {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
  33. * {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
  34. * {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
  35. * ]
  36. * });
  37. *
  38. * Ext.create('Ext.chart.Chart', {
  39. * renderTo: Ext.getBody(),
  40. * width: 500,
  41. * height: 300,
  42. * store: store,
  43. * axes: [{
  44. * type: 'Numeric',
  45. * grid: true,
  46. * position: 'left',
  47. * fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
  48. * title: 'Sample Values',
  49. * grid: {
  50. * odd: {
  51. * opacity: 1,
  52. * fill: '#ddd',
  53. * stroke: '#bbb',
  54. * 'stroke-width': 1
  55. * }
  56. * },
  57. * minimum: 0,
  58. * adjustMinimumByMajorUnit: 0
  59. * }, {
  60. * type: 'Category',
  61. * position: 'bottom',
  62. * fields: ['name'],
  63. * title: 'Sample Metrics',
  64. * grid: true,
  65. * label: {
  66. * rotate: {
  67. * degrees: 315
  68. * }
  69. * }
  70. * }],
  71. * series: [{
  72. * type: 'area',
  73. * highlight: false,
  74. * axis: 'left',
  75. * xField: 'name',
  76. * yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
  77. * style: {
  78. * opacity: 0.93
  79. * }
  80. * }]
  81. * });
  82. *
  83. * In this example we create an axis of Numeric type. We set a minimum value so that
  84. * even if all series have values greater than zero, the grid starts at zero. We bind
  85. * the axis onto the left part of the surface by setting `position` to `left`.
  86. * We bind three different store fields to this axis by setting `fields` to an array.
  87. * We set the title of the axis to _Number of Hits_ by using the `title` property.
  88. * We use a `grid` configuration to set odd background rows to a certain style and even rows
  89. * to be transparent/ignored.
  90. */
  91. Ext.define('Ext.chart.axis.Numeric', {
  92. /* Begin Definitions */
  93. extend: 'Ext.chart.axis.Axis',
  94. alternateClassName: 'Ext.chart.NumericAxis',
  95. /* End Definitions */
  96. type: 'numeric',
  97. alias: 'axis.numeric',
  98. uses: ['Ext.data.Store'],
  99. constructor: function(config) {
  100. var me = this,
  101. hasLabel = !!(config.label &amp;&amp; config.label.renderer),
  102. label;
  103. me.callParent([config]);
  104. label = me.label;
  105. if (config.constrain == null) {
  106. me.constrain = (config.minimum != null &amp;&amp; config.maximum != null);
  107. }
  108. if (!hasLabel) {
  109. label.renderer = function(v) {
  110. return me.roundToDecimal(v, me.decimals);
  111. };
  112. }
  113. },
  114. roundToDecimal: function(v, dec) {
  115. var val = Math.pow(10, dec || 0);
  116. return Math.round(v * val) / val;
  117. },
  118. <span id='Ext-chart-axis-Numeric-property-minimum'> /**
  119. </span> * The minimum value drawn by the axis. If not set explicitly, the axis
  120. * minimum will be calculated automatically.
  121. *
  122. * @property {Number} minimum
  123. */
  124. minimum: NaN,
  125. <span id='Ext-chart-axis-Numeric-property-maximum'> /**
  126. </span> * The maximum value drawn by the axis. If not set explicitly, the axis
  127. * maximum will be calculated automatically.
  128. *
  129. * @property {Number} maximum
  130. */
  131. maximum: NaN,
  132. <span id='Ext-chart-axis-Numeric-cfg-constrain'> /**
  133. </span> * @cfg {Boolean} constrain
  134. * If true, the values of the chart will be rendered only if they belong between minimum and maximum
  135. * If false, all values of the chart will be rendered, regardless of whether they belong between minimum and maximum or not
  136. * Default's true if maximum and minimum is specified.
  137. */
  138. constrain: true,
  139. <span id='Ext-chart-axis-Numeric-property-decimals'> /**
  140. </span> * The number of decimals to round the value to.
  141. *
  142. * @property {Number} decimals
  143. */
  144. decimals: 2,
  145. <span id='Ext-chart-axis-Numeric-property-scale'> /**
  146. </span> * The scaling algorithm to use on this axis. May be &quot;linear&quot; or
  147. * &quot;logarithmic&quot;. Currently only linear scale is implemented.
  148. *
  149. * @property {String} scale
  150. * @private
  151. */
  152. scale: &quot;linear&quot;,
  153. // @private constrains to datapoints between minimum and maximum only
  154. doConstrain: function() {
  155. var me = this,
  156. store = me.chart.store,
  157. items = store.data.items,
  158. d, dLen, record,
  159. series = me.chart.series.items,
  160. fields = me.fields,
  161. ln = fields.length,
  162. range = me.calcEnds(),
  163. min = range.from, max = range.to, i, l,
  164. useAcum = false,
  165. value, data = [],
  166. addRecord;
  167. for (i = 0, l = series.length; i &lt; l; i++) {
  168. if (series[i].type === 'bar' &amp;&amp; series[i].stacked) {
  169. // Do not constrain stacked bar chart.
  170. return;
  171. }
  172. }
  173. for (d = 0, dLen = items.length; d &lt; dLen; d++) {
  174. addRecord = true;
  175. record = items[d];
  176. for (i = 0; i &lt; ln; i++) {
  177. value = record.get(fields[i]);
  178. if (+value &lt; +min) {
  179. addRecord = false;
  180. break;
  181. }
  182. if (+value &gt; +max) {
  183. addRecord = false;
  184. break;
  185. }
  186. }
  187. if (addRecord) {
  188. data.push(record);
  189. }
  190. }
  191. me.chart.substore = Ext.create('Ext.data.Store', { model: store.model });
  192. me.chart.substore.loadData(data); // data records must be loaded (not passed as config above because it's not json)
  193. },
  194. <span id='Ext-chart-axis-Numeric-property-position'> /**
  195. </span> * Indicates the position of the axis relative to the chart
  196. *
  197. * @property {String} position
  198. */
  199. position: 'left',
  200. <span id='Ext-chart-axis-Numeric-property-adjustMaximumByMajorUnit'> /**
  201. </span> * Indicates whether to extend maximum beyond data's maximum to the nearest
  202. * majorUnit.
  203. *
  204. * @property {Boolean} adjustMaximumByMajorUnit
  205. */
  206. adjustMaximumByMajorUnit: false,
  207. <span id='Ext-chart-axis-Numeric-property-adjustMinimumByMajorUnit'> /**
  208. </span> * Indicates whether to extend the minimum beyond data's minimum to the
  209. * nearest majorUnit.
  210. *
  211. * @property {Boolean} adjustMinimumByMajorUnit
  212. */
  213. adjustMinimumByMajorUnit: false,
  214. // applying constraint
  215. processView: function() {
  216. var me = this,
  217. constrain = me.constrain;
  218. if (constrain) {
  219. me.doConstrain();
  220. }
  221. },
  222. // @private apply data.
  223. applyData: function() {
  224. this.callParent();
  225. return this.calcEnds();
  226. }
  227. });
  228. </pre>
  229. </body>
  230. </html>