CrewStile

3D Stacked Column JS Fallback Chart; Black Background in IPhone5/Android

Recommended Posts

Fusioncharts,

   I am attempting to create a Flash 3D Stacked Column chart that will fallback to JS when using Safari/iPhone5.  Javascript chart renders fine on desktop browsers (IE 8, Firefox 13.0.1).  However, when attempting to view the chart on iPhone5 via Safari, the background is black (I have not explicitly set the bgColor or bgAlpha in the Chart XML).  I have js libraries in my FusionCharts project folder (again, it's rendering JS fine on desktop browsers and not via iPhone/Safari).  Another thing to note, the Javascript chart does render without the black background when running on a 2nd Generation iPad.  Please advise.  Thank you.

 

<script src="/OMD/FusionCharts/FusionCharts.js" type="text/javascript"></script>
<!-- Using ASP.NET FusionCharts v3.2.2.1 Wrapper and JavaScript rendering --><!-- START Script Block for Chart summaryGraph -->
<div id='summaryGraphDiv' >
Chart.
</div>
<script type="text/javascript">
if (FusionCharts && FusionCharts("summaryGraph") ) FusionCharts("summaryGraph").dispose();
var chart_summaryGraph = new FusionCharts({"dataFormat" : "xml", "scaleMode" : "noScale", "renderAt" : "summaryGraphDiv", "id" : "summaryGraph", "debugMode" : "0", "lang" : "EN", "swfUrl" : "/OMD/FusionCharts/StackedColumn3D.swf", "wMode" : "opaque", "width" : "680", "height" : "350", "registerWithJS" : "1","dataSource" : "<chart animation='0' labelDisplay='Stagger' showLegend='0' showLabels='1' showSum='1' adjustDiv='0' numDivLines='5' showNames='1' showValues='0' caption='Customers Out' decimalPrecision='0' formatNumberScale='0' yAxisMinValue='0' yAxisMaxValue='1800'><categories><category label='AEP Ohio' /><category label='AEP Texas' /><category label='APCO' /><category label='Indiana Michigan' /><category label='Kentucky' /><category label='PSO' /><category label='SWEPCO' /><category label='Wheeling' /></categories><dataset seriesName='Confirmed'><set value='74' color='AFD8F8' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dAEP%2520Ohio%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, AEP Ohio, 74'/><set value='112' color='F6BD0F' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dAEP%2520Texas%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, AEP Texas, 112'/><set value='264' color='8BBA00' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dAPCO%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, APCO, 264'/><set value='114' color='A66EDD' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dIndiana%2520Michigan%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, Indiana Michigan, 114'/><set value='2' color='F984A1' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dKentucky%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, Kentucky, 2'/><set value='41' color='CCCC00' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dPSO%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, PSO, 41'/><set value='59' color='999999' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dSWEPCO%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, SWEPCO, 59'/><set value='3' color='0099CC' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dWheeling%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Confirmed, Wheeling, 3'/></dataset><dataset seriesName='Predicted'><set value='25' color='D7EBFB' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dAEP%2520Ohio%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, AEP Ohio, 99'/><set value='1576' color='FADE87' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dAEP%2520Texas%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, AEP Texas, 1,688'/><set value='114' color='C5DC7F' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dAPCO%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, APCO, 378'/><set value='10' color='D2B6EE' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dIndiana%2520Michigan%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, Indiana Michigan, 124'/><set value='3' color='FCC1D0' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dKentucky%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, Kentucky, 5'/><set value='14' color='E5E57F' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dPSO%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, PSO, 55'/><set value='20' color='CCCCCC' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dSWEPCO%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, SWEPCO, 79'/><set value='0' color='7FCCE5' link='%2fOMD%2fCurrentOutages%2fSummary%3fregionName%3dWheeling%26regionType%3dJurisdiction%26currentTab%3dJurisdiction' tooltext='Predicted, Wheeling, 3'/></dataset></chart>"}).render();</script>
<!-- END Script Block for Chart summaryGraph -->

 

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Could you please render the graph from our demo gallery "link : http://www.fusioncharts.com/demos/gallery/stacked-charts/chart.asp?id=stackedcolumn3d_1" in iPhone5 at your end and confirm, whether you are able to replicate the same issue there?

If yes, please provide the scaled down sample and mention the FusionCharts XT version details.

Also, provide the screen shot of the issue, so that we can better look into it.

Awaiting your valuable inputs.
 

Share this post


Link to post
Share on other sites

Well, I was able to render the chart in the link you provided.  I've been doing some more work trying to figure this out.  I have a FC Support case (189057) entered for this as well.  To give you more background, we are attempting to open the page through Cisco Secure Desktop through a browser.  Then when we are in Secure Desktop, we attempt to enter the page in a control in the page and not through the browser natively.  I get the feeling that there is some javascript conflict when attempting render the Javascript chart in this manner (perhaps security or some other issue).  Can you think of any potential issues that could arise from this setup or have any advice/checks we should perform to see if we can get the Charts to render.  Attached is a picture of the 3d Stacked Column chart in Javascript on an iPad3.

 

Thank you for your assistance.

 

 

post-41581-0-79085800-1375737503_thumb.jpg

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

It seems, this could be the compatibility issue with other CSS/JavaScript files which you are using with FusionCharts XT files.

 

could you please disable the Flash player plugin from desktop browser and try rendering the charts in JavaScript mode, on desktop browser and let us know if the same issue replicates?

 

Also, try once rendering the chart of your application, using the native browser of iPhone and let us know?

If feasible, please provide the complete scaled down sample (including all JavaScript/CSS files) and the steps to follow to replicate the issue at our end, so that we may step ahead to find the exact issue.

Awaiting your valuable inputs.

Share this post


Link to post
Share on other sites

As we continue to work together on this (Since this is related to Support Case #189057), here is a reference to another person who had the same issue with VPN (which seems to be the cause of this issue).  At the end of this forum thread, it looks like some modified .js files were provided.  They didn't work for me, but these were older scripts as they were packaged with an older version of FusionCharts anyway.

 

http://forum.fusioncharts.com/topic/10588-black-charts-in-chromefirefox/?view=findpost&p=41482&hl=vpn

 

For the rest of the FusionCharts community that view these forums, I'm going to post my current findings on this issue from our e-mail thread on this support issue:

 

The issue when drawing with SVG when accessing the site through our webVPN seems to deal with any fill=url() where the url is generated to point to a <lineargradient> defined in the <defs> node.  The generated SVG doesn't seem to pick up the CISCO token address and goes with the site address as its base URL.  Therefore, it can't find the lineargradient id and can draw the rectangle.  I assume, since it's documented that FusionCharts renders Javascript using SVG and VML that is SVG is not available it renders with VML which seems to not deal with these url problems and is rendered correctly.

 

 

 

HTML Outputs.zip

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Please note that FusionCharts JavaScript charts uses SVG or VML based on the browser. Hence, VML only JavaScript chart can be rendered on IE 8.

 

Could you please try once by explicitly loading the all FusionCharts JavaScript files in the same order as mentioned below and see if it helps?

Ref. Code:
<script type="text/javascript" src="FusionCharts/jquery.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.HC.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.HC.Charts.js"></script>

 

Awaiting your response.

Share this post


Link to post
Share on other sites

Your suggestion was did not work.  Based on your support response it seems that FusionCharts would need access to our VPN to address the issue.  I'm not sure that is a possibility.  Therefore, with regard to this Forum thread, there is not much we can do from this point on.  If we find a solution on our own, I'll be sure to post it.  I am disappointed a solution could not be found.

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