How to make a chart dynamic using click event

Question

I have a barChart whose value i am sending to the Servlet,and on the basis of each value i have to populate some data on the radarChart.The data is going to the Servlet and the radarChart is also coming.But the problem is that the radar is coming only for one condition.It is not working for the else part.As the result a cannot make the radar and bar interactive.here is my code...

It is the controller from where i am sending the data to the Servlet..

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'];
        //alert(barData);
        me.dataBaseCall(obj.storeItem.data['source'],obj.storeItem.data['count']);
    });
},
dataBaseCall: function(source,count){
    //alert(barData);

    Ext.Ajax.request({
        url: "CallRatiosAnalysis",
        success: function(response, opts){
            //do what you want with the response here
            console.log("hiiiiiiiiiiii");
        },
        failure: function(response, opts) {
            alert("server-side failure with status code " + response.status);
        },
        params: {
            source: source,
            count:  count
        }

And here is the Servlet,where the radarChart is forming...

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String mysource = request.getParameter("source");
    String mycount = request.getParameter("count");

    System.out.println(mysource + "\n" + mycount);

    if (mysource != null && mycount != null) {

        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        ArrayList<IndCallType> ratios = new ArrayList<IndCallType>();
        ratios.add(new IndCallType("Voice", "40"));
        ratios.add(new IndCallType("SMS", "30"));
        ratios.add(new IndCallType("MMS", "5"));
        ratios.add(new IndCallType("GPRS", "20"));
        ratios.add(new IndCallType("Others", "5"));
        Gson gson = new Gson();
        JsonArray arrayObj = new JsonArray();
        for (int i = 0; i < ratios.size(); i++) {
            IndCallType count = ratios.get(i);
            JsonElement linObj = gson.toJsonTree(count);
            arrayObj.add(linObj);
        }

        JsonObject myObj = new JsonObject();
        myObj.addProperty("success", true);
        myObj.add("allCalls", arrayObj);
        myObj.addProperty("allCallsRatio", ratios.size());

        out.println(myObj.toString());
        out.close();
    }else{ //this part is not working 
        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        ArrayList<IndCallType> ratios = new ArrayList<IndCallType>();
        ratios.add(new IndCallType("Voice", "10"));
        ratios.add(new IndCallType("SMS", "3"));
        ratios.add(new IndCallType("MMS", "50"));
        ratios.add(new IndCallType("GPRS", "80"));
        ratios.add(new IndCallType("Others", "1"));
        Gson gson = new Gson();
        JsonArray arrayObj = new JsonArray();
        for (int i = 0; i < ratios.size(); i++) {
            IndCallType count = ratios.get(i);
            JsonElement linObj = gson.toJsonTree(count);
            arrayObj.add(linObj);
        }

        JsonObject myObj = new JsonObject();
        myObj.addProperty("success", true);
        myObj.add("allCalls", arrayObj);
        myObj.addProperty("allCallsRatio", ratios.size());

        out.println(myObj.toString());
        out.close();
    }
}

only one part i.e the if condition is working.But the else part is not working.I cannot understand the reason .Somebody please help me.

Answer 1

Assuming you have the radar chart already rendered, with a store configured with the url: "CallRatiosAnalysis" than instead of calling Ext.Ajax.request you should:

Ext.getCmp(<selector for radar chart>).getStore().load({
    params: {
        source: source,
        count:  count
    }
});

If you don't, than your success callback should implement the rendering of the chart, and loading the data.