[CLOSED] Strange question about directmethod call

[feanor91]

Hello

I create charts dynamically from server side. For this, I called, client side, a directmethod in a loop for each charts to draw like that :

    for (var i = 0; i < ChartsInTemplate.length; i++)
    {

        for (var j = 0; j < stoChartName.data.items.length; j++)
        {
            if (stoChartName.data.items[j].raw.INT_idCharts == ChartsInTemplate[i])
            {
                Title = stoChartName.data.items[j].raw.STR_FriendlyName;
                ChartName = stoChartName.data.items[j].raw.STR_ChartName;
                break;
            }
        }


       App.direct.BuildPanelByDirectMethod(Title, left, top, ChartName, panWidth, panHeight);

        CountOnX += 1;
        if (CountOnX == INT_HorizontalCharts)
        {
            CountOnX = 0;
            CountOnY += 1
            left = 0;
            top = panHeight * CountOnY;
        }
        else
        {
            left += panWidth;
        }

     }

Everythings works fine.

But now, I try to optimize the things.

So my question is: is there a way to store client side results of the x directemethod call so I could draw the charts whenn all my results are sent back from the server?

To be clear, I will have one loop for all the call to the directemettjob and after that aontehr loop on something wich will be all returns from the direct method to add the charts to the window.

And all that to try to gain a few seconds (and will I gain a few seconds? And is it even possible?).

[Daniil]

Hi @feanor91,

You can return a chart's configuration object from a DirectMethod. Then collect each one into some collection and add them manually to a container.

Well, it might appear to function faster, but I am not sure it will significant.

[feanor91]

Thanks.

I think my first try didn't work because my code behind is a sub and not a function so it return nothing, of course lol.

But as you said will it be significant...? I have to have a try to see.

Just to have not to search. In code behind, I use :

MyPanel.Render(myWindow)

to render the panel, so I will return a panel (with charts in it to client) how I translate in Javascrip?

I suppose "myWindow wil become App.windowname, myPanel will be the result of the code behind function so an Ext.panel.

Is

myfunctionresult.render(windowname)

will do the trick?

[Daniil]

Please use:

panel.ToConfig();

on server.

And this on client:

App.Window1.removeAll();
App.Window1.add(panels); //"panels" is an array of configs.
App.Window1.doLayout();

Hope this helps.

[feanor91]

Will try that as soon as possible, thanks.

I have tried by noting is drawn.

I change my sub cal by a function call

I return myPanel.toConfig()

On client side I have put :

panels = App.direct.BuildPanelByDirectMethod(Title, left, top, ChartName, panWidth, panHeight);

and the code you show, but panels stays undefined. I define it like that :

Problem seems to be that App.direct is asynchronous so javascript funcion continue before first inforamtion is returned by the call.

[Daniil]

Problem seems to be that App.direct is asynchronous so javascript funcion continue before first inforamtion is returned by the call.

Sure, you have to use a success handler to get panels configs from a response.

[feanor91]

Of course...Don't think to success callback...I will check, thanks.

[feanor91]

Hello

I made modification, but nothing is rendered into the window.

The codebhind method send the panel definition, I got it into an array of strings ine the success function, until now all is well, and when I have all my panel I use the function you gave to render them, but nothing is rendered.

The success function:

var showDashboard = function (Result)
{
    ChartsToDisplay.push(Result);

    nbChart++;
    if (nbChart >= ChartsInTemplate.length)
    {
        App.wndDashboard.removeAll();
        App.wndDashboard.add(ChartsToDisplay); 
        App.wndDashboard.doLayout();
        nbChart = 0;
    }
}

Here the array:

