Initializing Highstock.js throws a jQuery error in getComputedStyle

Question

I've been able to get Highstock to work in a sample html file, but in the application I'm working on, the same Highstock code loads part ways and then throws an error: "elem.ownerDocument is undefined" around line 5950 of the unminified code of jQuery 1.5.1 (the getComputedStyle function).

After some console logs, I discovered that the elem that throws the error is in fact a Highstock object and not a DOM element.

I also discovered that the jQuery function in question doesn't even get called when running the simple sample page.

What could I be missing? Some CSS craziness? Why would it even be calling that function?

JS Code:

<script type="text/javascript">
var chart123;
$(document).ready(function(){
   chart123 = new Highcharts.StockChart({
                 chart: {
                    renderTo: 'chartcontainer'
                 },
                 rangeSelector: {
                    selected: 1
                 },
                 series: [{
                    name: 'USD to EUR',
                    data: [[6000000, 2], [50000000, 5]] // predefined JavaScript array
                 }]
            });
});
</script>

HTML Code:

<div id="workspace-content">
    <div id="chartcontainer" style=" height: 400px"></div>
</div>

Let me stress again that the same exact code works in a bare page that uses the same jQuery file.

Answer 1

were you using flot in your previous application?

Answer 2

You saved me a lot of trouble. I was pulling my hair out (whatever is left of it) trying to figure this out. Same as you I had no idea that jquery.flot was included in the application. Thanks a bunch.

Answer 3

We use Smartadmin that includes jquery-resize.js. Change loopy() to only process the element "if (elem.ownerDocument)". This is necessary for Highcharts or SVG items.

This is another answer for the same error with a different root cause. I only place this here in hopes it saves someone time debugging.