Sign in to follow this  
Followers 0
Steve Osborn

Scrunched display of chart on iPad

By Steve Osborn, in General usage

Recommended Posts

Steve Osborn   

Steve Osborn
Posted

Hi.  I have a situation where I am displaying 2 charts in a table row along with some other cell data.  The first cell is 40% width, the chart next to it is 40%, and the cell with the last chart is 20%.  The page has always worked well on PCs but when I bring up the page on an iPad, the 2 charts are squished width-wise and each appear as narrow patches within their cells.  What could be causing this?  Is it a problem within the chart description, the ipad device itself, or could it be an issue with the HTML?  Thanks.

 

here is the page:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Customer Relationship Management</title>
<link rel="StyleSheet" href="/css/dms.css">

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

<script language="JavaScript" src="../FusionChartsXT/FusionCharts.js"></script>

</head>
<body bgcolor="#666666" >
<center>
<form method="post" action="crm1.pgm">
<table border="0" width="90%" class="header" cellpadding="0" cellspacing=" 0">
<tr>
<td align=left" valign="middle"><div class="titlesearch">Customer Search:&nbsp;<input type="text" name="custid" size="10" maxlength="10">&nbsp;&nbsp;<input type="submit" name="submit" value="Search"></div></td>
<td align="right" valign="middle"><div class="title">Customer Relationship Management</div></td>
</tr>
</table>
</form>
</center>

<center>
<table border="0" width="90%" rules="none" cellspacing="5">
<tr>

<td align="left" width="40%" valign="top">
<table class="normal" rules="none" width="100%" >
<tr>
<th class="normal" align="center" colspan="2" valign="center">Customer Information&nbsp;&nbsp;<a href="http://www.d" onclick="popup(this.href,'win2',924,668);return false"><font size="2px">(Map)</font></a></th>
</tr>
<tr>
<td class="normal" align="left" colspan="2">ACCESS  CORP</td>
</tr>
<tr>
<td class="normal" align="left" colspan="2"></td>
</tr>

<tr>
<td class="normal" align="left" colspan="2">650 N. </td>
</tr>

<tr>
<td class="normal" align="left" colspan="2">P.O. Box 1</td>
</tr>

<tr>
<td class="normal" align="left" colspan="2">CENTERVILLE&nbsp;,XX&nbsp;&nbsp;84014</td>
</tr>
<tr>
<td class="normal" align="left" nowrap>Phone:&nbsp;(801)555-0300</td>
<td class="normal" align="left" nowrap>Fax:&nbsp;(801)555-0500</td>
        </tr>
<tr>
<td class="normal" align="left" colspan="2" nowrap>Account #&nbsp;&nbsp;640.000</td>
</tr>
</table>
</td>
    
<td class="normal" rowspan="2" width="40%" valign="top">
     <table class="normal" rules="0" width="100%" border="3" bordercolor="darkblue" >
