It is currently Thu Oct 02, 2014 4:29 pm Advanced search

issue with iPhone

Technical support, bug reports and more.

issue with iPhone

Postby marcoeg » Thu Jun 10, 2010 2:39 am

I am using highcharts for an iPhone app with jQtouch. I can see the chart being drawn properly and then slided to the left and covered by a black rectangle. It works properly on Safari on Mac but not on the simulator. I am including a couple of pics showing the artifact. I wonder if someone else has had the same issue. Perhaps disabling some option is a viable workaround. Thanks.

-Marco G.

screen1.png
screen1.png (175.38 KiB) Viewed 2107 times

screen2.png
screen2.png (99.74 KiB) Viewed 2105 times
marcoeg
 
Posts: 2
Joined: Thu Jun 10, 2010 2:25 am

Re: issue with iPhone

Postby torstein.honsi » Thu Jun 10, 2010 2:35 pm

It's most likely a bug in the simulator since it actually works on the iPhone. The legend is also mispositioned. Is this version 1.2.5? The black square could be the tracker image map that overlays the chart's plot area.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9199
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: issue with iPhone

Postby marcoeg » Thu Jun 10, 2010 6:29 pm

Thank you for your prompt reply.

I thought it was a problem with the simulator too but I was wrong. The artifact appears more consistently in the emulator but on the iPhone as well. Perhaps is a borderline situation that is causing it.

I found a workaround by disabling animation. Any thoughts?

Cheers,

-Marco G.

ps. anyway, highcharts really rocks!
marcoeg
 
Posts: 2
Joined: Thu Jun 10, 2010 2:25 am

Re: issue with iPhone

Postby torstein.honsi » Fri Jun 11, 2010 3:01 pm

Not sure, perhaps something hangs and prints the chart at a pre-animation stage. But disabling animation is a good idea anyway. The iPhone isn't equipped to show a smooth JavaScript animation.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9199
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: issue with iPhone

Postby gmconanplz » Mon Jun 21, 2010 5:08 pm

Hi,

I also have a problem integrating highcharts with jqtouch library for iphone. For my problem, the legend didn't render well. It only showed a dark box, and a legend title (exactly the same with marcoeg image). It doesn't show the color for each of the categories.

Interestingly, when I opened the same website with Firefox, everything worked fine (see attached images). However, I don't have firefox on either iphone or ipad, so I really need it to work for safari. Just FYI, it also doesn't work with Google Chrome. There should definetely a way to fix it because the area graph showed up with very nice color. I really hope that someone could give me a direction to move forward. This has been a real struggle :(
gmconanplz
 
Posts: 4
Joined: Mon Jun 21, 2010 2:41 am

Re: issue with iPhone

Postby gmconanplz » Mon Jun 21, 2010 5:10 pm

Sorry, here is the attached image for my legend issues.

Thanks
Attachments
legends.png
Legends Issues
legends.png (48.35 KiB) Viewed 1934 times
gmconanplz
 
Posts: 4
Joined: Mon Jun 21, 2010 2:41 am

Re: issue with iPhone

Postby gmconanplz » Mon Jun 21, 2010 5:44 pm

Here is another example using the code from this example site http://www.highcharts.com/demo/?example ... theme=gray.

Btw, I found that you have a working sample for iphone here viewtopic.php?f=9&t=5763&p=27521&hilit=iphone#p27521 . Do you mind sharing the code so that I can compare and debug it easier.

Thank you,
Attachments
legends.png
legends.png (69.52 KiB) Viewed 1921 times
gmconanplz
 
Posts: 4
Joined: Mon Jun 21, 2010 2:41 am

Re: issue with iPhone

Postby RoadRash » Mon Jun 21, 2010 5:52 pm

This is the page showed in the screenshot: http://highcharts.com/demo/
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8219
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: issue with iPhone

Postby gmconanplz » Mon Jun 21, 2010 6:53 pm

RoadRash,

Thanks for the quick reply. Your demo example actually worked on the iphone. Thanks for that, I am able to figure out what is causing a problem. The imported css from iqtouch is messing things up. Unfortunately, I really need this css style to make the screen slide, flip on the iphone.

Below is my code. Does anyone have a solution for this?
Code: Select all
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>GraphWith Iphone</title>
      [color=#FF0000]<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
      <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>[/color]      
     <script type="text/javascript" src="jquery.xmldom-1.0.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="highcharts.src.js"></script>
      <script type="text/javascript" src="highcharts.js"></script>
        <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
      <script src="extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>

      

        <script type="text/javascript" charset="utf-8">
         
            var jQT = new $.jQTouch({
               icon: 'jqtouch.png',
               addGlossToIcon: false,
               startupScreen: 'jqt_startup.png',
               statusBar: 'black',
               preloadImages: [
                   'themes/jqt/img/back_button.png',
                   'themes/jqt/img/back_button_clicked.png',
                   'themes/jqt/img/button_clicked.png',
                   'themes/jqt/img/grayButton.png',
                   'themes/jqt/img/whiteButton.png',
                   'themes/jqt/img/loading.gif'
                   ]
            });

            

      $(document).ready(function() {
         var chart = new Highcharts.Chart({
   chart: {
      renderTo: 'container',
      defaultSeriesType: 'column'
   },
   title: {
      text: 'Monthly Average Rainfall'
   },
   subtitle: {
      text: 'Source: WorldClimate.com'
   },
   xAxis: {
      categories: [
         'Jan',
         'Feb',
         'Mar',
         'Apr',
         'May',
         'Jun',
         'Jul',
         'Aug',
         'Sep',
         'Oct',
         'Nov',
         'Dec'
      ]
   },
   yAxis: {
      min: 0,
      title: {
         text: 'Rainfall (mm)'
      }
   },
   legend: {
      layout: 'vertical',
      backgroundColor: '#FFFFFF',
      style: {
         left: '100px',
         top: '70px',
         bottom: 'auto'
      }
   },
   tooltip: {
      formatter: function() {
         return '<b>'+ this.series.name +'</b><br/>'+
            this.x +': '+ this.y +' mm';
      }
   },
   plotOptions: {
      column: {
         pointPadding: 0.2,
         borderWidth: 0
      }
   },
        series: [{
      name: 'Tokyo',
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

   }, {
      name: 'New York',
      data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

   }, {
      name: 'London',
      data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

   }, {
      name: 'Berlin',
      data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

   }]
});

         
         
      });


        </script>

    </head>
    <body>
        <div id="home" class="current">
           <ul class="edgetoedge">
           <li><a href="#linegraph">Line Graph</a></li>
            </ul>
        </div>
   <div id="linegraph">
           <div class="toolbar">
               <a href="#" class="back">back</a>
               <h1>Linegraph</h1>
           </div>
           <div class="info">
               <div id="container" style="position:relative;height:300px;width:400px;"></div>
           </div>
       </div>
   

    </body>
</html>
gmconanplz
 
Posts: 4
Joined: Mon Jun 21, 2010 2:41 am


Return to Highcharts Usage

Who is online

Users browsing this forum: Majestic-12 [Bot] and 11 guests