Highcharts series out of plotting area while zooming on mobile - highcharts

I took highcharts example from their demos and changed zoomType to xy. Problem is with zooming on mobiles. When I am in process of zooming with pinch, the series goes way out of plotting area (in both directions) but it does snap back in correct area when I release the pinch.
codesandbox: https://codesandbox.io/s/91k0lzzxvo?file=/src/Hello.js:2409-2413
fullscreen demo so that it can be opened in mobile phones: https://codesandbox.io/embed/91k0lzzxvo?codemirror=1

Related

How to customise the zooming of Line Chart

I have a problem. I am using the newest version of Xcode, Swift 5.1 and Charts danielgindi pod. I turned on the zooming of the LineChart and I want to customise this zooming. Here is a picture of the chart https://imgur.com/a/3Cpi89v . I want the zooming to be only on the edges of the chart, not everywhere. What I mean, If the user zoom in the spot that is close to the bottom part, only to zoom into the edges of the line, like this: https://imgur.com/a/W50yMXP, only for the red areas. The same should be for the top part. Is there any way to do this.

Scaling SVG past unknown threshold causes elements to disappear

I'm using openseadragon with the excellent svg overlay plugin.
On Chrome, the app behaves as expected: users can tap to zoom in until a table rendered in SVG is fully visible, the note on the table is legible.
Here's the link to the demo. Zoom out to see the SVG version of the table appear, overlaying the fuzzy raster version of the background.
On Safari on iOS or OSX when zooming past a seemingly arbitrary threshold the table and everything on it start to disappear. The point of disappearance seems to depend on other factors I don't understand, hence this question for insight. For example, a orange circle drawn with two.js will disappear when the scale transform is precisely 51201 (at 51200 the circle is there). For the more complex table SVG, elements on the table will disappear at different scale levels, between ~23000 to 50000. Sometimes they'll disappear and then reappear upon a slight zoom in. Sometimes they'll disappear on zoom and then reappear as I pan around, the objects nearing the edge of the viewport.
IE 11 has a very similar issue.
Has anyone dealt with this before or solved it?
That's a really slick project!
In my experience, that kind of problem with SVG disappearing has to do with extreme amounts of zoom. The good news is you should be able to work around it by changing your viewport coordinates. By default the width of the image is a viewport value of 1, but you can set your image to be width 10,000 or some such, which will look exactly the same on the screen, but it means that the SVG thinks it's zoomed out a lot at first, so when you zoom in you can go a lot further.
If you're using two.js, another possible fix would be to switch over to canvas rendering and use https://github.com/altert/OpenSeadragonCanvasOverlay.
Btw, I'd love to share your project when it's done... please file a ticket at https://github.com/openseadragon/site-build/issues when you're ready and we can add it to http://openseadragon.github.io/examples/in-the-wild/.

Core-Plot CPTRangePlot filled area is distorted when scrolling (iOS)

Recently I have encountered a strange behavior from CPTRangePlot (I'm using Core-Plot 1.3).
I have a set of 365 data to display on the screen using CPTRangePlot. It works fine if all 365 points are displayed on the screen.
However, if I zoom in by using plotSpace:willChangePlotRangeTo:forCoordinate method to a certain level, the fill area will be distorted and the plot will be filled incorrectly. If I scroll to another plot range, the distorted area becomes fine and but another distorted area appears.
Everything goes back to normal if I zoom out.
Here are the images for your reference:
Before Zoom in:
After Zoom in:
Any idea what happening here? All other plot types (Scatter, Trading, Bar) work fine when I zoom in/out or scroll :-(
P/S: I tried the latest version of Core-Plot (1.4+) but no success.
This looks like a Core Plot bug—it is skipping points that fall outside the visible area when drawing the fill. Please report this on the Core Plot issue tracker.

iOS Maps - Grid Overlay

I'm looking for a way to overlay the iOS maps with a grid. The complete earth needs to be divided into squares. The location of the user doesn't effect the placement of the squares (In other words; the squares are always placed the same. On every iPhone, no matter where the user is).
I Looked into MKOverlay, but I've never used this so it's very new to me. Also, when zooming in/out should effect the overlay. It's very important that the squares are always covering the same area on the map (For example; A square should be 100mx100m in real world, when you zoom out, the square should cover the same 100x100).
Is there anybody that can point me in the right direction?
Is it possible to draw the grid from een .xml? Example given; On .XML is holding all squares with their coordinates on the map. When the user loads the map, the 100 squares around the user are loaded.

Highstock: two panes rendering issue with touch zoom / move

When viewing the Highstock two pane example on a touch device, moving the chart by touchdrag, or performing a pinch zoom causes the chart to render the second pane incorrectly (looks like it ignores the yAxis offset).
Any thoughts for a workaround / config change that might help?
It looks like a bug, so I reported to our developers here: https://github.com/highslide-software/highcharts.com/issues/2000

Resources