Question

I’m trying to display x number of different highchart graphs in a single page. Each chart has it’s own .js option file where it get’s data and is configurated. The link to these files are embedded in the charts own HTML file which contains the div it is to be rendered to.

Each of these charts html files are upon request loaded into a div with id of “reportsWindow” through jQuery (see code below)

HTML pages layout:

<script type="text/javascript" src="/graf/revenue/revenueGraphScript.js"></script>
<div class="clear">
    <div id="revenue" style="width: 600px; height: 200px;"></div>
</div>

jQuery Code for loading the html pages:

var graphPaths = {
    'revChart': '/graf/revenue/revenueChart.html',
    'revDisChart': '/graf/revenueDistribution/revenueDistributionChart.html'
}

$.each(graphPaths, function(index, value){  
    $.ajax({url: value, dataType: "html", success: function(data){
        $('#reportsWindow').append(data);
    }});          
}); 

The problem is that when the code runs in IE (all versions) the first chart is not loaded correctly, it is as if the loading and appending are stopped midways, however if I request a load of the reports page a second time both charts are displayed.
The charts loads perfectly in FF, Chrome etc.

I have so far tried to delay the $.each() both with the .delay() just before the append and have tried to have the ajax call inside “setTimeout()” without success.

OBS: graphPaths is to be populated on a later date with DB input, and that is the reason why I have to generate the charts dynamically. Also the charts objects have unique names. and the charts generation code is inside $(document).ready().

I’m looking for something like this: Create six chart with the same rendering,different data (highchart )
But I am using different charts where the example is with the same chart.

Any suggestions?

Answer 1

Apparently there is an issue with IE when having multiple charts on one page that is loaded dynamically. The problem was solved by removing the following code from the library

// setup default css
        doc.createStyleSheet().cssText =
            'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' +
            '{ behavior:url(#default#VML); display: inline-block; } ';