Area Chart isnot working in iPad/ iPhone devices

[satheesans]

Hi

 

I am using 2 types of fusion chart in my application. Pie chart and Area chart. Pie chart is rendering properly. But Area chart is not working I am getting the message as "Loading chart, Please wait". The screen shot is attached for your reference. I am pasting the code below for more details

 

 if(FusionCharts("myChartId")){
               FusionCharts( "myChartId" ).dispose();
             }
            
            
            var myChart;
            if(hasFlashInstalled ==  false){
                FusionCharts.setCurrentRenderer('javascript');
                myChart = new FusionCharts( "/media/Charts/StackedArea2D.swf", "myChartId", "800", "400", "0","1");
                alert('javascript chart');
            }else{
                //alert('Flash chart');
                myChart = new FusionCharts( "/media/Charts/StackedArea2D.swf", "myChartId", "100%", "100%", "0", "1");
            }
            
              myChart.setXMLData(finalChartXml);
          
              myChart.setChartAttribute("showValues", "0");                                    
            myChart.setChartAttribute("formatNumberScale", "0");
            myChart.setChartAttribute("slantLabels", "0");
            myChart.setChartAttribute("decimals", "2");
            myChart.setChartAttribute("forceDecimals", "1");
            
            myChart.setChartAttribute("limitsDecimalPrecision", "0");
            
            myChart.setChartAttribute("showLegend", "1");
            myChart.setChartAttribute("legendPosition", "BOTTOM");
            
            myChart.setChartAttribute("showBorder", "0");
            myChart.setChartAttribute("bgColor", "FFFFFF,FFFFFF");
            myChart.setChartAttribute("bgAlpha", "10,100");
            myChart.setChartAttribute("bgAngle", "180");
            myChart.setChartAttribute("divLineColor", "FFFFFF");
            myChart.setChartAttribute("showAlternateHGridColor", "0");
            myChart.setChartAttribute("alternateHGridColor", "eeeeee");
            myChart.setChartAttribute("showAlternateVGridColor", "0");
            myChart.setChartAttribute("canvasBgColor", "FEFEFE");
            myChart.setChartAttribute("legendNumColumns", "2");
            myChart.setChartAttribute("labelDisplay", "ROTATE");
            myChart.setChartAttribute("anchorRadius", "2");
            myChart.setChartAttribute("adjustDiv", "0");
            myChart.setChartAttribute("numDivLines", "10");
            
            if(hasFlashInstalled ==  false){
                myChart.setChartAttribute("animation", "0");
            }
            myChart.render("chartContainer");

 

Your help and support is highly appreciated,

 

Best Regards,

Sudheesh

[Guest Sumedh]

Hi Sudheesh,

 

Can you try this demo link on your iPad?

http://www.fusioncharts.com/demos/gallery/stacked-charts/chart.asp?id=stackedarea2d_3

 

Also, check for the XML generation of Stacked Area 2D chart. The XML should be in proper format.

 

Please refer the following links:

http://docs.fusioncharts.com/charts/contents/ChartSS/StArea2D.html

 

http://docs.fusioncharts.com/charts/contents/FirstChart/UsingPureJS.html

[satheesans]

Hi Sumedh,

 

Thanks a lot for your reply. I have tested the link which you have provided in iPad and it is working fine.

 

For my chart in the application, I would like to point out that except iPad/ iPhone devices, the chart is getting loaded in all browsers when accesses from computer. I have tested it in Chrome, Firefox, IE and Safari and the chart is getting loaded in all these browsers. Only issue is with iPad/iPhone devices

 

However, I have compared the xmls used in the test link and the one used in my application. Both seems to be similar in terms of tags otherthan it has some additional properties. Please find the xml for more details

 

