Auto Resize Widget When Browser Resize

[Luciano Casa]

I'm using ExtJS with FusionCharts. All FusionCharts XT graphics are resized when the browser resizes

But the graphics FusionWidget do not, why?

Edited July 5, 2012 by Luciano Casa

[Guest Sumedh]

Hi

 

Can you paste your sample code here?

 

It would be helpful for us to look into it.

[Luciano Casa]

	....
       switch (sTipoGrafico) {
           case "barra":
               var sSwfGrafico = '/includes/FusionCharts/MSColumn2D.swf';
               var oGrafDados = MontaGrafBarra(dados, param, aCols, 1);
               break ;
           case "linha":
               var sSwfGrafico = '/includes/FusionCharts/MSLine.swf';
               var oGrafDados = MontaGrafBarra(dados, param, aCols, 2);
               break ;
           case "pizza":
               var sSwfGrafico = '/includes/FusionCharts/Pie2D.swf';
               var oGrafDados = MontaGrafPie(dados, param, aCols);
               break;
           case "barralinha":
               var sSwfGrafico = '/includes/FusionCharts/MSCombiDY2D.swf';
               var oGrafDados = MontaGrafBarraLinha(dados, param, aCols);
               break;
           case "barravertical":
               var sSwfGrafico = '/includes/FusionCharts/Bar2D.swf';
               var oGrafDados = MontaGrafPie(dados, param, aCols);
               break;
           case "radar":
               var sSwfGrafico = '/includes/FusionCharts/Radar.swf';
               var oGrafDados = MontaGrafBarra(dados, param, aCols, 3);
               break ;
           case "velocimetro":
               var sSwfGrafico = '/includes/FusionCharts/AngularGauge.swf';
               var oGrafDados = MontaGrafVeloc(dados, param, aCols, 1);
               break ;
           case "waterfall":
               var sSwfGrafico = '/includes/FusionCharts/Waterfall2D.swf';
               var oGrafDados = MontaGrafWaterFall(dados, param, aCols, 1);
               break ;
       }

       FusionCharts._fallbackJSChartWhenNoFlash();
       var myChart = new FusionCharts( {
           swfUrl: sSwfGrafico,
           width: "100%",
           height: "100%"
       });

       myChart.setJSONData(oGrafDados);
       myChart.render(oGraf.id);
       ....