<tr>
<td class="normal">
<DIV id="iRcvAgDiv" style="width:100%; height:235px;">The Receivables Aging chart will appear here.</DIV>
<script type="text/javascript">
var iRcvAgObj = new FusionCharts("/FusionChartsXT/Column3D.swf","iRcvAg","100%","100%","0","1");
iRcvAgObj.setXMLData("<chart caption='Receivables Aging' subCaption='(click on bar to display invoices)' yAxisName='' xAxisName='' baseFont='Arial' baseFontColor='000000' baseFontSize='10' canvasBaseColor='FEFEFE' canvasBaseDepth='10' canvasBgDepth='5' canvasBgColor='EFEFEF' decimals='0' formatNumber='1' formatNumberScale='0' numberPrefix=' decimalSeparator='.' bgAlpha='90,100' bgRatio='0,100' bgAngle='290' bgColor='FEFEFE,AAAAAA' zeroPlaneAlpha='55' zeroPlaneBorderColor='5F5F5F' zeroPlaneColor='EEEEEE' use3DLighting='1' showShadow='1'><set Label='FUTURE DUE' value='.00' link='crm2.pgm?custid=640.000&desc=FUTURE DUE' color='FF0000'/><vLine color='F0F0F0' linePosition='.5'/><set Label='CUR ACTVTY' value='.00' link='crm2.pgm?custid=640.000&desc=CUR ACTVTY' color='FFAA00'/><vLine color='F0F0F0' linePosition='.5'/><set Label='CURRNT DUE' value='.00' link='crm2.pgm?custid=640.000&desc=CURRNT DUE' color='FFEA00'/><vLine color='F0F0F0' linePosition='.5'/><set Label='31-60 DAYS' value='.00' link='crm2.pgm?custid=640.000&desc=31-60 DAYS' color='00FF00'/><vLine color='F0F0F0' linePosition='.5'/><set Label='61-90 DAYS' value='.00' link='crm2.pgm?custid=640.000&desc=61-90 DAYS' color='0000FF'/><vLine color='F0F0F0' linePosition='.5'/><set Label='91 PLUS' value='.00' link='crm2.pgm?custid=640.000&desc=91 PLUS' color='7F00FF'/></chart>");
iRcvAgObj.render("iRcvAgDiv");
</script>
</td>
</tr>
</table>
</td>
    
<td class="normal" rowspan="2" width="20%" valign="top">
<table class="normal" rules="0" width="100%" border="3" bordercolor="darkblue" >
<tr>
<td class="normal">

<DIV id="iCrdInfDiv" style="width:100%; height:235px;">The Credit Information chart will appear here. </DIV>
<script type="text/javascript">
var iCrdInfObj = new FusionCharts("/FusionChartsXT/Pie3D.swf", "iCrdInf", "100%", "100%", "0", "1");
iCrdInfObj.setXMLData("<chart caption='Credit Information' startingAngle='270' xAxisName='' yAxisName='' pieRadius='70' enableRotation='1' showValues='1' showPercentValues='1' showPercentInToolTip='0' zeroPlaneColor='EEEEEE' zeroPlaneAlpha='90' zeroPlaneBorderColor='5F5F5F' decimals='0' formatNumber='1' formatNumberScale='0' decimalSeparator='.' numberPrefix=' thousandSeparator=',' baseFontColor='000000' baseFontSize='10' baseFont='Arial' canvasBgDepth='50' canvasBaseColor='FEFEFE' enableSmartLabels='1' manageLabelOverflow='1' useEllipsesWhenOverflow='0' use3DLighting='1' bgAlpha='90,100' bgRatio='0,100' bgAngle='290' bgColor='FEFEFE,AAAAAA' showShadow='1' showLegend='1' legendPosition='BOTTOM' legendShadow='1'><set label='Credit' value='1000.00' color='FF0000'/><set label='Owed' value='.00' color='00FF00'/><set label='Avail' value='1000.00' color='FFEA00'/></chart>");
iCrdInfObj.render("iCrdInfDiv");
</script>
</td>
</tr>
</table>
</td>
</tr>

<tr valign="bottom">
<td width="40%" >
<table class="normal" rules="0" width="100%">
<tr>
<th class="normal" align="left">Contact</th>
<th class="normal" align="center">Phone</th>
<th class="normal" align="left">Ext</th>
</tr>

</table>
</td>
</tr>
<tr>
<td valign="top">
<table rules="0" width="100%" border="0">
<tr>
<td align="left"><a href="crm9.pgm?custid=640.000" onclick="popup(this.href,'win2',924,668);return false"><img src="/images/notes_button.jpg" alt="Customer Notes" border="0"></a></td>
<td align="center"><a href="crm6.pgm?custid=640.000"><img src="/images/purchases_button.jpg" alt="Customer Purchases" border="0"></a></td>
<td align="right"><a href="crm7.pgm?custid=640.000"><img src="/images/credits_button.jpg" alt="Credit Analysis" border="0"></a><td>
</tr>
<tr>
<td align="left"><a href="crm12.pgm?custid=640.000"><img src="/images/lostsales_button.jpg" alt="Lost Sales" border="0"></a></td>
<td align="center"><a href="crm11.pgm?custid=640.000"><img src="/images/lnp_button.jpg" alt="Lines Not Purchased" border="0"></a></td>
<td align="right"><a href="crm14.pgm?custid=640.000"><img src="/images/fillrates_crm.jpg" alt="Fill Rates" border="0"></a><td>
</tr>

