ss4ms0n Report post Posted February 16, 2011 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
alex340r Report post Posted May 17, 2011 Hi, I have the same problem. Did you find a solution ? Alex Share this post Link to post Share on other sites
Guest Angshu Report post Posted May 17, 2011 Hi, Welcome to FusionCharts Forum! 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. Share this post Link to post Share on other sites
alex340r Report post Posted May 17, 2011 (edited) ]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 Edited May 17, 2011 by alex340r Share this post Link to post Share on other sites
jcesarotero Report post Posted May 25, 2011 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 Share this post Link to post Share on other sites
mgeorge Report post Posted May 26, 2011 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
FusionCharts Support Report post Posted May 26, 2011 We have tracked this as a weired behaviour in setting gradient color to the background and canvas background (where applicable). We are looking into this. And would let you know, once resolved. Share this post Link to post Share on other sites
FusionCharts Support Report post Posted June 8, 2011 Hi all, The black background shows only in emulator though in device the colors are coming as required. Reference: http://forum.fusioncharts.com/topic/9631-ipad-simulator-works-device-does-not-work/page__pid__37568#entry37568 Share this post Link to post Share on other sites
nvolker Report post Posted June 9, 2011 (edited) 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: 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 June 9, 2011 by nvolker Share this post Link to post Share on other sites
nvolker Report post Posted June 10, 2011 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 Report post Posted June 13, 2011 Hi, Thank you very much for your valuable feedback. Glad to know that you have managed to resolve your problem. Happy FusionCharting! Share this post Link to post Share on other sites
Rafael Pereira Report post Posted September 4, 2011 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! Share this post Link to post Share on other sites
Rafael Pereira Report post Posted September 7, 2011 (edited) 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 September 7, 2011 by Rafael Pereira Share this post Link to post Share on other sites
Guest Angshu Report post Posted September 8, 2011 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! Share this post Link to post Share on other sites
Rafael Pereira Report post Posted September 8, 2011 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! highcharts.zip Share this post Link to post Share on other sites
