satheesans

Area Chart isnot working in iPad/ iPhone devices

Recommended Posts

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

post-51401-0-44943700-1385127462_thumb.jpg

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 by satheesans

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

 

post-51401-0-22934000-1386091234_thumb.jpg

 

I can't share the URL as it is internal

 

Please let me know if you got any clue

 

Best Regards,

Sudheesh

Share this post


Link to post
Share on other sites
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.

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