PDA

View Full Version : How to drill down a chart in ExtJs



Jeet Chatterjee
20 May 2013, 8:08 AM
This is my sample application,where i have one barChart and one radar and four pie charts.I have to drill down the barChart.I have previously developer an application where i did not use MVC and there i was able to drill-down the bar.But now i am using EXTJS MVC i can not understand where i should put the drill down code.. This is my previous barChart without MVC ..



window.weekWiseData = function(n, floor){ var data = [],i; var weeks = ['Week1','Week2','Week3','Week4']; floor = (!floor && floor !== 0)? 20 : floor; for (i = 0; i < (n || 4); i++) { data.push({ name: weeks[i], data1: Math.floor(Math.max((Math.random() * 100), floor)), data2: Math.floor(Math.max((Math.random() * 100), floor)), data3: Math.floor(Math.max((Math.random() * 100), floor)), data4: Math.floor(Math.max((Math.random() * 100), floor)), data5: Math.floor(Math.max((Math.random() * 100), floor)), data6: Math.floor(Math.max((Math.random() * 100), floor)), data7: Math.floor(Math.max((Math.random() * 100), floor)), data8: Math.floor(Math.max((Math.random() * 100), floor)), data9: Math.floor(Math.max((Math.random() * 100), floor)) }); } return data;};var barWeekData;window.dayWiseData = function(n, floor){ var data = [],i; floor = (!floor && floor !== 0)? 20 : floor; for (i = 0; i < (n || 12); i++) { data.push({ name: Ext.Date.dayNames[i % 7], data1: Math.floor(Math.max((Math.random() * 100), floor)), data2: Math.floor(Math.max((Math.random() * 100), floor)), data3: Math.floor(Math.max((Math.random() * 100), floor)), data4: Math.floor(Math.max((Math.random() * 100), floor)), data5: Math.floor(Math.max((Math.random() * 100), floor)), data6: Math.floor(Math.max((Math.random() * 100), floor)), data7: Math.floor(Math.max((Math.random() * 100), floor)), data8: Math.floor(Math.max((Math.random() * 100), floor)), data9: Math.floor(Math.max((Math.random() * 100), floor)) }); } return data;};var barDayData;window.generateData = function(n, floor) {var data = [], i;floor = (!floor && floor !== 0) ? 20 : floor;for (i = 0; i < (n || 12); i++) { data.push({ name : Ext.Date.monthNames[i % 12], data1 : Math.floor(Math.max((Math.random() * 100), floor)), data2 : Math.floor(Math.max((Math.random() * 100), floor)), data3 : Math.floor(Math.max((Math.random() * 100), floor)), data4 : Math.floor(Math.max((Math.random() * 100), floor)), data5 : Math.floor(Math.max((Math.random() * 100), floor)), data6 : Math.floor(Math.max((Math.random() * 100), floor)), data7 : Math.floor(Math.max((Math.random() * 100), floor)), data8 : Math.floor(Math.max((Math.random() * 100), floor)), data9 : Math.floor(Math.max((Math.random() * 100), floor)) });}return data;};var barMonData = generateData(5, 0);window.st = Ext.create('Ext.data.JsonStore', {fields : [ 'name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9' ],data : barMonData});var baseColor = 'rgb(0,0,0)';var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];Ext.define('Ext.chart.theme.Fancy', {extend: 'Ext.chart.theme.Base',constructor: function(config) { this.callParent([Ext.apply({ axis: { fill: baseColor, stroke: baseColor }, axisLabelLeft: { fill: baseColor }, axisLabelBottom: { fill: baseColor }, axisTitleLeft: { fill: baseColor }, axisTitleBottom: { fill: baseColor }, colors: colors }, config)]);}});var bar = Ext.define('BarColumn', {extend : 'Ext.chart.Chart',alias : 'widget.BarColumn',xtype : 'chart',theme : 'Fancy',animate : { easing : 'bounceOut', duration : 750},store : st,background : { fill : 'none'},gradients : [ { 'id' : 'v-1', 'angle' : 0, stops : { 0 : { color : 'rgb(212, 40, 40)' }, 100 : { color : 'rgb(117, 14, 14)' } }}, { 'id' : 'v-2', 'angle' : 0, stops : { 0 : { color : 'rgb(180, 216, 42)' }, 100 : { color : 'rgb(94, 114, 13)' } }}, { 'id' : 'v-3', 'angle' : 0, stops : { 0 : { color : 'rgb(43, 221, 115)' }, 100 : { color : 'rgb(14, 117, 56)' } }}, { 'id' : 'v-4', 'angle' : 0, stops : { 0 : { color : 'rgb(45, 117, 226)' }, 100 : { color : 'rgb(14, 56, 117)' } }}, { 'id' : 'v-5', 'angle' : 0, stops : { 0 : { color : 'rgb(187, 45, 222)' }, 100 : { color : 'rgb(85, 10, 103)' } }} ],axes : [ { type : 'Numeric', position : 'left', fields : [ 'data1' ], minimum : 0, maximum : 100, label : { renderer : Ext.util.Format.numberRenderer('0,0') }, grid : { odd : { stroke : '#555' }, even : { stroke : '#555' } }}, { type : 'Category', position : 'bottom', fields : [ 'name' ]} ],series : [ { type : 'column', axis : 'left', highlight : true, label : { display : 'insideEnd', 'text-anchor' : 'middle', field : 'data1', orientation : 'horizontal', fill : '#fff', font : '17px Arial' },renderer : function(sprite, storeItem, barAttr, i, store) { barAttr.fill = colors[i % colors.length]; return barAttr; }, tips: { trackMouse: true, width: 120, height: 50, renderer: function(storeItem, item) { var message=''; if(upBarColFlag == false){message= 'Click Here to see Detailed Data';} else{message= 'Click Here to see Summarised Data';} this.setTitle( message); } }, style : { opacity : 0.95 }, listeners: { 'itemmouseup': function(o){ refreshGrid(o); } }, xField : 'name', yField : 'data1'} ]});var upBarColFlag =false; var counter =0;function refreshGrid(o){if(counter==0 && upBarColFlag == false){ barWeekData = weekWiseData(4, 20); st.loadData(barWeekData);}else if(counter==0 && upBarColFlag == true){ upBarColFlag = false; counter--; st.loadData(barMonData);}if(counter==1 && upBarColFlag == false){ upBarColFlag = true; counter++; barDayData = dayWiseData(7, 20); st.loadData(barDayData);}else if(counter==1 && upBarColFlag == true){ st.loadData(barWeekData);}if(upBarColFlag == false){ counter++;}else{ counter--;}}
This was my barChart without MVC now i have created the application with MVC structure.This is my Controller file ....


