/ext-4.1.0_b3/examples/charts/BarRenderer.js

https://bitbucket.org/srogerf/javascript · JavaScript · 72 lines · 70 code · 1 blank · 1 comment · 0 complexity · 0ac8c416878dfbcd207efb24e9e8ed1e MD5 · raw file

  1. Ext.require('Ext.chart.*');
  2. Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
  3. Ext.onReady(function () {
  4. var win = Ext.create('Ext.Window', {
  5. width: 800,
  6. height: 600,
  7. minHeight: 400,
  8. minWidth: 550,
  9. hidden: false,
  10. maximizable: true,
  11. title: 'Bar Renderer',
  12. renderTo: Ext.getBody(),
  13. layout: 'fit',
  14. tbar: [{
  15. text: 'Reload Data',
  16. handler: function() {
  17. store1.loadData(generateData());
  18. }
  19. }],
  20. items: {
  21. xtype: 'chart',
  22. animate: true,
  23. style: 'background:#fff',
  24. shadow: false,
  25. store: store1,
  26. axes: [{
  27. type: 'Numeric',
  28. position: 'bottom',
  29. fields: ['data1'],
  30. label: {
  31. renderer: Ext.util.Format.numberRenderer('0,0')
  32. },
  33. title: 'Number of Hits',
  34. minimum: 0
  35. }, {
  36. type: 'Category',
  37. position: 'left',
  38. fields: ['name'],
  39. title: 'Month of the Year'
  40. }],
  41. series: [{
  42. type: 'bar',
  43. axis: 'bottom',
  44. label: {
  45. display: 'insideEnd',
  46. field: 'data1',
  47. renderer: Ext.util.Format.numberRenderer('0'),
  48. orientation: 'horizontal',
  49. color: '#333',
  50. 'text-anchor': 'middle',
  51. contrast: true
  52. },
  53. xField: 'name',
  54. yField: ['data1'],
  55. //color renderer
  56. renderer: function(sprite, record, attr, index, store) {
  57. var fieldValue = Math.random() * 20 + 10;
  58. var value = (record.get('data1') >> 0) % 5;
  59. var color = ['rgb(213, 70, 121)',
  60. 'rgb(44, 153, 201)',
  61. 'rgb(146, 6, 157)',
  62. 'rgb(49, 149, 0)',
  63. 'rgb(249, 153, 0)'][value];
  64. return Ext.apply(attr, {
  65. fill: color
  66. });
  67. }
  68. }]
  69. }
  70. });
  71. });