function MontaGrafVeloc(dados, param, aCols, iTipo) {
   	var aGrafico = new Object();
   	var aHeaders = new Object();
   	var aParamGraf = param.Grafico;
   	var oUmColor = new Object();
   	var aRange = new Array();
   	var oUmDials = new Object();
   	var oPoint = new Object();
   	var aDefin = new Array();
   	var aApp = new Array();
   	var aStyles = new Object();
   	var sColorIni, sColorFim;

   	if (aParamGraf.MostraTitulo) {
       	//aHeaders.caption = aParamGraf.titulo;
   	}

   	aHeaders.manageresize = "1";
   	aHeaders.showvalue = "1";
   	aHeaders.origw = "350";
   	aHeaders.origh = "200";
   	aHeaders.decimals = "2";
   	aHeaders.bgcolor = "9BA5B2,FFFFFF";
   	aHeaders.showborder = "0";
   	aHeaders.labelDisplay = "AUTO";
   	aHeaders.tickvaluedistance = "30";
   	aHeaders.formatNumberScale = "1";
   	aHeaders.managevalueoverlapping = "1";
   	aHeaders.autoaligntickvalues = "1";
   	aHeaders.chartBottomMargin = 50;
   	//aHeaders.chartTopMargin = "25";
   	//aHeaders.chartLeftMargin = "25";
   	aHeaders.valueBelowPivot = "1";
   	aHeaders.gaugeFillMix = "{dark-10},FFFFFF,{dark-10}";
   	aHeaders.gaugeFillRatio = "3";
   	aHeaders.autoScale = "1";
   	aHeaders.showGaugeBorder = "1";
   	aHeaders.gaugeBorderColor = "666666";
   	aHeaders.gaugeBorderThickness = "1";
   	aHeaders.gaugeBorderAlpha = "100";
   	aHeaders.gaugeOuterRadius = "100";
   	aHeaders.gaugeInnerRadius = "60";
   	aHeaders.lowerLimit = dados[0].min;
   	aHeaders.upperLimit = dados[0].max;

   	aGrafico.chart = aHeaders;

   	if(dados[0].vermelhoIni > dados[0].verdeIni){
       	sColorIni = "8BBA00";
       	sColorFim = "FF654F";
   	}else{
       	sColorIni = "FF654F";
       	sColorFim = "8BBA00";
   	}

   	//RANGE
   	var aUmRange = new Object();
   	aUmRange.minvalue = dados[0].vermelhoIni;
   	aUmRange.maxvalue = dados[0].vermelhoFim;
   	aUmRange.code = sColorIni;
   	aRange.push(aUmRange);

   	aUmRange = new Object();
   	aUmRange.minvalue = dados[0].amareloIni;
   	aUmRange.maxvalue = dados[0].amareloFim;
   	aUmRange.code = "F6BD0F";
   	aRange.push(aUmRange);

   	aUmRange = new Object();
   	aUmRange.minvalue = dados[0].verdeIni;
   	aUmRange.maxvalue = dados[0].verdeFim;
   	aUmRange.code = sColorFim;
   	aRange.push(aUmRange);

   	oUmColor.color = aRange;
   	aGrafico.colorrange = oUmColor;

   	//DIAL
   	var aUmDial = new Object();
   	aUmDial.value = dados[0].real;
   	aUmDial.rearextension = "10";
   	aUmDial.basewidth = "10";

   	var aDial = new Array();
   	aDial.push(aUmDial);
   	oUmDials.dial = aDial;
   	aGrafico.dials = oUmDials;

   	//TRENDPOINT
   	var aUmPoint = new Object();
   	aUmPoint.startvalue = dados[0].orcado;
   	aUmPoint.displayvalue = dados[0].nomeorcado;
   	aUmPoint.fontcolor = "000000";
   	aUmPoint.usemarker = "1";
   	aUmPoint.dashed = "1";
   	aUmPoint.dashlen = "2";
   	aUmPoint.dashgap = "2";

   	var aPoint = new Array();
   	aPoint.push(aUmPoint);

   	oPoint.point = aPoint;
   	aGrafico.trendpoints = oPoint;

   	//STYLE
   	var aUmDefin = new Object();
   	aUmDefin.name = "myValueFont";
   	aUmDefin.type = "font";
   	aUmDefin.bgColor = "FFFFFF";
   	aUmDefin.bordercolor = "999999";
   	aDefin.push(aUmDefin);

   	aStyles.definition = aDefin;

   	var aUmApp = new Object();
   	aUmApp.toobject = "Value";
   	aUmApp.styles = "myValueFont";
   	aApp.push(aUmApp);

   	aUmApp = new Object();
   	aUmApp.toobject = "TRENDVALUES";
   	aUmApp.styles = "myValueFont";
   	aApp.push(aUmApp);

   	aStyles.application = aApp;
   	aGrafico.styles = aStyles;

   	return aGrafico;

}        

[Guest Sumedh]

Hi,

 

What FusionWidgets version used?

[Luciano Casa]

FusionWidgets 3.1.1

[Guest Sumedh]

FusionWidgets 3.1.1

 

Hi Luciano,

 

You would need to use FusionWidgets XT version.

 

Dynamic re-sizing was not supported in FusionWidgets v3.1.1

 

For more information, please refer the following URL:

http://docs.fusionch...n/WhatsNew.html

 

Hope this helps.

[Luciano Casa]

I update to :

Current Version:FusionWidgets XT (v3.2) Service Release 1 (Released on 23rd April, 2012)

 

Same problem.I copied only the files swf.

[Guest Sumedh]

I update to :

Current Version:FusionWidgets XT (v3.2) Service Release 1 (Released on 23rd April, 2012)

 

Same problem.I copied only the files swf.

 

Hi,

 

You would need to copy all the SWF files as well as latest JS files in your project folder.

 

For more information, please refer the following URL:

http://docs.fusioncharts.com/widgets/Contents/?Introduction/Upgrading.html