Ext.define('Gamma.controller.ControlFile', {extend : 'Ext.app.Controller',//define the storesstores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],//define the models models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],//define the viewsviews : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'], refs: [{ ref: 'radar', selector: 'radarChart'},{ ref: 'sms', selector: 'smsPie'},{ ref: 'gprs', selector: 'gprsPie'},{ ref: 'mms', selector: 'mmsPie'},{ ref: 'voice', selector: 'voicePie'}],initializedEvents: false,init: function() { this.control({ '#barColumnChart': { afterlayout: this.afterChartLayout } });},afterChartLayout: function(){ var me=this; if(this.initializedEvents==true) return; this.initializedEvents=true; Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj){ // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']); // var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']; var source=obj.storeItem.data['source']; var count=obj.storeItem.data['count']; me.dataBaseCall(source,count); });}
And this is my View File...



var baseColor = 'rgb(0,0,0)';var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)', 'url(#v-5)'];Ext.define('Ext.chart.theme.Fancy', {extend: 'Ext.chart.theme.Base',constructor: function(config) { this.callParent([Ext.apply({ axis: { fill: baseColor, stroke: baseColor }, axisLabelLeft: { fill: baseColor }, axisLabelBottom: { fill: baseColor }, axisTitleLeft: { fill: baseColor }, axisTitleBottom: { fill: baseColor }, colors: colors }, config)]);}}); var bar=Ext.define('Gamma.view.BarColumnChart', {extend: 'Ext.chart.Chart',alias : 'widget.barColumnChart',height:300,width:Ext.getBody().getViewSize().width*0.6,id:'barColumnChart',xtype : 'chart',theme : 'Fancy',animate : { easing : 'bounceOut', duration : 750},store : 'BarColumn',background : { fill : 'none'},gradients : [ { 'id' : 'v-1', 'angle' : 0, stops : { 0 : { color : 'rgb(212, 40, 40)' }, 100 : { color : 'rgb(117, 14, 14)' } } }, { 'id' : 'v-2', 'angle' : 0, stops : { 0 : { color : 'rgb(180, 216, 42)' }, 100 : { color : 'rgb(94, 114, 13)' } } }, { 'id' : 'v-3', 'angle' : 0, stops : { 0 : { color : 'rgb(43, 221, 115)' }, 100 : { color : 'rgb(14, 117, 56)' } } }, { 'id' : 'v-4', 'angle' : 0, stops : { 0 : { color : 'rgb(45, 117, 226)' }, 100 : { color : 'rgb(14, 56, 117)' } } }, { 'id' : 'v-5', 'angle' : 0, stops : { 0 : { color : 'rgb(187, 45, 222)' }, 100 : { color : 'rgb(85, 10, 103)' } } } ],axes : [ { type : 'Numeric', position : 'left', fields : [ 'count' ], minimum : 0, maximum : 3000, label : { renderer : Ext.util.Format.numberRenderer('0,0') }, grid : { odd : { stroke : '#555' }, even : { stroke : '#555' } }}, { type : 'Category', position : 'bottom', fields : [ 'source' ]} ],series : [ { type : 'column', axis : 'left', seriesId: 'col', highlight : true, label : { display : 'insideEnd', 'text-anchor' : 'middle', field : 'count', orientation : 'horizontal', fill : '#fff', font : '12px Arial' }, renderer : function(sprite, storeItem, barAttr, i, store) { barAttr.fill = colors[i % colors.length]; return barAttr; }, style : { opacity : 0.95 }, xField : 'source', yField : 'count'} ],afterComponentLayout: function(width, height, oldWidth, oldHeight) { this.callParent(arguments); this.fireEvent('afterlayout', this);}});

slemmon
22 May 2013, 8:50 AM
Your posts with all of the code displayed run together is difficult to read. You might get more response from the community if you format your code using something like jsbeautifier (http://jsbeautifier.org/) and wrap your code in code blocks (highlight the formatted code and click on the # button above to wrap the code example in code blocks).

Speaking generally, an application not in MVC and one in MVC won't be terrible different other than the logic for processing events will not be described in the view components themselves, but rather in controllers' control (or listen) methods. That said, the series events are fired on classes that aren't 'components' so you can't listen to the series events directly within the controller. I see folks continue to manage chart series events within the chart component directly or relay series events up to the owning chart since the chart can be listened to from the controller.

Jeet Chatterjee
22 May 2013, 6:26 PM
slemon can you tell me what should i do to drill down a bar chart. i am posing this in jsbeautifier. but it will be very helpful if you put some light on it

Jeet Chatterjee
22 May 2013, 6:37 PM
//This is my sample application,where i have one barChart and one radar and four pie charts.I have to drill down the barChart.I have previously developer an application where i did not use MVC and there i was able to drill-down the bar.But now i am using EXTJS MVC i can not understand where i should put the drill down code.. This is my previous barChart without MVC ..
window.weekWiseData = function (n, floor) {
var data = [],
i;
var weeks = ['Week1', 'Week2', 'Week3', 'Week4'];
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 4); i++) {
data.push({
name: weeks[i],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};


var barWeekData;




window.dayWiseData = function (n, floor) {
var data = [],
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.dayNames[i % 7],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};


var barDayData;




window.generateData = function (n, floor) {
var data = [],
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};




var barMonData = generateData(5, 0);


window.st = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6',
'data7', 'data9', 'data9'
],
data: barMonData
});




var baseColor = 'rgb(0,0,0)';


var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'
];




Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',


