Google Chart API display issues on an iPad

[Mo Kargas]

Example of the problem: http://reactiondynamics.com/lab/ipad.html

For some reason my Google Charts are truncated on Mobile Safari after
the first chart. This does not occur on a standard desktop Webkit
install, be it Chrome or Safari. Does anyone have any idea why?

Additionally, why can't Combo Charts be returned as simple PNGs?

[Viz Kid]

Which iOS version are you using? It seems that the older version indeed truncate the charts starting from the middle of the third one, but in a somewhat more recent version no charts is truncated (although the 4th chart is not visible for some reason).

We currently do not support exporting the charts to images, sorry.

  Viz Kid

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Mo Kargas]

Hey Viz kid, thank you for your reply.

I'm currently running this on iOS 4.3.1 (8G4) on an iPad 1.0 device,
though have reliably produced the same results on an iPad 2 with the
same software version.

Just a few things I've noticed while trying to determine the problem:

-On rotation, similar things occur, but sometimes Chart 2 will
display.
-The scroll box the charts are in use translate3d CSS for animation at
their core (useTransform). If I change this to simple DOM animations
the charts will display, but the performance is extremely slow. This
occurs with or without using iScroll.
-If you view the site on portrait, two charts will display. The third
one is truncated/mis-sized, but if you tap the second or third charts,
you will see the grey tap/selection rectangle offset severely from the
chart.

[Viz Kid]

I'm not that familiar with the iOS browser and the different scrolling that you are using. In general, our charts usually required to be rendered in a visible div (even if it is outside of the viewing window) to be rendered properly, but in your case the charts themselves, even when they are truncated, are drawn as they should in some sense (I mean, when the chart is rendered, it knows the space it should occupy and draws accordingly, and it seems something externally is truncating it).

I assume the problem is somehow in the surrounding environment which truncates the chart after it is drawn, probably related to the scrolling. I would suggest playing with a few options of locating the charts in a different location (vertically probably). Also, since in landscape view I see all the charts cut at the same line (except for the first one), it might be related to where the chart is located in terms of "pages" you have for scrolling (or in terms of how many "full ipads view windows" fit before the beginning of the chart).

You can also try remotely debugging the browser and seeing what exactly happens on the DOM when you see a truncated chart, as I assume the SVG inside of it should be complete (as it is really truncated in the middle of SVG paths).

Sorry I can't help more,

  Viz Kid