flotr2 The target container must be visible at

Question

I'm trying to get flotr2 graphs working in my Phonegap application. I can get their example graph(http://www.humblesoftware.com/flotr2/documentation#usage) to run on an AVD, but if I try to use it in my actual application it gives me the error Uncaught The target container must be visible at file:///android_asset/www/flotr2.min.js:27 How would I fix this?

Code relating to flotr2:

//Flotr2 style contained in head below other styles
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
    #container {
        width : 600px;
        height: 384px;
        margin: 8px auto;
    }
</style>
//Accidentally changing </style> to </script> causes the graph to display
//but everything else is wrong, as can be expected

and:

//Page meant to contain graph; in body
<!-- Graphs -->
    <div data-role="page" data-theme="a" id="page21">
        <div data-theme="a" data-role="header">
            <h3>
                Graphs
            </h3>
            <a data-role="button" data-direction="reverse" data-transition="slide" href="#page15" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
                Back
            </a>
        </div>
        <div data-role="content" style="padding: 15px">
            <div id="container"></div>
                <script type="text/javascript" src="flotr2.min.js"></script>
                <script type="text/javascript">
                (function () {

                    var
                        container = document.getElementById('container'),
                        start = (new Date).getTime(),
                        data, graph, offset, i;

                    // Draw a sine curve at time t
                    function animate (t) {

                        data = [];
                        offset = 2 * Math.PI * (t - start) / 10000;

                        // Sample the sine function
                        for (i = 0; i < 4 * Math.PI; i += 0.2) {
                            data.push([i, Math.sin(i - offset)]);
                        }

                        // Draw Graph
                        graph = Flotr.draw(container, [ data ], {
                            yaxis : {
                                max : 2,
                                min : -2
                            }
                        });

                        // Animate
                        setTimeout(function () {
                            animate((new Date).getTime());
                        }, 50);
                    }

                    animate(start);
                })();
            </script>
        </div>
    </div>

Answer 1

By reading the source of flotr2 you can see that in that case el.clientWidth is not defined for some reason. flotr2 seems to rely on that property. Without seeing any other code it's hard to say why this happens.

EDIT:

Since you are using PhoneGap, you could try rigging up your code to use deviceready and see if that helps. It might be possible that clientWidth is missing since it hasn't been set up yet (the CSS hasn't loaded etc.). Anyway, worth a go.