ubercool

Fix Suggestion: Chart Requires Scrolling On Ipad And Iphone

Recommended Posts

Guest Sumedh

Hi,

 

Apologies for the delayed response.

 

Can you please elaborate a bit more your issue?

 

Chart is rendering fine on iPad. Please find the attached screen-shot for your reference.

post-24802-0-53953600-1355909090_thumb.png

Share this post


Link to post
Share on other sites

Sorry, iPad is OK, but iPhone is not. Screenshot attached.

 

 

Hi,

 

Apologies for the delayed response.

 

Can you please elaborate a bit more your issue?

 

Chart is rendering fine on iPad. Please find the attached screen-shot for your reference.

post-27984-0-57314000-1355938742_thumb.jpg

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi,

 

For proper positioning, you would need to check the device on which the charts are rendered and apply CSS accordingly.

Share this post


Link to post
Share on other sites

For proper positioning, you would need to check the device on which the charts are rendered and apply CSS accordingly.

 

Can you help me understand what I would need to do? Here's the <div> HTML for chart embedding:

 

<div id="chartbox">

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

<script type="text/javascript">// <![CDATA[

var myChartId = 'Share of Jobs Held by Women';

var myChartSWF = '/FusionCharts/MSColumn2D.swf';

var myChartWidth = '614';

var myChartHeight = '439';

var myDataXML = '/FusionChartsData/women-share-jobs.xml';

document.write('<span id="' + myChartId + 'container">')

var chartObj = new FusionCharts(myChartSWF, myChartId, myChartWidth, myChartHeight);

chartObj.setDataURL(myDataXML);

chartObj.render(myChartId + 'container'); // ]]></script>

</div>

 

And here's the CSS style for that div:

 

#chartbox {

width: 100%;

align: center;

margin-top: -30px;

margin-left:auto;

margin-right:auto;

margin-bottom: 3px;

background: transparent;

overflow: auto;

}

 

Thanks!

Share this post


Link to post
Share on other sites

Anybody have any ideas what's going on? The situation is getting worse, as the iPhone and iPad now show only "invalid data" while the chart displays fine on the desktop:

 

http://www.michaeltchong.com/son-i-am-disappoint-meme/

 

Can you help me understand what I would need to do? Here's the <div> HTML for chart embedding:

 

<div id="chartbox">

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

<script type="text/javascript">// <![CDATA[

var myChartId = 'Share of Jobs Held by Women';

var myChartSWF = '/FusionCharts/MSColumn2D.swf';

var myChartWidth = '614';

var myChartHeight = '439';

var myDataXML = '/FusionChartsData/women-share-jobs.xml';

document.write('<span id="' + myChartId + 'container">')

var chartObj = new FusionCharts(myChartSWF, myChartId, myChartWidth, myChartHeight);

chartObj.setDataURL(myDataXML);

chartObj.render(myChartId + 'container'); // ]]></script>

</div>

 

And here's the CSS style for that div:

 

#chartbox {

width: 100%;

align: center;

margin-top: -30px;

margin-left:auto;

margin-right:auto;

margin-bottom: 3px;

background: transparent;

overflow: auto;

}

 

Thanks!

Share this post


Link to post
Share on other sites

Hi,

 

Apologies for the delayed response.

 

http://www.michaeltchong.com/son-i-am-disappoint-meme/ >>Using iPad, the charts renders without any data points is due to compatibility issue between jQuery 1.8.0 and FusionCharts XT SR3 version.

However, we are glad to let you know this issue has been fixed in our latest release of FusionCharts. Can you please try upgrading to the latest version of FusionCharts XT SR5?

Please refer to our "Version History" at: http://docs.fusioncharts.com/charts/contents/Introduction/WhatsNew32.html

Please read more at : http://forum.fusioncharts.com/topic/12300-datapoints-do-not-render-on-jquery-180/

 

Hope this helps.

Share this post


Link to post
Share on other sites

Thanks for SR5 answer. The actual chart now plots correctly, the line or columns actually show. The only remaining challenge is that the charts still require scrolling to see the entire plot area on iPhone/iPad. Why do you think your dynamic resizing no longer works in these newer WordPress themes?

 

Since it's not an img, you are handling all formatting for each chart (this is using the inspector on the Mac, I can't see what your JavaScript chart code looks like on the iPad):

 

<span id="Apple revenuescontainer"><object type="application/x-shockwave-flash" lang="EN" class="FusionCharts" id="Apple revenues" data="/FusionCharts/Line.swf" width="600" height="439" style="visibility: visible; "><param name="scaleMode" value="noScale"><param name="scale" value="noScale"><param name="wMode" value="opaque"><param name="bgColor" value="#ffffff"><param name="allowScriptAccess" value="always"><param name="quality" value="best"><param name="flashvars" value="lang=EN&debugMode=undefined&scaleMode=noScale&animation=undefined&DOMId=Apple revenues&registerWithJS=1&chartWidth=600&chartHeight=439&InvalidXMLText=Invalid data.&stallLoad=true&dataXML=undefined&dataURL=/FusionChartsData/apple-revenues-2000-2012.xml"></object>

</span>

 

 

Hi,

 

Apologies for the delayed response.

 

http://www.michaeltc...isappoint-meme/ >>Using iPad, the charts renders without any data points is due to compatibility issue between jQuery 1.8.0 and FusionCharts XT SR3 version.

 

However, we are glad to let you know this issue has been fixed in our latest release of FusionCharts. Can you please try upgrading to the latest version of FusionCharts XT SR5?

 

Please refer to our "Version History" at: http://docs.fusionch...WhatsNew32.html

 

Please read more at : http://forum.fusionc...-on-jquery-180/

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hey,

 

Can you please specify the width/height of the chart dimensions in percentage instead of absolute pixels values?

 

Starting FusionCharts XT, charts can dynamically resize itself when the parent container resizes.

For this you will need to :

  • Set the chart's size in percentage, and
  • Set your HTML chart container such that its dimension changes dynamically when the browser resizes or due to other changes taking place in the page (like when an element is added or removed)

Whenever the container element resizes, the chart will also dynamically resize itself instantly.

 

Please read more at: http://docs.fusioncharts.com/charts/contents/advanced/PercentResize.html

 

Also, please test the following demo using iPad/iPhone: http://docs.fusioncharts.com/charts/Code/MyFirstChart/site-visitor-resize-dynamic.html

 

Hope this helps.

 

 

Share this post


Link to post
Share on other sites

OK I did what you suggested and it solved the problem on the iPhone but introduced an anomaly on the iPad, which you can see on the attached screenshot. Here's my post embed code:

 

 

<div id="chartbox" style="height:100%;" >

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

<script type="text/javascript">// <![CDATA[

var myChartId = 'Apple revenues';

var myChartSWF = '/FusionCharts/Line.swf';

var myChartWidth = '100%';

var myChartHeight = '60%';

var myDataXML = '/FusionChartsData/apple-revenues-2000-2012.xml';

document.write('<span id="' + myChartId + 'container">')

var chartObj = new FusionCharts(myChartSWF, myChartId, myChartWidth, myChartHeight);

chartObj.setDataURL(myDataXML);

chartObj.render(myChartId + 'container'); // ]]></script>

</div>

post-27984-0-58715700-1359566797_thumb.jpg

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