</table>
</td>
<td valign="top" colspan="2" rowspan="2">
<table class="normal" rules="0" width="100%">
<tr>
<td class="normal" align="left"><strong>Date Created:</strong></td>
<td class="normal">&nbsp;</td>
<td class="normal" align="right">02/01/2000</td>
</tr>
<tr>
<td class="normal" align="left"><strong>Max Owed:</strong></td>
<td class="normal" align="right">.00</td>
<td class="normal" align="right">00/00/0000</td>
</tr>
<tr>
<td class="normal" align="left"><strong>Last Pymt:</strong></td>
<td class="normal" align="right">.00</td>
<td class="normal" align="right">04/22/2004</td>
</tr>
<tr>
<td class="normal" align="left"><strong>Last Inv Amt:</td>
<td class="normal" align="right">.00</td>
<td class="normal" align="right">00/00/0000</td>
</tr>
<tr>
<td class="normal" align="left"><strong>Avg Monthly Net Sales:</td>
<td class="normal" align="right">.00</td>
<td class="normal">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<table class="normal" rules="0" width="100%">
<tr>
<td class="normal" align="left"><strong>Salesman:</strong>&nbsp;&nbsp;</td>
</tr>
<tr>
<td class="normal" align="left"><strong>Customer Rank:</strong>&nbsp;&nbsp;Unranked</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3"><div >
<table class="normal" rules="0" width="100%" border="3" bordercolor="darkblue" >
<tr>
<td align="center" bgcolor="#eeeeee">

<DIV id="iSlsRtnDiv" style="width:100%; height:250px;" >The Sales & Return charts will appear here.</DIV>
<script type="text/javascript">