constructor: function (config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});




var bar = Ext.define('BarColumn', {
extend: 'Ext.chart.Chart',
alias: 'widget.BarColumn',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: st,
background: {
fill: 'none'
},




gradients: [{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},


{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
}, {
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
}, {
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
}, {
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}
],


axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
minimum: 0,
maximum: 100,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name']
}
],


series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
orientation: 'horizontal',
fill: '#fff',
font: '17px Arial'
},


renderer: function (sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];


return barAttr;
},
tips: {
trackMouse: true,
width: 120,
height: 50,
renderer: function (storeItem, item) {
var message = '';
if (upBarColFlag == false) {
message = 'Click Here to see Detailed Data';
} else {
message = 'Click Here to see Summarised Data';
}
this.setTitle(message);


}
},


style: {
opacity: 0.95
},
listeners: {
'itemmouseup': function (o) {
refreshGrid(o);
}
},
xField: 'name',
yField: 'data1'
}
]


});


var upBarColFlag = false;


var counter = 0;


function refreshGrid(o) {
if (counter == 0 && upBarColFlag == false) {
barWeekData = weekWiseData(4, 20);
st.loadData(barWeekData);
} else if (counter == 0 && upBarColFlag == true) {
upBarColFlag = false;
counter--;
st.loadData(barMonData);
}
if (counter == 1 && upBarColFlag == false) {
upBarColFlag = true;
counter++;
barDayData = dayWiseData(7, 20);
st.loadData(barDayData);
} else if (counter == 1 && upBarColFlag == true) {


st.loadData(barWeekData);
}
if (upBarColFlag == false) {
counter++;
} else {
counter--;
}


}


