mobile browser odd behaviour

[nits]

jsfiddle: http://jsfiddle.net/1sc6L8dk/5/

Open this jsfiddle in mobile browser (I am using safari,chrome).

    var ChartData = '', ChartOptions = '';

function updategraph() {
    ChartData = [{
        value: 400,
        color: "#000",
        title: "#1"
    }, {
        value: 375,
        color: "#555",
        title: "#2"
    }, {
        value: 323,
        color: "#222",
        title: "#3"
    }, {
        value: 375,
        color: "#000",
        title: "#4"
    }, {
        value: 323,
        color: "#000",
        title: "#5"
    }];
    ChartOptions = {

    };

    new Chart(document.getElementById("myChart").getContext("2d")).PolarArea(ChartData, ChartOptions);
}
window.onload = function () {
    polarChart = new Chart(document.getElementById("myChart").getContext("2d")).PolarArea(ChartData, ChartOptions);
};

$("span").click(function () {
    updategraph();
});

If you click on "click here to draw" you will see the graph generated which is perfectly fine on Mozilla, Chrome, Safari (all latest desktop browsers).

Now when I try doing the same in mobile browser(iPhone 5 Safari, Samsung S4 Chrome) this behaves really strange. If you click on graph for second time, this graph will appear double of its first size and then again the same. It just gets expanded where it should behave like how it behaves in desktop browser.

First I thought this might be the issue only with PolarArea, but same issue appears with Pie too. You can check the same just changing PolarArea to Pie.

Any ideas on this ? May be some small mistake in my code?

Thanks in advance.

http://stackoverflow.com/questions/26495262/generating-chartjs-graph-dynamically-odd-behavior-in-mobile-browsers

Posted this question here earlier.

[leighquince]

when i looked at this the problem seems to arrive from the helper function retinaScale() which continues to scale the graph every time it is initialized on an already used canvas

[nits]

yeah. But this is something which is to be fixed soon

[quilkin]

Still needs fixing! Same problem on using with Cordova app on android 4.4.4. Chart draws OK first time then canvas grows every time afterwards, eventually causing a crash.

[nits]

http://jsfiddle.net/leighking2/1sc6L8dk/9/

See this solution as quince pointed out.

[quilkin]

Thanks, nits. I can confirm that removing 'helpers.retinaScale(this)' from the constructor solves it for a Cordova app on Android 4.4.4

[nnnick]

So an easy solution for you would be to not reuse the canvas html element, and recreate it when you recreate the chart itself.

You should also use the .destroy() method for destroying a previously created chart to clean up references to that chart object internally.

That said, I think the library should cleanup the original canvas back to it's original size, and remove any applied styles within .destroy()

[quilkin]

Thanks Nick. I'll try that later although the modification to chartjs
seems to work OK.
In the meantime I've got a new issue; using the 'repsonsive' option
works fine on the desktop, but with it set the chart doesn't show at all
on the Android device!

regards
Chris
On 01/01/2015 15:22, Nick Downie wrote:

So an easy solution for you would be to not reuse the canvas html
element, and recreate it when you recreate the chart itself.

You should also use the |.destroy()| method for destroying a
previously created chart to clean up references to that chart object
internally.

That said, I think the library should cleanup the original canvas back
to it's original size, and remove any applied styles within |.destroy()|

—
Reply to this email directly or view it on GitHub
#713 (comment).