Results 1 to 3 of 3

Thread: Set Gauge Chart Series Values in MVC Controller

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default Set Gauge Chart Series Values in MVC Controller

    I'm trying to change the colorSet and field values of a series in a gauge chart within an MVC controller.

    My code below is successful in setting both values however it sets all of the components in the container to the same values. Only the last values in the loop get displayed correctly in each gauge instance. My goal is to set the individual values for each gauge so they display different colors and have unique field values.

    I've come at this problem a number of different ways but have not been able to figure out a solution. It seems like this should work given I'm setting only a single series of one gauge chart at a time. Why are all of the charts getting set to the same values?

    I'm using Ext JS 4.0.7 with Chrome.

    Controller
    Code:
    init : function() {
    
            this.control({
                'myviewport panel[region="center"] currenttemps' : {
                    beforerender : this.BeforeDisplayTemps
                }
    
            });
    Controller function
    Code:
      
     BeforeDisplayTemps : function() {
    
            var gauges = (Ext.ComponentQuery.query('chart'));
    
            this.getPortSettingsStore().load
            for( port = 1; port <= (gauges.length); port++) {
    
                var record = this.getPortSettingsStore().findRecord('physical_name', 'Port-' + port, 0, true, true, true);
    
                if(record != null) {
    
                    //Start at array index 0
                    var gauge = gauges[port - 1];
    
                    var series = gauge.series.last();
    
                    var gaugecolor = record.data.gauge_color;
                    series.colorSet = ['#' + gaugecolor, '#ddd'];
                    series.field = 'temp' + port;
                }
            }
        }

    View
    Code:
    Ext.define('Boil.view.user.CurrentTemps', {
        extend : 'Ext.container.Container',
        alias : 'widget.currenttemps',
    
        requires : ['Boil.view.user.OneGauge'],
    
        width : 250,
        layout : {
            type : 'vbox',
            align : 'center',
        },
        border : 1,
    
        items : [{
            xtype : 'onegauge',
            itemId : 'gaugeInstance1',
        }, {
            xtype : 'onegauge',
            itemId : 'gaugeInstance2',
        }, {
            xtype : 'onegauge',
            itemId : 'gaugeInstance3',
        }]
    
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    Is your for loop in a callback of when the store is loaded?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default

    I'm not sure I understand your question: "Is the loop in a callback?".

    The store is setup in the controller and loaded in the "BeforeDisplayTemps" function. See code below. The for loop is just part of the function that is called when beforerender is fired. Reading from both stores is working perfectly the values are expected. Each pass through the loop changes the displayed color and field values to the expected values. The problem is that all charts are changed to the same color and same field value.

    I think the issue is with the following lines setting all the series values in the container.

    Code:
    series.colorSet = ['#' + gaugecolor, '#ddd'];
    series.field = 'temp' + port;
    Code:
    Ext.define('Boil.controller.CurrentTemps', {
        extend : 'Ext.app.Controller',
        controllers : ['CurrentTemps'],
        views : ['Viewport', 'user.NorthPanelTools', 'user.CurrentTemps'],
        stores : ['RawTemps', 'PortSettings'],
    
        refs : [{
            selector : 'viewport > panel > northpaneltools',
            ref : 'northPanelTools'            // this.getNorthPanelTools()
        }],
    
        init : function() {
    
            this.control({
    
                'panel[region="center"] currenttemps' : {
                    added : this.HideTools
                },
                'myviewport panel[region="center"] currenttemps onegauge' : {
                    afterrender : this.DisplayTemps
                },
                'myviewport panel[region="center"] currenttemps' : {
                    beforerender : this.BeforeDisplayTemps
                }
    
            });
        },

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
  •