Fix Suggestion: Chart Requires Scrolling On Ipad And Iphone

[ubercool]

As you can see from my charts I have added a subtitle to instruct my visitors to scroll charts to view them entirely by dragging either the chart title or its axis titles on an iPad or iPhone. Any chance you can fix this behaviour in an upcoming version to display the entire chart in webkit? Thanks.

 

http://www.michaeltc...-share-of-jobs/

[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.

[ubercool]

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.

[Guest Sumedh]

Hi,

 

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

[ubercool]

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!

[ubercool]

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!

[Swarnam]

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.

[ubercool]

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.

[Swarnam]

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.

 

 

[ubercool]

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>