ChartsToDisplay: Array[11]
0: "{id:"panChartStockOut",height:283,width:416,xtype:"panel",x:416,y:283,items:[{id:"ChartStockOut",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_StockOut","DEC_MASK_StockOut","DEC_VEN_StockOut","DEC_TPP_StockOut"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",refreshOnItemToggle:true},series:[{seriesId:"OSA_StockOut",title:"OSA",xField:"month",yField:"DEC_OSA_StockOut",type:"line",markerConfig:{"type":"circle","fill":"#0000FF","radius":3,"size":3,"stroke":"#0000FF"},style:{"stroke":"#0000FF"}},{seriesId:"DEC_Target_OSA_StockOut_trgt",showInLegend:false,title:"Trgt. OSA",xField:"month",yField:"DEC_Target_OSA_StockOut",type:"line",showMarkers:false,style:{"stroke":"#0000FF"}},{seriesId:"MASK_StockOut",title:"Mask",xField:"month",yField:"DEC_MASK_StockOut",type:"line",markerConfig:{"type":"circle","fill":"#00FFFF","radius":3,"size":3,"stroke":"#00FFFF"},style:{"stroke":"#00FFFF"}},{seriesId:"DEC_Target_MASK_StockOut_trgt",showInLegend:false,title:"Trgt. Mask",xField:"month",yField:"DEC_Target_MASK_StockOut",type:"line",showMarkers:false,style:{"stroke":"#00FFFF"}},{seriesId:"VEN_StockOut",title:"Vent.",xField:"month",yField:"DEC_VEN_StockOut",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_VEN_StockOut_trgt",showInLegend:false,title:"Trgt. Vent.",xField:"month",yField:"DEC_Target_VEN_StockOut",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TPP_StockOut",title:"3PP",xField:"month",yField:"DEC_TPP_StockOut",type:"line",markerConfig:{"type":"circle","fill":"#FFCC99","radius":3,"size":3,"stroke":"#FFCC99"},style:{"stroke":"#FFCC99"}},{seriesId:"DEC_Target_TPP_StockOut_trgt",showInLegend:false,title:"Trgt. 3PP",xField:"month",yField:"DEC_Target_TPP_StockOut",type:"line",showMarkers:false,style:{"stroke":"#FFCC99"}}],store:"stoChartsData"}],layout:"fit",title:"Stock out"}"
1: "{id:"panChartOOBF",height:283,width:416,xtype:"panel",x:832,y:283,items:[{id:"ChartOOBF",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_OOBF","DEC_MASK_OOBF","DEC_VEN_OOBF","DEC_TPP_OOBF"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",refreshOnItemToggle:true},series:[{seriesId:"OSA_OOBF",title:"OSA",xField:"month",yField:"DEC_OSA_OOBF",type:"line",markerConfig:{"type":"circle","fill":"#0000FF","radius":3,"size":3,"stroke":"#0000FF"},style:{"stroke":"#0000FF"}},{seriesId:"DEC_Target_OSA_OOBF_trgt",showInLegend:false,title:"Trgt. OSA",xField:"month",yField:"DEC_Target_OSA_OOBF",type:"line",showMarkers:false,style:{"stroke":"#0000FF"}},{seriesId:"MASK_OOBF",title:"Mask",xField:"month",yField:"DEC_MASK_OOBF",type:"line",markerConfig:{"type":"circle","fill":"#00FFFF","radius":3,"size":3,"stroke":"#00FFFF"},style:{"stroke":"#00FFFF"}},{seriesId:"DEC_Target_MASK_OOBF_trgt",showInLegend:false,title:"Trgt. Mask",xField:"month",yField:"DEC_Target_MASK_OOBF",type:"line",showMarkers:false,style:{"stroke":"#00FFFF"}},{seriesId:"VEN_OOBF",title:"Vent.",xField:"month",yField:"DEC_VEN_OOBF",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_VEN_OOBF_trgt",showInLegend:false,title:"Trgt. Vent.",xField:"month",yField:"DEC_Target_VEN_OOBF",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TPP_OOBF",title:"3PP",xField:"month",yField:"DEC_TPP_OOBF",type:"line",markerConfig:{"type":"circle","fill":"#FFCC99","radius":3,"size":3,"stroke":"#FFCC99"},style:{"stroke":"#FFCC99"}},{seriesId:"DEC_Target_TPP_OOBF_trgt",showInLegend:false,title:"Trgt. 3PP",xField:"month",yField:"DEC_Target_TPP_OOBF",type:"line",showMarkers:false,style:{"stroke":"#FFCC99"}}],store:"stoChartsData"}],layout:"fit",title:"OOBF"}"
2: "{id:"panChartCRCallsMails",height:283,width:416,xtype:"panel",y:566,items:[{bin:[Ext.define('Ext.chart.theme.myBrowser', {extend: 'Ext.chart.theme.Base', constructor: function(config) {this.callParent([Ext.apply({colors:["#0000FF","#FF0000","#FFFF00","#00FFFF","#FF9900","#3366FF","#993366","#FFCC99"]}, config)]);}})],id:"ChartCRCallsMails",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_Calls","DEC_OSA_Emails","DEC_MASK_Calls","DEC_MASK_Emails","DEC_VEN_Calls","DEC_VEN_Emails","DEC_TPP_Calls","DEC_TPP_Emails"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",itemSpacing:0,labelFont:"8px Verdana",position:"right",refreshOnItemToggle:true},series:[{seriesId:"OSA_Calls",title:["OSA # calls","OSA # mails","Mask # calls","Mask # mails","Vent. # calls","Vent. # mails","3PP # calls","3PP # mails"],xField:"month",yField:["DEC_OSA_Calls","DEC_OSA_Emails","DEC_MASK_Calls","DEC_MASK_Emails","DEC_VEN_Calls","DEC_VEN_Emails","DEC_TPP_Calls","DEC_TPP_Emails"],type:"column",stacked:true}],theme:"myBrowser",store:"stoChartsData"}],layout:"fit",title:"User requests calls & mail"}"
3: "{id:"panChartCRLettersFax",height:283,width:416,xtype:"panel",x:416,y:566,items:[{bin:[Ext.define('Ext.chart.theme.myBrowser', {extend: 'Ext.chart.theme.Base', constructor: function(config) {this.callParent([Ext.apply({colors:["#0000FF","#FF0000","#FFFF00","#00FFFF","#FF9900","#3366FF","#993366","#FFCC99"]}, config)]);}})],id:"ChartCRLettersFax",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_Letters","DEC_OSA_Fax","DEC_MASK_Letters","DEC_MASK_Fax","DEC_VEN_Letters","DEC_VEN_Fax","DEC_TPP_Letters","DEC_TPP_Fax"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",itemSpacing:0,labelFont:"8px Verdana",position:"right",refreshOnItemToggle:true},series:[{seriesId:"OSA_Letters",title:["OSA # letters","OSA # fax","Mask # letters","Mask # fax","Vent. # letters","Vent. # fax","3PP # letters","3PP # fax"],xField:"month",yField:["DEC_OSA_Letters","DEC_OSA_Fax","DEC_MASK_Letters","DEC_MASK_Fax","DEC_VEN_Letters","DEC_VEN_Fax","DEC_TPP_Letters","DEC_TPP_Fax"],type:"column",stacked:true}],theme:"myBrowser",store:"stoChartsData"}],layout:"fit",title:"User requests letters & fax"}"
4: "{id:"panChartProductSplit",height:283,width:416,xtype:"panel",x:832,y:566,items:[{bin:[Ext.define('Ext.chart.theme.myBrowser', {extend: 'Ext.chart.theme.Base', constructor: function(config) {this.callParent([Ext.apply({colors:["#808000","#008000","#008080","#0000FF","#800080","#808080","#FF0000","#FF9900","#99CC00","#FF99CC"]}, config)]);}})],id:"ChartProductSplit",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_PS_S7","DEC_PS_S8","DEC_PS_S9","DEC_PS_CS","DEC_PS_VPAP","DEC_PS_RPSII","DEC_PS_Stellar","DEC_PS_EoleHelia","DEC_PS_VS","DEC_PS_Elisee"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",itemSpacing:0,labelFont:"8px Verdana",position:"right",refreshOnItemToggle:true},series:[{seriesId:"PS_S7",title:["# S7","# S8","# S9","# CS","# VPAP","# RPSII","# Stellar","# Eole/Helia","# VS","# Elisee"],xField:"month",yField:["DEC_PS_S7","DEC_PS_S8","DEC_PS_S9","DEC_PS_CS","DEC_PS_VPAP","DEC_PS_RPSII","DEC_PS_Stellar","DEC_PS_EoleHelia","DEC_PS_VS","DEC_PS_Elisee"],type:"column",stacked:true}],theme:"myBrowser",store:"stoChartsData"}],layout:"fit",title:"Product split"}"
5: "{id:"panChartTypeOfRepairSplit",height:283,width:416,xtype:"panel",y:849,items:[{bin:[Ext.define('Ext.chart.theme.myBrowser', {extend: 'Ext.chart.theme.Base', constructor: function(config) {this.callParent([Ext.apply({colors:["#339966","#33CCCC"]}, config)]);}})],id:"ChartTypeOfRepairSplit",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_TRS_WarrantyRepair","DEC_TRS_NonWarrantyRepair"],type:"Numeric",minimum:0},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"right",fields:["DEC_TRS_RegularMaintenance"],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",itemSpacing:0,labelFont:"8px Verdana",position:"right",refreshOnItemToggle:true},series:[{seriesId:"TRS_RegularMaintenance",title:"Regular maintenance",xField:"month",yField:"DEC_TRS_RegularMaintenance",axis:"right",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_TRS_RegularMaintenance_trgt",showInLegend:false,title:"Trgt. Regular maintenance",xField:"month",yField:"DEC_Target_TRS_RegularMaintenance",axis:"right",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TRS_WarrantyRepair",title:["Warranty repair","Non warranty repair"],xField:"month",yField:["DEC_TRS_WarrantyRepair","DEC_TRS_NonWarrantyRepair"],type:"column",stacked:true}],theme:"myBrowser",store:"stoChartsData"}],layout:"fit",title:"Type of repair split"}"
6: "{id:"panChartActivityTypeSplit",height:283,width:416,xtype:"panel",x:416,y:849,items:[{bin:[Ext.define('Ext.chart.theme.myBrowser', {extend: 'Ext.chart.theme.Base', constructor: function(config) {this.callParent([Ext.apply({colors:["#FF0000","#3366FF","#00FFFF","#808000"]}, config)]);}})],id:"ChartActivityTypeSplit",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_ATS_DeviceInvestigated","DEC_ATS_DeviceExchange","DEC_ATS_Repair","DEC_ATS_Loans"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",itemSpacing:0,labelFont:"8px Verdana",position:"right",refreshOnItemToggle:true},series:[{seriesId:"ATS_DeviceInvestigated",title:["# Device investigated","# Device exchange","# repair","# loan"],xField:"month",yField:["DEC_ATS_DeviceInvestigated","DEC_ATS_DeviceExchange","DEC_ATS_Repair","DEC_ATS_Loans"],type:"column",stacked:true}],theme:"myBrowser",store:"stoChartsData"}],layout:"fit",title:"Activity type split"}"
7: "{id:"panChartRepairByMonth",height:283,width:416,xtype:"panel",items:[{id:"ChartRepairByMonth",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_Repair","DEC_MASK_Repair","DEC_VEN_Repair","DEC_TPP_Repair"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",refreshOnItemToggle:true},series:[{seriesId:"OSA_Repair",title:"OSA",xField:"month",yField:"DEC_OSA_Repair",type:"line",markerConfig:{"type":"circle","fill":"#0000FF","radius":3,"size":3,"stroke":"#0000FF"},style:{"stroke":"#0000FF"}},{seriesId:"DEC_Target_OSA_Repair_trgt",showInLegend:false,title:"Trgt. OSA",xField:"month",yField:"DEC_Target_OSA_Repair",type:"line",showMarkers:false,style:{"stroke":"#0000FF"}},{seriesId:"MASK_Repair",title:"Mask",xField:"month",yField:"DEC_MASK_Repair",type:"line",markerConfig:{"type":"circle","fill":"#00FFFF","radius":3,"size":3,"stroke":"#00FFFF"},style:{"stroke":"#00FFFF"}},{seriesId:"DEC_Target_MASK_Repair_trgt",showInLegend:false,title:"Trgt. Mask",xField:"month",yField:"DEC_Target_MASK_Repair",type:"line",showMarkers:false,style:{"stroke":"#00FFFF"}},{seriesId:"VEN_Repair",title:"Vent.",xField:"month",yField:"DEC_VEN_Repair",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_VEN_Repair_trgt",showInLegend:false,title:"Trgt. Vent.",xField:"month",yField:"DEC_Target_VEN_Repair",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TPP_Repair",title:"3PP",xField:"month",yField:"DEC_TPP_Repair",type:"line",markerConfig:{"type":"circle","fill":"#FFCC99","radius":3,"size":3,"stroke":"#FFCC99"},style:{"stroke":"#FFCC99"}},{seriesId:"DEC_Target_TPP_Repair_trgt",showInLegend:false,title:"Trgt. 3PP",xField:"month",yField:"DEC_Target_TPP_Repair",type:"line",showMarkers:false,style:{"stroke":"#FFCC99"}}],store:"stoChartsData"}],layout:"fit",title:"Repair by month"}"
8: "{id:"panChartETTR",height:283,width:416,xtype:"panel",x:416,items:[{id:"ChartETTR",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_ETTR","DEC_MASK_ETTR","DEC_VEN_ETTR","DEC_TPP_ETTR"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",refreshOnItemToggle:true},series:[{seriesId:"OSA_ETTR",title:"OSA",xField:"month",yField:"DEC_OSA_ETTR",type:"line",markerConfig:{"type":"circle","fill":"#0000FF","radius":3,"size":3,"stroke":"#0000FF"},style:{"stroke":"#0000FF"}},{seriesId:"DEC_Target_OSA_ETTR_trgt",showInLegend:false,title:"Trgt. OSA",xField:"month",yField:"DEC_Target_OSA_ETTR",type:"line",showMarkers:false,style:{"stroke":"#0000FF"}},{seriesId:"MASK_ETTR",title:"Mask",xField:"month",yField:"DEC_MASK_ETTR",type:"line",markerConfig:{"type":"circle","fill":"#00FFFF","radius":3,"size":3,"stroke":"#00FFFF"},style:{"stroke":"#00FFFF"}},{seriesId:"DEC_Target_MASK_ETTR_trgt",showInLegend:false,title:"Trgt. Mask",xField:"month",yField:"DEC_Target_MASK_ETTR",type:"line",showMarkers:false,style:{"stroke":"#00FFFF"}},{seriesId:"VEN_ETTR",title:"Vent.",xField:"month",yField:"DEC_VEN_ETTR",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_VEN_ETTR_trgt",showInLegend:false,title:"Trgt. Vent.",xField:"month",yField:"DEC_Target_VEN_ETTR",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TPP_ETTR",title:"3PP",xField:"month",yField:"DEC_TPP_ETTR",type:"line",markerConfig:{"type":"circle","fill":"#FFCC99","radius":3,"size":3,"stroke":"#FFCC99"},style:{"stroke":"#FFCC99"}},{seriesId:"DEC_Target_TPP_ETTR_trgt",showInLegend:false,title:"Trgt. 3PP",xField:"month",yField:"DEC_Target_TPP_ETTR",type:"line",showMarkers:false,style:{"stroke":"#FFCC99"}}],store:"stoChartsData"}],layout:"fit",title:"ETTR"}"
9: "{id:"panChartRepairCost",height:283,width:416,xtype:"panel",y:283,items:[{id:"ChartRepairCost",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_RepairCost","DEC_MASK_RepairCost","DEC_VEN_RepairCost","DEC_TPP_RepairCost"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",refreshOnItemToggle:true},series:[{seriesId:"OSA_RepairCost",title:"OSA",xField:"month",yField:"DEC_OSA_RepairCost",type:"line",markerConfig:{"type":"circle","fill":"#0000FF","radius":3,"size":3,"stroke":"#0000FF"},style:{"stroke":"#0000FF"}},{seriesId:"DEC_Target_OSA_RepairCost_trgt",showInLegend:false,title:"Trgt. OSA",xField:"month",yField:"DEC_Target_OSA_RepairCost",type:"line",showMarkers:false,style:{"stroke":"#0000FF"}},{seriesId:"MASK_RepairCost",title:"Mask",xField:"month",yField:"DEC_MASK_RepairCost",type:"line",markerConfig:{"type":"circle","fill":"#00FFFF","radius":3,"size":3,"stroke":"#00FFFF"},style:{"stroke":"#00FFFF"}},{seriesId:"DEC_Target_MASK_RepairCost_trgt",showInLegend:false,title:"Trgt. Mask",xField:"month",yField:"DEC_Target_MASK_RepairCost",type:"line",showMarkers:false,style:{"stroke":"#00FFFF"}},{seriesId:"VEN_RepairCost",title:"Vent.",xField:"month",yField:"DEC_VEN_RepairCost",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_VEN_RepairCost_trgt",showInLegend:false,title:"Trgt. Vent.",xField:"month",yField:"DEC_Target_VEN_RepairCost",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TPP_RepairCost",title:"3PP",xField:"month",yField:"DEC_TPP_RepairCost",type:"line",markerConfig:{"type":"circle","fill":"#FFCC99","radius":3,"size":3,"stroke":"#FFCC99"},style:{"stroke":"#FFCC99"}},{seriesId:"DEC_Target_TPP_RepairCost_trgt",showInLegend:false,title:"Trgt. 3PP",xField:"month",yField:"DEC_Target_TPP_RepairCost",type:"line",showMarkers:false,style:{"stroke":"#FFCC99"}}],store:"stoChartsData"}],layout:"fit",title:"Repair cost"}"
10: "{id:"panChartETFQ",height:283,width:416,xtype:"panel",x:832,items:[{id:"ChartETFQ",xtype:"chart",shadow:false,background:{fill:"#FFFFFF"},axes:[{label:{"rotate":{degrees:270},"renderer":function(value){return computeMonth2(value.substr(0,2)).substr(0,3);}},position:"bottom",fields:["month"],type:"Category"},{label:{"renderer":function(value){return Ext.util.Format.number(value, '0.0');}},grid:true,majorTickSteps:4,position:"left",fields:["DEC_OSA_ETFQ","DEC_MASK_ETFQ","DEC_VEN_ETFQ","DEC_TPP_ETFQ"],type:"Numeric",minimum:0},{grid:true,majorTickSteps:4,position:"right",fields:[],type:"Numeric"}],legend:{boxStroke:"#FFFFFF",refreshOnItemToggle:true},series:[{seriesId:"OSA_ETFQ",title:"OSA",xField:"month",yField:"DEC_OSA_ETFQ",type:"line",markerConfig:{"type":"circle","fill":"#0000FF","radius":3,"size":3,"stroke":"#0000FF"},style:{"stroke":"#0000FF"}},{seriesId:"DEC_Target_OSA_ETFQ_trgt",showInLegend:false,title:"Trgt. OSA",xField:"month",yField:"DEC_Target_OSA_ETFQ",type:"line",showMarkers:false,style:{"stroke":"#0000FF"}},{seriesId:"MASK_ETFQ",title:"Mask",xField:"month",yField:"DEC_MASK_ETFQ",type:"line",markerConfig:{"type":"circle","fill":"#00FFFF","radius":3,"size":3,"stroke":"#00FFFF"},style:{"stroke":"#00FFFF"}},{seriesId:"DEC_Target_MASK_ETFQ_trgt",showInLegend:false,title:"Trgt. Mask",xField:"month",yField:"DEC_Target_MASK_ETFQ",type:"line",showMarkers:false,style:{"stroke":"#00FFFF"}},{seriesId:"VEN_ETFQ",title:"Vent.",xField:"month",yField:"DEC_VEN_ETFQ",type:"line",markerConfig:{"type":"circle","fill":"#FF0000","radius":3,"size":3,"stroke":"#FF0000"},style:{"stroke":"#FF0000"}},{seriesId:"DEC_Target_VEN_ETFQ_trgt",showInLegend:false,title:"Trgt. Vent.",xField:"month",yField:"DEC_Target_VEN_ETFQ",type:"line",showMarkers:false,style:{"stroke":"#FF0000"}},{seriesId:"TPP_ETFQ",title:"3PP",xField:"month",yField:"DEC_TPP_ETFQ",type:"line",markerConfig:{"type":"circle","fill":"#FFCC99","radius":3,"size":3,"stroke":"#FFCC99"},style:{"stroke":"#FFCC99"}},{seriesId:"DEC_Target_TPP_ETFQ_trgt",showInLegend:false,title:"Trgt. 3PP",xField:"month",yField:"DEC_Target_TPP_ETFQ",type:"line",showMarkers:false,style:{"stroke":"#FFCC99"}}],store:"stoChartsData"}],layout:"fit",title:"ETFQ"}"
length: 11

[Daniil]

I did a quick test with your code, it appears to be working.

Please provide a full test case.