var iSlsRtnObj = new FusionCharts("/FusionChartsXT/MSColumnLine3D.swf", "iSlsRtn", "100%", "100%", "0", "1");
iSlsRtnObj.setXMLData("<chart caption='Customer Sales & Returns' subcaption='YTD Sales Down .00%' xAxisName='(click on bar to display Sales and Credit percentages)' yAxisName='' overlapColumns='1' baseFont='Arial' baseFontColor='000000' baseFontSize='10' use3DLighting='1' bgAlpha='90,100' bgRatio='0,100' bgAngle='290' bgColor='FEFEFE,AAAAAA' canvasBaseColor='FEFEFE' canvasBaseDepth='8' canvasBgDepth='5' canvasBgColor='EFEFEF' showValues='0' decimals='0' formatNumber='1' formatNumberScale='0' decimalSeparator='.' numberPrefix=' zeroPlaneAlpha='55' zeroPlaneBorderColor='5F5F5F' zeroPlaneColor='EEEEEE' showShadow='1' animation='1' defaultAnimation='1' ><categories font='Arial' fontsize='10' fontcolor='000000'><category name='JAN'/><vLine color='F0F0F0' linePosition='.5'/><category name='FEB'/><vLine color='F0F0F0' linePosition='.5'/><category name='MAR'/><vLine color='F0F0F0' linePosition='.5'/><category name='APR'/><vLine color='F0F0F0' linePosition='.5'/><category name='MAY'/><vLine color='F0F0F0' linePosition='.5'/><category name='JUN'/><vLine color='F0F0F0' linePosition='.5'/><category name='JUL'/><vLine color='F0F0F0' linePosition='.5'/><category name='AUG'/><vLine color='F0F0F0' linePosition='.5'/><category name='SEP'/><vLine color='F0F0F0' linePosition='.5'/><category name='OCT'/><vLine color='F0F0F0' linePosition='.5'/><category name='NOV'/><vLine color='F0F0F0' linePosition='.5'/><category name='DEC'/><vLine color='F0F0F0' linePosition='.5'/><category name='AVG'/></categories><dataset seriesName='eCommerce' fontcolor='0000FF' color='FFEA00'><set value='.00' link='crm5.pgm?custid=640.000&desc=JAN'/><set value='.00' link='crm5.pgm?custid=640.000&desc=FEB'/><set value='.00' link='crm5.pgm?custid=640.000&desc=MAR'/><set value='.00' link='crm5.pgm?custid=640.000&desc=APR'/><set value='.00' link='crm5.pgm?custid=640.000&desc=MAY'/><set value='.00' link='crm5.pgm?custid=640.000&desc=JUN'/><set value='.00' link='crm5.pgm?custid=640.000&desc=JUL'/><set value='.00' link='crm5.pgm?custid=640.000&desc=AUG'/><set value='.00' link='crm5.pgm?custid=640.000&desc=SEP'/><set value='.00' link='crm5.pgm?custid=640.000&desc=OCT'/><set value='.00' link='crm5.pgm?custid=640.000&desc=NOV'/><set value='.00' link='crm5.pgm?custid=640.000&desc=DEC'/><set value='.00' link='crm5.pgm?custid=640.000&desc=Avg'/></dataset><dataset seriesName='Sales' fontcolor='FFEA00' color='0000FF'><set value='.00' link='crm5.pgm?custid=640.000&desc=JAN'/><set value='.00' link='crm5.pgm?custid=640.000&desc=FEB'/><set value='.00' link='crm5.pgm?custid=640.000&desc=MAR'/><set value='.00' link='crm5.pgm?custid=640.000&desc=APR'/><set value='.00' link='crm5.pgm?custid=640.000&desc=MAY'/><set value='.00' link='crm5.pgm?custid=640.000&desc=JUN'/><set value='.00' link='crm5.pgm?custid=640.000&desc=JUL'/><set value='.00' link='crm5.pgm?custid=640.000&desc=AUG'/><set value='.00' link='crm5.pgm?custid=640.000&desc=SEP'/><set value='.00' link='crm5.pgm?custid=640.000&desc=OCT'/><set value='.00' link='crm5.pgm?custid=640.000&desc=NOV'/><set value='.00' link='crm5.pgm?custid=640.000&desc=DEC'/><set value='.00' link='crm5.pgm?custid=640.000&desc=Avg'/></dataset><dataset seriesName='Returns' fontcolor='00FFFF' color='FF0000'><set value='.00' link='crm5.pgm?custid=640.000&desc=JAN'/><set value='.00' link='crm5.pgm?custid=640.000&desc=FEB'/><set value='.00' link='crm5.pgm?custid=640.000&desc=MAR'/><set value='.00' link='crm5.pgm?custid=640.000&desc=APR'/><set value='.00' link='crm5.pgm?custid=640.000&desc=MAY'/><set value='.00' link='crm5.pgm?custid=640.000&desc=JUN'/><set value='.00' link='crm5.pgm?custid=640.000&desc=JUL'/><set value='.00' link='crm5.pgm?custid=640.000&desc=AUG'/><set value='.00' link='crm5.pgm?custid=640.000&desc=SEP'/><set value='.00' link='crm5.pgm?custid=640.000&desc=OCT'/><set value='.00' link='crm5.pgm?custid=640.000&desc=NOV'/><set value='.00' link='crm5.pgm?custid=640.000&desc=DEC'/><set value='.00' link='crm5.pgm?custid=640.000&desc=Avg'/></dataset><dataset renderAs='LINE' seriesName='2012' color='AA5500' lineThickness='6'><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/></dataset><dataset renderAs='LINE' seriesName='Budget' color='00FF00' lineThickness='3' dashed='1'><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/><set value='.00'/></dataset></chart>");
iSlsRtnObj.render("iSlsRtnDiv");

</script>
</td>
</tr>
</table>
</div>
</td>
</tr>

</table>
</center>
<center>
<table width="90%" rules="none" border="0">
<tr>
<td align="center"><div class="xsmallw">&copy; DMS Systems Corp.</div></td>
</tr>
</table>
</center>
</body>
</html>

Share this post

Link to post
Share on other sites

Guest Rishab   

Guest Rishab
Posted

Hi,

Below are the snapshots of the chart rendered in PC and iPad using the data which you provided and the sample application.

Please provide some more information regarding the issue that you are facing.

 

 

post-47865-0-40604200-1380623193_thumb.png

post-47865-0-69430700-1380623335_thumb.jpg

FC_ipad.zip

Share this post

Link to post
Share on other sites

Steve Osborn   

Steve Osborn
Posted

The error I am getting is:

 

Javascript error on line 1

A negative value for rect <width> is not allowed.

 

 

That is all that it tells me.  Is there some setting on ipads that corresponds to this?  Is there some code I can place in my fusioncharts that would override this?  Thanks.

 

 

 

post-51416-0-92772800-1380638715_thumb.png

Share this post

Link to post
Share on other sites

Guest Rishab   

Guest Rishab
Posted

Hi,

Please confirm that the issue persists in the sample application attached in the earlier post and also let me know the FusionCharts XT version you are using to render the charts.

At my end I'm unable to replicate the issue, using FusionCharts XT (v3.3.1) sr2.

The attached item is the screen shot when the charts are rendered in iPad 4 using current version of FusionCharts XT suite.

 

post-47865-0-28264700-1380800142_thumb.png

Share this post

Link to post
Share on other sites

Rambauldi   

Rambauldi
Posted

Hi there,

 

I know this is an old post but i am having a similar issue and i cannot figure out how to correct it. On all PC browsers (including Safari), the charts show fine, but on iPad, the graphs show squished. It only happens when i have set a percentage based width for the charts in the C# code for the page. If i set it to a fixed width (which is not an option for me) they display correctly. 

 

In developer tools, i can see that the chart itself has given itself the correct percentage width but every child element has set itself to a small number of pixels, visually you can see the graph growing when it loads, then just stops growing and remains squished, almost like the chart is rendering itself pixel by pixel to work out the size of its parent container and then crashing out and remaining on wherever it gets to.

 

The screenshots attached shows the iPad and PC browser versions of the problem - i am using an iPad simulator (Electric Mobile Studio 2012) within VS2013 for the iPad screenshot but i have, and can, confirm that it is truly representative of what is happening on actual iPads. I have also attached a screenshot of the developer tools showing the width it has set for child elements within the chart.

 

I would post code for how it is defined, but it is too much to copy in and i cannot provide the link to the page as it is an authenticated system, but the charts are in a section of HTML thats looks like this (the charts themselves are wrapped in a custom control but this doesnt change how they a rendered, using it in literally hundreds of other places):

<table id="MainReportTable">
   <tr>
      <td id="MainGraphContainer">
         <table id="tdActualYearGraph">
            <tr>
               <td>
                  <vital:VitalFusionChart ID="divActualYearGraph" runat="server"></vital:VitalFusionChart>
               </td>
               <td>
                  <vital:VitalFusionChart ID="divParcGraph" runat="server"></vital:VitalFusionChart>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

In C# they are set like this, with 100% width (again, using my own control methods but  you will get the jist):       

 VitalFusionChart.FastChartSet(divParcGraph, "/WebCharts/V3/StackedColumn3DLine.swf", "", jOut, "fcParc", "100%", "430", true, true);

Been bashing my head against this a while, any help you can offer would be greatly appreciated.

 

Kind Regards,

 

Nathan

post-63423-0-42952300-1415956436_thumb.png

post-63423-0-73734400-1415956438_thumb.png

post-63423-0-65129500-1415957087_thumb.png

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
Sign in to follow this  
Followers 0
Go To Topic Listing General usage