Sign in to follow this  
Followers 0
erezharari

specifying chart width as 100%

By erezharari, in General usage

Recommended Posts

asafeven   

asafeven
Posted

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

asafeven   

asafeven
Posted

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

asafeven   

asafeven
Posted

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

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
asafeven
			  

		

		

			


	
		asafeven
	

		

	

	
	

		



	

	

		

			
		


		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Deb.Penny
			  

		

		

			


	
		Deb.Penny
	

		

	

	
	

		



	

	

		

			
		


		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					







	

	

		

			
Deb.Penny
			  

		

		

			


	
		Deb.Penny
	

		

	

	
	

		



	

	

		

			
		


		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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
			  

		

		

			

	
		Guest Basundhara Ghosal
	

		

	

	
	

		



	

	

		

			
		


		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
smida02
			  

		

		

			


	
		smida02
	

		

	

	
	

		



	

	

		

			
		


		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
nytr0x
			  

		

		

			


	
		nytr0x
	

		

	

	
	

		



	

	

		

			
		


		

			Posted 
			
				
				
			
		

	


	


	

		
		

			
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  
	
	

	

		
			Followers
			0
		
	




		

		

			






		

	







	

		
			
				Go To Topic Listing
				General usage