<?xml version = '1.0' encoding='utf-8' ?>
<chart labelStep='2' yAxisMinValue='101' yAxisMaxValue='2494'>
    <categories>
        <category label='2012-01-30'></category>
        <category label='2012-02-06'></category>
        <category label='2012-03-16'></category>
        <category label='2012-03-29'></category>
        <category label='2012-04-20'></category>
        <category label='2012-05-22'></category>
        <category label='2012-06-18'></category>
        <category label='2012-07-17'></category>
        <category label='2012-08-17'></category>
        <category label='2012-09-17'></category>
        <category label='2012-10-18'></category>
        <category label='2012-11-19'></category>
        <category label='2012-11-29'></category>
        <category label='2012-12-21'></category>
        <category label='2013-01-28'></category>
        <category label='2013-02-18'></category>
        <category label='2013-04-10'></category>
        <category label='2013-05-17'></category>
        <category label='2013-06-06'></category>
        <category label='2013-06-19'></category>
        <category label='2013-08-16'></category>
        <category label='2013-09-11'></category>
        <category label='2013-10-17'></category>
    </categories>
    <dataset seriesName='ABCD NAme'>
        <set value='0.00'></set>
        <set value='111.91'></set>
        <set value='217.51'></set>
        <set value='330.27'></set>
        <set value='434.07'></set>
        <set value='520.57'></set>
        <set value='528.35'></set>
        <set value='654.26'></set>
        <set value='790.86'></set>
        <set value='931.11'></set>
        <set value='1054.04'></set>
        <set value='1143.98'></set>
        <set value='1265.89'></set>
        <set value='1437.64'></set>
        <set value='1552.20'></set>
        <set value='1527.16'></set>
        <set value='1454.87'></set>
        <set value='1716.42'></set>
        <set value='1848.38'></set>
        <set value='1952.72'></set>
        <set value='2114.32'></set>
        <set value='2186.82'></set>
        <set value='2258.20'></set>
    </dataset>
    <dataset seriesName='PQRSTUV Name'>
        <set value='0.00'></set>
        <set value='111.13'></set>
        <set value='216.84'></set>
        <set value='211.67'></set>
        <set value='313.35'></set>
        <set value='402.44'></set>
        <set value='533.17'></set>
        <set value='648.40'></set>
        <set value='783.35'></set>
        <set value='927.91'></set>
        <set value='1046.97'></set>
        <set value='1134.50'></set>
        <set value='1262.97'></set>
        <set value='1430.10'></set>
        <set value='1435.93'></set>
        <set value='1521.18'></set>
        <set value='1503.45'></set>
        <set value='1769.22'></set>
        <set value='1941.35'></set>
        <set value='1952.57'></set>
        <set value='2279.62'></set>
        <set value='2240.24'></set>
        <set value='2484.89'></set>
    </dataset>
</chart>

 

Could you please check whether I am doing someting wrong here?

 

Best Regards,

Sudheesh

Edited November 25, 2013 by satheesans

[Haritha]

Hi Sudheesh,

 

The Stacked Area 2D chart shows up fine using the above given XML data.

 

You can see the Stacked Area 2D chart on browsers in desktop devices but not on iPad/iPhone, since you are seeing a Flash chart on desktop devices while you are seeing a JavaScript chart on iPad/iPhone devices. For testing purposes, make you code look like the one given below to see JavaScript charts on all devices. 

 

Ref.

 var myChart;
        
 FusionCharts.setCurrentRenderer('javascript');
 myChart = new FusionCharts( "StackedArea2D", "myChartId", "800", "400", "0","1");
              ...............

myChart.render("chartContainer");
          

Try using the above code and check if the chart gets rendered on all devices.

 

Do let us know your feedback.

[satheesans]

Hi Haritha,

 

What you said is correct! javascript charts are not getting displayed at all on the browser too !!.

 

I have cross checked the code with fusion chart demo site and it seems to be similar. But I am getting the message as "Loading the chart, please wait"

 

Could you please show some light on what could be the possible reason for this behavior. The Pie chart on the other page is working fine.

 

Is it because of some of the properties which we are setting is causing the issue?

 

- Sudheesh

[Guest Sumedh]

Hello Sudheesh,

 

Please check for all the necessary JavaScript files into your project.

 

> FusionCharts.js

> FusionCharts.HC.js

> FusionCharts.HC.Charts.js

> jquery.min.js

 

For more information, please refer the following link:

http://docs.fusioncharts.com/charts/contents/FirstChart/FirstChart.html

 

http://docs.fusioncharts.com/charts/contents/FirstChart/UsingPureJS.html

[satheesans]

Hi Sumedh,

 

I have all the above mentioned javascript files in the project.

 

Still facing the issue ony with Area 2d Chart

 

- Sudheesh

[Guest Sashibhusan]

Hi Sudheesh,

 

It seems from the code snippet in your first post, you are setting the <chart> attributes by calling "setChartAttribute()" method multiple times, which could be avoided by setting the attributes directly in the XML string or passing multiple attributes as objects to the method "setChartAttribute()".

 

Ref. Code snippet:

myChart.setChartAttribute( { "showValues" : "0", formatNumberScale: "0", slantLabels: "0" } );

Could you please render the chart in JavaScript mode, in any of your desktop browser and see from the browser developer tool > Network tab, if all the required JavaScript files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js, jquery.min.js) loaded correctly?

 

Also, (if feasible), please provide the live URL (drop a mail to <[email protected]> with the relevant inputs), to better look into your issue.

 

Hope this helps!

 

Awaiting your response.

[satheesans]

Hi Sashi,
 
I have a different (line chart) chart in a different application. and it is working fine for both javascript and flash. I have followed the same coding style for this chart also...

 

I checked in the application. All files the required files are available there.  Please find the attached screen shot of the files available in the application..

 

 

I can't share the URL as it is internal

 

Please let me know if you got any clue

 

Best Regards,

Sudheesh

[Guest Sashibhusan]

Hi Sudheesh,

 

Is it feasible for you to create a scaled down sample (similar to your use case) with some dummy XML data and provide us as a ZIP file (including all required FusionCharts JavaScript files), so that we could test from our end and replicate the issue?

 

Also, please mention the device details and iOS version details as more information.

 

Awaiting your valuable response.