//This was my barChart without MVC now i have created the application with MVC structure.This is my Controller file ....
Ext.define('Gamma.controller.ControlFile', {


extend: 'Ext.app.Controller',


//define the stores
stores: ['BarColumn', 'RadarView', 'VoiceCallStore', 'SMSCallStore', 'MMSCallStore', 'GPRSUsageStore'],




models: ['BarCol', 'radar', 'VoiceCallModel', 'SMSCallModel', 'MMSCallModel', 'GPRSUsageModel'],


views: ['BarColumnChart', 'LineChart', 'RadarChart', 'VoicePie', 'SMSPie', 'MMSPie', 'GPRSPie'],


refs: [{
ref: 'radar',
selector: 'radarChart'
}, {
ref: 'sms',
selector: 'smsPie'
}, {
ref: 'gprs',
selector: 'gprsPie'
}, {
ref: 'mms',
selector: 'mmsPie'
}, {
ref: 'voice',
selector: 'voicePie'
}
],


initializedEvents: false,
init: function () {
this.control({
'#barColumnChart': {
afterlayout: this.afterChartLayout
}
});
},
afterChartLayout: function () {
var me = this;
if (this.initializedEvents == true) return;
this.initializedEvents = true;
Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown', function (obj) {








// alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);


// var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];
var source = obj.storeItem.data['source'];
var count = obj.storeItem.data['count'];
me.dataBaseCall(source, count);
});
//And this is my View File...


var baseColor = 'rgb(0,0,0)';


var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'
];


Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',


constructor: function (config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors


config)]);




});






var bar = Ext.define('Gamma.view.BarColumnChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.barColumnChart',
height: 300,
width: Ext.getBody().getViewSize().width * 0.6,
id: 'barColumnChart',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: 'BarColumn',
background: {
fill: 'none'
},
gradients: [{
'id': 'v-1',


'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
}, {
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},


{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
}, {


'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}


}, {
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'






}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['count'],
minimum: 0,
maximum: 3000,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {




type: 'Category',
position: 'bottom',
fields: ['source']
}
],


series: [{


type: 'column',
axis: 'left',
seriesId: 'col',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'count',
orientation: 'horizontal',
fill: '#fff',
font: '12px Arial'
},
renderer: function (sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},






style: {
opacity: 0.95
},
xField: 'source',
yField: 'count'
}
],


afterComponentLayout: function (width, height, oldWidth, oldHeight) {
this.callParent(arguments);
this.fireEvent('afterlayout', this);
}
});
//And this is my store..


Ext.define('Gamma.store.BarColumn', {
extend: 'Ext.data.Store',
model: 'Gamma.model.BarCol',
autoLoad: true,
pageSize: 100,
id: 'BarColumn',




proxy: {
type: 'ajax',
url: 'CallRatiosAnalysis?methodName=callAnalysis',
reader: {
type: 'json',
root: 'topList',
totalProperty: 'totalCount',
successProperty: 'success'
}
}


});

slemmon
23 May 2013, 1:50 PM
Is it just the handling of the series itemmouseup event that you're struggling with at this point?

Also, if you format the code in jsbeautifier and then wrap the code in code blocks using the # button above then it will make your code much easier for the community to read.



window.weekWiseData = function (n, floor) {
var data = [],
i;
var weeks = ['Week1', 'Week2', 'Week3', 'Week4'];
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 4); i++) {
data.push({
name: weeks[i],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};




var barWeekData;








window.dayWiseData = function (n, floor) {
var data = [],
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.dayNames[i % 7],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};




var barDayData;








window.generateData = function (n, floor) {
var data = [],
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};








var barMonData = generateData(5, 0);




window.st = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6',
'data7', 'data9', 'data9'
],
data: barMonData
});








var baseColor = 'rgb(0,0,0)';




var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'
];








Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',




constructor: function (config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});








var bar = Ext.define('BarColumn', {
extend: 'Ext.chart.Chart',
alias: 'widget.BarColumn',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: st,
background: {
fill: 'none'
},








gradients: [{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},




{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
}, {
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
}, {
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
}, {
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}
],




axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
minimum: 0,
maximum: 100,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name']
}
],




