ss4ms0n

Black Background In Javascript Fallback Multilevelpie

Recommended Posts

Hi,

first of all i really like the javascript fallback for users who don't have flash player installed.

I wanted to test is for a multilevel pie chart but am having problems with the background.

 

I've tried the following code:

 

<html>
 <head>    	
<title>My First chart using FusionCharts - Using pure JavaScript</title>	
<script type="text/javascript" src="Charts/FusionCharts.js"></script>
 </head>   
 <body> 	
<div id="chartContainer">FusionCharts will load here!</div>      	
<script type="text/javascript"><!--

 	FusionCharts.setCurrentRenderer('javascript');

 	var myChart = new FusionCharts( "Charts/MultiLevelPie.swf", "myChartId", "800", "600", "0", "1" );
 	myChart.setXMLData("<chart caption='Friend List' bgColor='FFFFFF' ><category label='Friends'  > <category label='His Friends' value='41' ><category label='Best Friends' value='10' /><category label='Good Friends' value='10' /> <category label='Friends' value='8' /> <category label='Haven't met' value='6' /><category label='Acquaintances' value='7' /> </category><category label='Our Mutual Friends' value='54' ><category label='Best Friends' value='10' /> <category label='Good Friends' value='20' /><category label='Friends' value='9' /><category label='Haven't met' value='9' />  <category label='Acquaintances' value='6' /> </category> </category></chart>");
 	myChart.render("chartContainer");

// -->  
</script>  	
 </body> 
</html>

 

I get a black background with the javascript renderer instead of the white background i want and get with flash.

Why is this? How can i force the white background?

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Welcome to FusionCharts Forum!smile.gif

 

First of all, we would like to thank you for showing interest in FusionCharts.

 

I am afraid, we are not able to replicate the issue, as the code is working fine from our end.

 

Please find the screenshot attached for your reference.

 

Please confirm the browser version you are using.

post-10517-019972700 1305621558_thumb.png

Share this post


Link to post
Share on other sites

]Thanks for the quick reply !

 

It works fine with all browsers.

 

The only case where I have a black backgound is when I render a chart with UIWebView in my iphone app (I use PhoneGap).

 

When I access the mobile version of my site with an iPhone & Safari, the chart background is ok (white).

When I access it through my iPhone app, the background & canvas background are black.

Screenshots are attached.

 

Alex

 

post-16632-038108300 1305622774_thumb.png

 

post-16632-064356100 1305622782_thumb.png

Edited by alex340r

Share this post


Link to post
Share on other sites

Hello :

 

Same issue for me. Latest FusionCharts version (downloaded today : May 26) shows BLACK background when loaded on UIWebView from local Bundle Resource (although code asks for WHITE background color [bgColor="ffffff"])

Any suggestion or workaround to avoid black background color and get white background work ?

 

Here is a screenshot from my sample project ....

 

]Thanks for the quick reply !

 

It works fine with all browsers.

 

The only case where I have a black backgound is when I render a chart with UIWebView in my iphone app (I use PhoneGap).

 

When I access the mobile version of my site with an iPhone & Safari, the chart background is ok (white).

When I access it through my iPhone app, the background & canvas background are black.

Screenshots are attached.

 

Alex

 

post-16632-038108300 1305622774_thumb.png

 

post-16632-064356100 1305622782_thumb.png

 

post-16998-095771900 1306316759_thumb.png

Share this post


Link to post
Share on other sites

Same issue here - bgColor='ffffff' coded, but displays black background when displaying via highcharts. Does anyone have a resolution to this ?

Share this post


Link to post
Share on other sites

Hi all,

 

The black background shows only in emulator though in device the colors are coming as required.

 

Reference: http://forum.fusionc...7568#entry37568

 

I'm having this same issue on my device:

 

vPegOm.jpg

 

using the following html/javascript, copied almost exactly from http://www.fusioncha...mos/Blueprint/:

 

<div id="fusion_chart_div_2" align="center">
Chart.
</div>

