Y axis mispositioned in Android 3/4 after Change orientation

[baconbeastnz]

Hi there I am displaying a chart which when the device is rotated, recalculates size and calls this function after a 1600ms timeout. Works fine on all Apple products but on Android 3,4 native browser, using the most recent HC library, the Y axis title about 20% of the time gets misplaced. If I'm going from landscape to portrait the Y axis title disappears from view, if going the other way the Y axis title lands almost smack in the middle of the chart.

Code: Select all

function RedrawChartUponOrientationChange() {
           Data.chart.showLoading();
           var w = !UseModernLibrary() ? GetOldLibChartWidth() : GetModernLibChartWidth();
           var h = !UseModernLibrary() ? GetOldLibChartHeight() : GetModernLibChartHeight();
           Data.chart.setSize(w,h); //fills to size of screen
           Data.chart.hideLoading();
           Data.chart.redraw();
}

If I execute a swipe or tap on the chart after this, (which invokes the redraw() method after changing the series), the axis pops back into the correct position. I've tried simply calls a second redraw after a timeout but that doesn't fix to it, which suggests to me that maybe something actually needs to change on the chart to properly trigger the redraw.

Any ideas on how this could be happening?

If i can't get this working will probably have to come up with a dirty hack, thinking, after orientation, detect the y axis in the Dom, get its offset().left value, and if its over say 50, then try manually change it or somehow invoke a proper second redraw.

[baconbeastnz]

Right o, my guess here is that when you change orientation, the redraw() method only updates the things you've changed (which in my situation isn't the yAxis title, therefore it retains its old position due to some drawing bug /w the Android browser perhaps....

I've tried to update yAxis title with:

chart.yAxis[0].setTitle({
text: 'New Y axis title'
});

to try and force it to redraw the title but getting an error its not a method ladalada, is there a way to force redraw every component on the chart?

The function I'm using the find the error is:

var el = $("#chart").find('svg > text[x][y][text-anchor][transform] tspan');
if(el.text().toLowerCase().indexOf('energy usage') == -1)
return;
if(el.offset().left> 40) {
//FORCE redraw
Data.chart.redraw();
}

So basically, the offset().left value is like 250 when it should be 23 (this is when it bugs), 23 is the value ont he "x" attribute but yeh, offset().top rolls to like 400

[torstein.honsi]

Try to set chart.yAxis[0].isDirty = true, and Highcharts should pick it up in the next redraw.

[baconbeastnz]

Nop that's not working

Placed it just before the redraw()

[grtvrt]

Hi BaconBeastnz,

I tried to reproduce your case, but wasn't very succesfull. Could you alter this fiddle like it resembles your case? http://jsfiddle.net/GFS69/

Gert Vaartjes
Highsoft Solutions