series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
orientation: 'horizontal',
fill: '#fff',
font: '17px Arial'
},




renderer: function (sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];




return barAttr;
},
tips: {
trackMouse: true,
width: 120,
height: 50,
renderer: function (storeItem, item) {
var message = '';
if (upBarColFlag == false) {
message = 'Click Here to see Detailed Data';
} else {
message = 'Click Here to see Summarised Data';
}
this.setTitle(message);




}
},




style: {
opacity: 0.95
},
listeners: {
'itemmouseup': function (o) {
refreshGrid(o);
}
},
xField: 'name',
yField: 'data1'
}
]




});




var upBarColFlag = false;




var counter = 0;




function refreshGrid(o) {
if (counter == 0 && upBarColFlag == false) {
barWeekData = weekWiseData(4, 20);
st.loadData(barWeekData);
} else if (counter == 0 && upBarColFlag == true) {
upBarColFlag = false;
counter--;
st.loadData(barMonData);
}
if (counter == 1 && upBarColFlag == false) {
upBarColFlag = true;
counter++;
barDayData = dayWiseData(7, 20);
st.loadData(barDayData);
} else if (counter == 1 && upBarColFlag == true) {




st.loadData(barWeekData);
}
if (upBarColFlag == false) {
counter++;
} else {
counter--;
}




}




//This was my barChart without MVC now i have created the application with MVC structure.This is my Controller file ....
Ext.define('Gamma.controller.ControlFile', {




extend: 'Ext.app.Controller',




//define the stores
stores: ['BarColumn', 'RadarView', 'VoiceCallStore', 'SMSCallStore', 'MMSCallStore', 'GPRSUsageStore'],








models: ['BarCol', 'radar', 'VoiceCallModel', 'SMSCallModel', 'MMSCallModel', 'GPRSUsageModel'],




views: ['BarColumnChart', 'LineChart', 'RadarChart', 'VoicePie', 'SMSPie', 'MMSPie', 'GPRSPie'],




refs: [{
ref: 'radar',
selector: 'radarChart'
}, {
ref: 'sms',
selector: 'smsPie'
}, {
ref: 'gprs',
selector: 'gprsPie'
}, {
ref: 'mms',
selector: 'mmsPie'
}, {
ref: 'voice',
selector: 'voicePie'
}
],




initializedEvents: false,
init: function () {
this.control({
'#barColumnChart': {
afterlayout: this.afterChartLayout
}
});
},
afterChartLayout: function () {
var me = this;
if (this.initializedEvents == true) return;
this.initializedEvents = true;
Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown', function (obj) {








// alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);




// var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];
var source = obj.storeItem.data['source'];
var count = obj.storeItem.data['count'];
me.dataBaseCall(source, count);
});
//And this is my View File...




var baseColor = 'rgb(0,0,0)';




var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'
];




Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',




constructor: function (config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors




config)]);








});








var bar = Ext.define('Gamma.view.BarColumnChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.barColumnChart',
height: 300,
width: Ext.getBody().getViewSize().width * 0.6,
id: 'barColumnChart',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: 'BarColumn',
background: {
fill: 'none'
},
gradients: [{
'id': 'v-1',




'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
}, {
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},




{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
}, {




'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}




}, {
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'








}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['count'],
minimum: 0,
maximum: 3000,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {








type: 'Category',
position: 'bottom',
fields: ['source']
}
],




series: [{




type: 'column',
axis: 'left',
seriesId: 'col',
highlight: true,
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'count',
orientation: 'horizontal',
fill: '#fff',
font: '12px Arial'
},
renderer: function (sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},








style: {
opacity: 0.95
},
xField: 'source',
yField: 'count'
}
],




afterComponentLayout: function (width, height, oldWidth, oldHeight) {
this.callParent(arguments);
this.fireEvent('afterlayout', this);
}
});
//And this is my store..




Ext.define('Gamma.store.BarColumn', {
extend: 'Ext.data.Store',
model: 'Gamma.model.BarCol',
autoLoad: true,
pageSize: 100,
id: 'BarColumn',








proxy: {
type: 'ajax',
url: 'CallRatiosAnalysis?methodName=callAnalysis',
reader: {
type: 'json',
root: 'topList',
totalProperty: 'totalCount',
successProperty: 'success'
}
}




});

Jeet Chatterjee
24 May 2013, 7:35 PM
yah i did that with jsbeautifier are you able to read code now??