<script type="text/javascript">
<!--
//Instantiate the Chart
var chart_TopEmployees = new FusionCharts( { "swfUrl" :  "includes/fusion_charts/Pie2D.swf", "width" : "460", "height" : "305",  "renderAt" : "fusion_chart_div_2", "dataFormat" : "xml", "id" :  "fusion_chart_2", "wmode" : "opaque", "dataSource" : "<chart  caption='Top 5 Employees for 1996' palette='2' animation='1'  subCaption='(Click to slice out or right click to choose rotation mode)'  showValues='0' numberPrefix='$'   formatNumberScale='0'  showPercentInToolTip='0'><set label='Leverling' value='100524'  isSliced='0' /><set label='Fuller' value='87790' isSliced='0'  /><set label='Davolio' value='81898' isSliced='0' /><set  label='Peacock' value='76438' isSliced='0' /><set label='Callahan'  value='55091' isSliced='0'  /><styles><definition><style type='font'  name='CaptionFont' color='666666' size='15' /><style type='font'  name='SubCaptionFont' bold='0'  /></definition><application><apply toObject='caption'  styles='CaptionFont' /><apply toObject='SubCaption'  styles='SubCaptionFont'  /></application></styles></chart>" } ).render();
// -->
</script>

Edited by nvolker

Share this post


Link to post
Share on other sites

I figured it out!

 

The dev environment I was working in (something like http://www.url.com/test - fusion_charts/) had some spaces in its URL. Mobile Safari didn't automatically escape these when they were put into fill="url('blah#highcharts-5')", so it wasn't able to find the background gradient definition. I fixed this by editing part of highcharts.js from url('+ this.url + ... to url(' + escape(this.url) + ...

 

So if you have spaces in your URL, either do what I did, or just change your URL.

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Thank you very much for your valuable feedback.

 

Glad to know that you have managed to resolve your problem.

 

Happy FusionCharting!biggrin.gif

Share this post


Link to post
Share on other sites

Hi,

 

Same problem here! Black background on Safari(iPad/iPhone).

 

Any ideas?

 

Regards,

Rafael Pereira

 

Hi,

 

Thank you very much for your valuable feedback.

 

Glad to know that you have managed to resolve your problem.

 

Happy FusionCharting!biggrin.gif

Share this post


Link to post
Share on other sites

Hi NVolke,

 

The effective solution:

 

https://github.com/h....com/issues/320

 

"

This can be fixed by ensuring that renderer.url gets escaped when it is set. This can be done by changing line 2191 of highcharts.src.js from:<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">renderer.url = isIE ? '' : loc.href.replace(/#.?$/, ''); // page url used for internal references<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">to:<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">renderer.url = isIE ? '' : escape(loc.href.replace(/#.?$/, '')); // page url used for internal references

"

 

FusionChart Team: Can you ensure this update to HighCharts.js for your "highCharts/powerCharts" package?

 

It's also possible to reproduce with FusionCharts demo site:

 

Try to access this via iPad:

 

http://www.fusioncha...emos/Blueprint/

(Works Fine)

 

but trying this one, doesn't:

 

http://www.fusioncha...emos/Blueprint/?MyParameter=34(77)

(Here we have have a "(" or ")" char on the page url where the chart is binded, and BINGO!!!...we get the BLACK BACKGROUND)

 

 

Nowadays with SEO (Friendly URLs) its very normal to find () on urls...and FusionCharts should be prepared to bind charts on this case.

 

Regards,

Rafael Pereira

 

 

 

 

I figured it out!

 

The dev environment I was working in (something like http://www.url.com/test - fusion_charts/) had some spaces in its URL. Mobile Safari didn't automatically escape these when they were put into fill="url('blah#highcharts-5')", so it wasn't able to find the background gradient definition. I fixed this by editing part of highcharts.js from url('+ this.url + ... to url(' + escape(this.url) + ...

 

So if you have spaces in your URL, either do what I did, or just change your URL.

Edited by Rafael Pereira

Share this post


Link to post
Share on other sites
Guest Angshu

Hi,

 

Thank you very much for your valuable feedback and sharing the solution.

 

We will get back to you once there is any news from our end.

 

Meanwhile, keep FusionCharting!biggrin.gif

Share this post


Link to post
Share on other sites

Hi Angshu,

 

Thank you for your feedback!

Its important to provide a "e-fix" for the highcharts.js (optimized version for FusionCharts/PowerCharts) that is packaged with your solutions... it´s something not easy to do at my side because your highcharts.js is "scrambled".

 

Regards,

Rafael Pereira

 

Hi,

 

Thank you very much for your valuable feedback and sharing the solution.

 

We will get back to you once there is any news from our end.

 

Meanwhile, keep FusionCharting!biggrin.gif

highcharts.zip

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