PDA

View Full Version : Bar Charts for Dynamic Number of Series and Dynamic Model Fields



nayudu24
1 Sep 2014, 9:05 PM
We are trying to analyze profits of various companies in various countries using stacked bar charts. Number of countries varies and are obtained from database and plotted on X-axis. Number of companies for which profits to be analyzed is also dynamic depending on data available in database.
For Example :
Store :


var store = Ext.create('Ext.data.JsonStore', { model: 'com.model.MyModel', autoLoad: true, proxy: { idProperty: 'id', totalProperty: 'total', successProperty: 'success', type: 'ajax', url:'profit.action', reader: new Ext.data.JsonReader({ root:'data' }) } });

Model :


Ext.define('com.model.MyModel', { extend: 'Ext.data.Model', fields: [ {name:'countryName',type:'string'}, {name: 'profit', type:'auto'}, {name:'companyName',type :'auto'} ]});

Graph Panel :


{ xtype:'panel', width: 1160, height: 200, renderTo: Ext.getBody(), layout: 'fit', items: { xtype: 'chart', animate: true, shadow: true, store: store, axes: [{ type: 'Numeric', position: 'left', fields: ['profit'], title: 'Profit', grid: true, label: { renderer: function(v) { return String(v); } }, roundToDecimal: false }, { type: 'Category', position: 'bottom', fields: ['countryName'], title: 'Country' }], series: [{ type: 'bar', axis: 'bottom', gutter: 80, highlight: true, column: true, xField: 'countryName', yField: ['profit'], stacked: true, tips: { trackMouse: true, width: 65, height: 28, renderer: function(storeItem, item) { this.setTitle(String(item.value[1])); } } }] } }

Generated JSON:


{ "data": [ { "countryName": "Country1", "company1": "100000000", "company2": "200000000", "company3": "300000000", .. .. .. .. .. .. .. .. .. .. }, { "countryName": "Country2", "company1": "400000000", "company2": "500000000", "company3": "600000000", .. .. .. .. .. .. .. .. .. .. }, { "countryName": "Country3", "company1": "400000000", "company2": "600000000", "company3": "700000000", .. .. .. .. .. .. .. .. .. .. } .. .. .. .. .. .. .. .. .. .. ], "total": 9, "success": true}

Number of countries and number of companies is not fixed. We are getting the correct data into the store and is reflected in the json, but the graph is rendered with X axis but no bars.
Please help
Thanks