Monday, September 7, 2015

Sample ExtJs Column Chart

In this column chart, I have used the same model, store and require section that I used in my previous sample Sample ExtJS Line Chart. So check it out before continue this sample.

Chart Component
  1. Ext.create('Ext.chart.Chart', {
  2. renderTo: Ext.getBody(),
  3. width: 400,
  4. height: 300,
  5. theme: 'Green',
  6. store: store,
  7. animate: true
  8. axes: [
  9. {
  10. title: 'Score',
  11. type: 'Numeric',
  12. position: 'left',
  13. fields: ['score'],
  14. minimum: 0,
  15. maximum: 400
  16. },
  17. {
  18. title: 'Over',
  19. type: 'Numeric',
  20. position: 'bottom',
  21. fields: ['over']
  22. }
  23. ],
  24. series: [
  25. {
  26. type: 'column',
  27. axis: 'left',
  28. xField: 'over',
  29. yField: 'score'
  30. }
  31. ]
  32. });
Result
Demo Click here to view in Jsfiddle

No comments:

Post a Comment