Sign in to follow this  
erezharari

specifying chart width as 100%

Recommended Posts

I think i have the latest version i downloaded it about 3 weeks-1 month ago, is there any updates?

just to give more information i'm building the javascript string in code behind and then injecting it into the page (because i'm using custom server control). when i look with ie developer tools for ie i can see all the charts properties are set correctly, width 100% height 100% autoScale=1 but i can't see any chart on the page.

Share this post


Link to post
Share on other sites

ok, this is the code section that builds the chart, this functions returns the html to another functions that add it inside table. this code is working fine until we are changing the width and height to 100%.

 private string DrawChart(Chart chart)
    {
	    string id = this.UniqueID.ToString().Replace("ChartControl_", "");
	    StringBuilder htmlChart = new StringBuilder();
	    htmlChart.AppendFormat(" <table id='gaugesTable{0}' style='width:100%;'>", id);
	    htmlChart.AppendFormat("<tr id=line{0}><td>", id);
	    htmlChart.AppendFormat("<div id='chartdiv{0}'  width='100%'  align='center' class='text'>", id);
	    htmlChart.Append("<p> </p>");
	    htmlChart.Append("<p>Fusion Gadgets needs Adobe Flash Player to run. If you're unable to see the chart here, it means that your browser does not seem to have the Flash Player Installed. You can downloaded it <a href='http://www.adobe.com/products/flashplayer/' target='_blank'><u>here</u></a> for free.</p>");
	    htmlChart.Append("</div>");
	    htmlChart.Append("<script type='text/javascript'>");
	    htmlChart.AppendFormat("var myChart{0} = new FusionCharts('~/_LAYOUTS/Resources/ChartsResource/Charts/v3/{1}', 'myChart{0}',  '100%','100%', '0', '0','FFFFFF','exactFit');", id, chart.FlashName);
//i tried too options, to write 100% directly the same as the above row or to url encode 100%. both options didn't work
	    htmlChart.AppendFormat("myChart{0}.setDataXML("", id);
	    // the code below will generate the xml for the chart.
			 switch (chart.Type)
	    {
		    case ChartType.AdvancedAngular:
			    htmlChart.Append(CreateAdvancedAngularXml(chart));
			    break;
		    case ChartType.Angular:
			    htmlChart.Append(CreateAngularXml(chart));
			    break;
		    case ChartType.Bars:
			    htmlChart.Append(CreateBarsXml(chart));
			    break;
		    case ChartType.Doughnut:
			    htmlChart.Append(CreateDoughnutXml(chart));
			    break;
		    case ChartType.Linear:
			    htmlChart.Append(CreateLinearXml(chart));
			    break;
		    case ChartType.Lines:
			    htmlChart.Append(CreateLinesXml(chart));
			    break;
		    case ChartType.Pie:
			    htmlChart.Append(CreatePieXml(chart));
			    break;
		    case ChartType.Stacked:
			    htmlChart.Append(CreateStackedXml(chart));
			    break;
		    default:
			    htmlChart.Append("Gauge type is not implemented");
			    break;
	    }
	    htmlChart.Append("");");
	    htmlChart.AppendFormat("myChart{0}.render('chartdiv{0}');", id);
	    htmlChart.AppendFormat("</script>");
	    htmlChart.Append("</td></tr></Table>");
	    return htmlChart.ToString();
    }

Share this post


Link to post
Share on other sites

i tried doing something more simple, i wrote a aimple html file - still not working. again i can see the object and the values are correct but there is no chart.

<html>

 <head>

<script src="FusionCharts.js" type="text/javascript"></script>

 </head>

 <body>

<div id="chart1div" style='width:100%'>

 This text is replaced by the chart

</div>

<script type="text/javascript">

  var chart1 = new FusionCharts("MSColumn3D.swf", "ChId1", "100%", "100%", "0", "0", "FFFFFF", "exactFit");

  chart1.setDataURL("<chart xAxisName='' autoScale='1' adjustDiv='1' yAxisName='' numberPrefix='$' numberSuffix='#' decimals='3' showNames='1' labelDisplay='rotate' showLabels='1' showValues='1' rotateValues='1' placeValuesInside='0' showYAxisValues='1' canvasBgColor='ffc0cb' showToolTip='1' formatNumberScale='0' anchorRadius='2' showShadow='1' divLineAlpha='20' divLineColor='CC3300' divLineIsDashed='1' showAlternateHGridColor='1' alternateHGridAlpha='5' alternateHGridColor='CC3300' shadowAlpha='40' labelStep='2' numvdivlines='5' chartRightMargin='35' bgcolor='228b22' bgAngle='270' bgAlpha='10,10' showBorder='0'><categories><category label='' /></categories><dataset seriesName='Open' color='A52A2A'><set value='1892' /></dataset><dataset seriesName='Close' color='7FFF00'><set value='17' /></dataset><dataset seriesName='Close Late' color='6495ED'><set value='0' /></dataset><dataset seriesName='Late' color='00FFFF'><set value='28' /></dataset><styles><definition><style type='font' name='CaptionFont' size='12' color='666666' face='arial' bold='1' /><style type='font' name='SubCaptionFont' size='10' color='666666' face='arial' bold='0' /></definition><application><apply toObject='caption' styles='CaptionFont' /><apply toObject='subCaption' styles='SubCaptionFont' /></application></styles></chart>");

  chart1.render("chart1div");

</script>

 </body>

</html>

[code]

Share this post


Link to post
Share on other sites

ok, after more research i found out that the height can't be in percentage... don't know why.

this one works:

var chart1 = new FusionCharts("MSColumn3D.swf", "ChId1",100%,500, "0", "0", "FFFFFF");

Share this post


Link to post
Share on other sites

I too cannot get it to size to 100%wx100%h.  The chart renders empty if 100% is used in either width or height; the chart renders fine if I enter in regular numbers.

<div name="displaydiv" id="displaydiv">

<div name="chart1div" id="chart1div">

<strong>To view these charts correctly, you need to install or upgrade your Flash Player.</strong>

</div>

</div>

<script type="text/javascript">

var so = new FusionCharts('fc/Pie3D.swf', 'chart1Id','100%','100%','0','0','FFFFFF','exactFit');

so.addParam("type", "application/x-shockwave-flash");

so.addParam("id", "chart1Id");

so.addParam("name", "chart1Id");

so.addParam("FlashVars","

&dataURL=chartcache/<?=$fc_chart?>.xml&registerWithJS=1");

so.addParam("movie", "fc/Pie3D.swf");

so.addParam("quality", "high");

so.addParam("menu", "true");

so.addParam("wmode", "transparent");

so.addParam("allowScriptAccess", "always");

so.addParam("pluginurl", "http://www.macromedia.com/go/getflashplayer");

so.render("chart1div");

</script>

Share this post


Link to post
Share on other sites

Hi, I'm using what the instructions say and have the latest FC enterprise code.  I've tried every sending 100% every which way possible.  Still no luck.  I just get a blank chart.

<div name="display1div" id="display1div">

<div name="char1tdiv" id="chart1div">

<strong>To view these charts correctly, you need to install or upgrade your Flash Player.</strong>

</div>

</div>

<script type="text/javascript">

var so = new FusionCharts("fc/Pie3D.swf", "chart1Id","100%","100%","0","0","FFFFFF","exactFit");

so.addParam("type", "application/x-shockwave-flash");

so.addParam("id", "chart1Id");

so.addParam("name", "chart1Id");

so.addParam("FlashVars","&dataURL=chartcache/<?=$fc_chart?>.xml&registerWithJS=1&width=100%&height=100%");

so.addParam("movie", "fc/Pie3D.swf");

so.addParam("quality", "high");

so.addParam("width","100%");

so.addParam("height","100%");

so.addParam("menu", "true");

so.addParam("wmode", "transparent");

so.addParam("allowScriptAccess", "always");

so.addParam("pluginurl", "http://www.macromedia.com/go/getflashplayer");

so.render("chart1div");

</script>

:w00t:

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi,

In case you are still facing the issue, could you please try re-checking the root path for the swf file that you are using to render the chart?

Also, could you please send us the screen-shot of the error that you are receiving?

Share this post


Link to post
Share on other sites

Do you guys have an estimated time frame as to when the 100% bug will be fixed?

 

It clearly doesn't work. I've tried several chart in JS. It works fine if you specify pixels

 

but if you take the same code and specify percent it doesn't render anything. there is no error and no chart.

 

 

 

I looked at your code in int.as and I see the following

 

 

 

//Get chart width and height

 

var _chartWidth : Number = Stage.width;

 

var _chartHeight : Number = Stage.height;

 

 

 

//Get chart horizontal and vertical center

 

var _chartXCenter : Number = _chartWidth / 2;

 

var _chartYCenter : Number = _chartHeight / 2;

 

 

 

I am not very well versed in Action Script but it seems like the code is simply taking what's passed in and casting it as a number

Share this post


Link to post
Share on other sites

Make sure your Parent elements have dimensions. Tables don't seem to work too well, but DIVs do. It's nice being able to just set the dimensions of the Parent DIV and set FusionCharts to 100%,100%.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this