how to change a chart with a click event using ExtJs mvc

Question

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 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'
        }
});


}
});

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...

I see you call the AJAX request, but I don't see anywhere you use the result. You should define a success callback for the request, and do something with the data. If you want to load a store, you probably should use store.load() instead of Ajax.reuest. Also, I'm not aware of the existence of a 'reader' config for the Ajax.reuest — Amit Aviv, May 12 '13 at 13:14
@AmitAviv actually the else part is not working.but we cant understand why.the if portion is running fine.but the else part should run also. — , May 12 '13 at 15:45

score 0 · Accepted Answer · answered May 14 '13 at 13:14

just copy and paste this..

  Ext.getCmp("radarChart").getStore().load({
        url: "CallRatiosAnalysis?methodName=callDistribution",
        method:'GET',


        success: function(response, opts){

            console.log("hiiiiiiiiiiii");
        },
        failure: function(response, opts) {
            alert("server-side failure with status code " + response.status);
        },
         params: {
            source: source,
            count:  count
        }
    });

how to change a chart with a click event using ExtJs mvc

1 Answers1