1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    13
    Vote Rating
    0
    Jeet Chatterjee is on a distinguished road

      0  

    Default Unanswered: how to change a chart with a click event using ExtJs mvc

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


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

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,012
    Answers
    384
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


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

Thread Participants: 1

Tags for this Thread