Results 1 to 2 of 2

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

  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    13
    Vote Rating
    0
      0  

    Default 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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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'
                }
            });
        }
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •