Pie Chart Is Not Rendering Properly On Mobile Browser

[cshah786]

Hi,

 

I am using an evaluation version of FusionChart. I am having a Pie Chart(which is on index.jsp) which has a clickable link (eg pay.jsp), it works fine on clicking of part of pie chart and opens that respective page (i.e pay.jsp). But when I go back to (index.jsp) from pay.jsp in mobile browser using a link, the Pie chart colour turns  black. On web browser, it is working fine.

 

Any help would be appreciated.

 

Thanks

 

[Swarnam]

Hey,

 

 

Welcome to FusionCharts Forum Post.

 

Can you please share a scaled down sample code to replicate the issue?

[cshah786]

 Below is the code snippet in which click of a pie chart part it will take me to pie.jsp. And when I navigate back to index.jsp from pay.jsp (i.e  <li data-icon = "false"><a href="index.jsp">Home</a></li>) the pie chart color turns black in mobile browser.

 

index .jsp 

<script type="text/javascript"><!--

                               <!---->     FusionCharts.setCurrentRenderer('javascript');

                                var myChart = new FusionCharts("Charts/Pie2D.swf", "myChartId", "500", "190", "0");

 

myChart.setXMLData("<chart labelDisplay='WRAP' slantLabels='1'  subCaption='' palette='' showLabels='0' showValues='0' use3DLighting='1' numberPrefix='' sformatNumberScale='1' sNumberPrefix='$' syncAxisLimits='1' rotateValues='0' showSum='0' pieYScale='50' pieSliceDepth='10' showBorder='0' bgcolor = 'ffffff'  placevaluesinside='1' enableSmartLabels = '0' manageLabelOverflow = '1' useEllipsesWhenOverflow = '1' isSmartLineSlanted = '1' pieRadius = '65' showLegend = '1' legendPosition = 'RIGHT' legendPadding = '-220' chartLeftMargin = '-40' chartBottomMargin = '40'  ><set label='Pay' value='154221' color ='#99cc33' link = 'Pay.jsp' /><set label='Car' value='7888' color = 'ff9999' link = 'Car.jsp' /> </chart>");                                 

 

 

myChart.render("chartContainer");

 

                         

                            </script>

 

 

Pay.jsp

 

<div data-role="popup" id="popupMenu" data-theme="k">

        <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="k">

           <li data-icon = "false"><a href="index.jsp">Home</a></li>

              <li data-icon = "false"><a href="Car.jsp">Car</a></li>

               <li data-icon = "false"><a href="logout.jsp">Logout</a></li>

        </ul>

</div>

 

Thanks

[Guest Sashibhusan]

Hi,

 

We have tested your code using latest FusionCharts XT v3.3.1 SR1 evaluation files and it is working fine on Mobile devices. (Tested in Samsung Galaxy S2 and iPhone5).

 

Could you please let us know the device details and the FusionCharts version details, which is replicating the issue at your end?

 

Also, please provide the screen shot of the issue, to better look into it.

 

Awaiting your response.

[cshah786]

 

Hi,

 

Attached is the screenshot taken in iphone 4s. 

 

In first screenshot, while clicking on section of pie chart i.e green it takes to pay.jsp.

 

In second screenshot, while clicking on index in menu, it takes to index.jsp.

 

In third screenshot, on index.jsp we get the black pie chart.

 

We have tested this scenario on mobile browser of samsung galaxy s2, iphone 4s and 5.

However,It works on desktop web browser.

 

Thanks

Edited May 24, 2013 by cshah786

[Haritha]

Hi,

 

We have tried to create a sample using the code snippets that you have sent and it seems that we could not replicate your problem in Samsung Galaxy S2, iPhone 4s and 5 by using our latest version of FusionCharts v3.3.1 SR2.

 

Could you please let us know the version of FusionCharts that you are using? Also, could you upgrade to the latest version and check if it works fine?

 

You may download the evaluation copy of the latest version from http://www.fusioncharts.com/download/trials/

 

Awaiting your response. 

[[email protected]]

Hello Team,

 

I am using Fusion Chart xt trail version v3.6.0. 

 

and i am using jquery mobile and when after successful login i am rendering fusion chart donut.

 

but chart is not coming properly,  as i planned to purchase.

 

i am attaching the screen shot of the same.

 

can you please look in to this at the earliest so i can think of purchasing it.

 

 

my code :

 

JAVASCRIPT :

 

/**

 * 

 */

$(document).ready(function () {

 

$.ajaxSetup({

cache: false 

});

 

 

$('#tableContainer1').hide();

 

$('#backclick').on('click',function(){

$('#tableContainer1').hide();

$("#chartContainer").show();

});

 

$.ajax({

 url: "FetchDashboardData",

 cache:false,

 type: 'POST',

 data: {

 },

 success: function( data ) 

 {

FusionCharts.ready(function () {

 

var myChart = new FusionCharts("Doughnut2D", "myChartId", "100%", "500", "0", "1");

var charData = "{\"chart\": {\"caption\": \"INTELLECT DASHBOARD\",\"subCaption\": \"IBG\",\"numberPrefix\": \"$\",\"use3DLighting\": \"1\",\"numberprefix\":\"\",\"showborder\":\"0\",\"enablesmartlabels\":\"1\",\"startingangle\":\"310\",\"showlabels\":\"1\",\"showpercentvalues\":\"1\",\"showlegend\":\"1\",\"centerlabel\":\"$label: $value\",\"centerlabelbold\":\"1\",\"enableMultiSlicing\":\"0\",\"showtooltip\":\"0\",\"decimals\":\"0\",\"usedataplotcolorforlabels\":\"1\",\"theme\":\"fint\",\"smartLineColor\":\"#000000\",\"smartLineThickness\":\"2\",\"smartLineAlpha\":\"60\",\"isSmartLineSlanted\":\"0\",\"legendNumColumns\":\"2\"},\"data\": "+dynamic data comes here from database+"}";

myChart.setJSONData( charData ); 

                        myChart.render("chartContainer");

});

 }

});

 

});

 

 

 

JSP :

 

this is in body of the JSP.

 

<div data-role="main" class="ui-content" data-type="horizontal" style="text-align:center;">

<div id="chartContainer">Please Wait, Chart Is Loading...</div>

 

 

After click on submit , if login is successful then fusion chart page i am calling

 

I tested it in iphone6 , please test and contact me if you resolve it at the earliest.

 

Name : Sahil Verma

Contact : 7276453222

email : [email protected]

 

Thanks in Advance.

Edited March 13, 2015 by [email protected]

[[email protected]]

Hi Team,

 

awaiting for your reply.

[Sanjukta]

Hi Team,

 

awaiting for your reply.

Hi,

 

Could you please send us a Live URL so that we might test it as we are unable to replicate the issue otherwise?

 

Awaiting your response.