ASP.NET page, loading google chart and threejs sometimes does not work

Question

I am writing a ASP.NET page that load 3 arrays of data (X,Y,Z axis) and show them in a 3D animation and a 2D Line Chart.

For this I use ThreeJS and Google Chart.

My page is opened as an IFrame from a parent page. Everything works fine everytime on Chrome. In both IE and Firefox, the first time works well but if I close and then reopen the IFrame, my page is not loaded correctly: DIVs are not positioned in the correct way and the 3D animation is rendered but does not rotate.

I placed a "reset button" in order to test if the problem is in the code or something happens during loading.

My "reset button" works! In fact, after clicking, everything is in the wright place and animation rotate.

I searched a lot and I saw some "conflict" or similar between document.ready() and google.load function... I tried almost anything but still not work...

Here some code to better explain:

<head>
[...]
<script type="text/javascript" src="../Js/three.min.js"></script>
<script type="text/javascript" src="../Js/TrackballControls.js"></script>
<script type="text/javascript" src="../Js/font/helvetiker_regular.typeface.js"></script>
<script type="text/javascript" src="../Js/jquery-1.js"></script>
<script type="text/javascript" src="../Js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("visualization", "1", { packages: ["corechart"] });  </script>
[...]

<script type="text/javascript">
$(document).ready(function () {
    //here I initialize my 3D object

    resetPositions();
});

function resetPositions() {
    $('#graph2DLineChart').css('position', 'absolute');
    $('#graph2DLineChart').css('top', '253px');
    $('#graph2DLineChart').css('left', '652px');
    $('#graph2DLineChart').css('background-color', '#ffffff');
    $('#graph2DLineChart').css('color', '#000000');
    $('#graph2DLineChart').css('width', '280px');
    $('#graph2DLineChart').css('height', '300px');
    $('#graph2DLineChart').css('z-index', '50');
    $('#graph3DContainer').css('position', 'relative');
    $('#graph3DContainer').css('top', '0px');
    $('#graph3DContainer').css('left', '0px');
    $('#graph3DContainer').css('background-color', '#333F47');
    $('#graph3DContainer').css('color', '#ffffff');
    $('#graph3DContainer').css('width', '906px');
    $('#graph3DContainer').css('height', '670px');
    $('#graph3DContainer').css('z-index', '1');
    WIDTH = 906;
    HEIGHT = 670;
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
    renderer.setSize(WIDTH, HEIGHT);
    controls.handleResize();

    drawChart();
}
[...]
</script>
</head>
<body>
[...]
<input type="button" id="resetButton" class="btncontrol" value="Reset positions" onclick="resetPositions();" />

At least, I've tried also this document.ready solutions:

$(document).ready(function () {

    //here I initialize my 3D object

    setTimeout(function () {
            resetPositions();
        }, 1000);

});

This solutions works everytime!!!! but I really HATE IT... please is there a different way to make sure a page will be fully loaded ???

Many many thanks!

Thanks Andy, I've corrected my post. In my page all brackets are ok, just copy & paste mistake. — Luca Natali, Sep 15 '14 at 10:35

score 0 · Answer 1 · edited May 23 '17 at 11:49

ok i've changed my point of view... the answer is in what setTimeout(fn, 500) does.

As explained in this post: Why is setTimeout(fn, 0) sometimes useful?

setTimeout add a new event to the browser event queue and the rendering engine is already in that queue (not entirely true, but close enough) so it gets executed before the setTimeout event. – David Mulder Jun 4 '12 at 14:30

So, i've changed my code in this way:

$(document).ready(function () {

//here I initialize my 3D object

setTimeout(function () {
        resetPositions();
    }, 0);

});

Nothing changed... :(

I'm going slightly mad...

score 0 · Answer 2 · answered Sep 17 '14 at 00:33

0

Document ready is probably firing before the Visualization API is loaded, so when you try to draw the chart, it fails because the API isn't loaded. You should get rid of the document ready event handler and move the resetPositions function to a google loader callback:

google.load("visualization", "1", { packages: ["corechart"], callback: resetPositions });

answered Sep 17 '14 at 00:33

asgallant

26,060
6
72
87

Sorry, you're right! The Google Chart is well rendered as usual. The 3D is well rendered. But... 3D animation does not work and DIVs are not placed in the right position. Is the same as before. – Luca Natali Sep 17 '14 at 14:45
I also tried not to use JQuery (may be is not fully loaded) replacing with getDocumentoById but the behaviour still the same – Luca Natali Sep 17 '14 at 14:59

ASP.NET page, loading google chart and threejs sometimes does not work

2 Answers2

Linked