PDA

View Full Version : how to change a chart with a click event using ExtJs mvc



Jeet Chatterjee
11 May 2013, 3:08 AM
I create 2 charts(bar column and radar) in one page using ExtJs mvc. I want that when I will click on the column of a chart the radar will show the change.. I wrote the function for click in controller. here is the controller...


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'], 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); });},dataBaseCall: function(source,count){ Ext.Ajax.request({ url: "CallRatiosAnalysis?methodName=callDistribution"+"&param="+source+"&param1="+count, method:'GET', reader: { type: 'json', root: 'allCalls', totalProperty: 'allCallsRatio', successProperty: 'success' }});}});
now in this function I call the servlet through ajax.. here is the function where this change should occurs...



private void callDistribution(HttpServletRequest request, HttpServletResponse response) throws IOException { PrintWriter out = response.getWriter(); response.setContentType("text/html"); String name = request.getParameter("param"); String data = request.getParameter("param1"); if (name == null && data == null) { ArrayList<IndCallType> radaranalysis = new ArrayList<IndCallType>(); radaranalysis.add(new IndCallType("Voice", "40")); radaranalysis.add(new IndCallType("SMS", "30")); radaranalysis.add(new IndCallType("MMS", "5")); radaranalysis.add(new IndCallType("GPRS", "20")); radaranalysis.add(new IndCallType("OTHERS", "5")); JsonObject myObj = new JsonObject(); if (!radaranalysis.isEmpty()) { JsonArray jsonObj = Utility.wrapToJSONObject(radaranalysis); myObj.addProperty("success", true); myObj.add("allCalls", jsonObj); myObj.addProperty("allCallsRatio", jsonObj.size()); out.println(myObj.toString()); out.close(); } else { myObj.addProperty("success", false); out.println(myObj.toString()); out.close(); } }else{ ArrayList<IndCallType> radarclcikanalysis = new ArrayList<IndCallType>(); radarclcikanalysis.add(new IndCallType("Voice", "10")); radarclcikanalysis.add(new IndCallType("SMS", "5")); radarclcikanalysis.add(new IndCallType("MMS", "50")); radarclcikanalysis.add(new IndCallType("GPRS", "2")); radarclcikanalysis.add(new IndCallType("OTHERS", "45")); JsonObject myObj = new JsonObject(); if (!radarclcikanalysis.isEmpty()) { JsonArray jsonObj = Utility.wrapToJSONObject(radarclcikanalysis); myObj.addProperty("success", true); myObj.add("allCalls", jsonObj); myObj.addProperty("allCallsRatio", jsonObj.size()); out.println(myObj.toString()); out.close(); } else { myObj.addProperty("success", false); out.println(myObj.toString()); out.close(); } }}if I write anything to print in the else part, then it prints perfectly. but modification of chart is not happening.. please anyone help me...

slemmon
13 May 2013, 11:37 AM
If you've got two charts and clicking on one is to load the data in the other you might use the click interaction to pass params to the second chart's load method.

So, in your click listener you could do something like:
chart2.getStore().load({
params: {
param: source,
param1: count
}
});

Also, when you post code snippets to the forums you might take some steps to make your code more readable. If you past your code into this site: http://jsbeautifier.org/
and then into the forum thread surrounded by
tags it will come out looking like the example below which is much easier for myself / the community to read.

[CODE]Ext.define('Gamma.controller.ControlFile', {
extend: 'Ext.app.Controller',
//define the stores
stores: ['BarColumn', 'RadarView', 'VoiceCallStore', 'SMSCallStore', 'MMSCallStore', 'GPRSUsageStore'],
//define the models
models: ['BarCol', 'radar', 'VoiceCallModel', 'SMSCallModel', 'MMSCallModel', 'GPRSUsageModel'],
//define the views
views: ['BarColumnChart', 'LineChart', 'RadarChart', 'VoicePie', 'SMSPie', 'MMSPie', 'GPRSPie'],
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);
});
},
dataBaseCall: function (source, count) {
Ext.Ajax.request({
url: "CallRatiosAnalysis?methodName=callDistribution" + "&param=" + source + "&param1=" + count,
method: 'GET',
reader: {
type: 'json',
root: 'allCalls',
totalProperty: 'allCallsRatio',
successProperty: 'success'
}
});
}
});