CODEWITHSUNDEEP
javascriptjqueryhighcharts
Matt
Matt

Reputation: 3802

Highcharts jQuery rendering problem - all browsers

I have a strange problem whilst trying to build a stacked column chart using Highcharts

When the chart renders, the columns don't display, until, you resize the browser in anyway, causing the chart to redraw. (I think)! The rest of the chart displays (axis, titles, etc) but not the columns themselves.

I get the same behaviour in IE, Firefox and chrome.

I have put my code on jsfiddle - http://jsfiddle.net/gd7bB/173/ Load it up and you should see no data, resize the browser window and "tada", the data appears (rather the columns appear)!

Any help on this one would be massively appreciated.

Upvotes: 23

Views: 23721

Answers (7)

PhoenixDev
PhoenixDev

Reputation: 802

The "not so delicate" solution here, is what finally solved it for me.

setTimeout(function() {
                $(window).resize();
            }, 0);

Using highcharts with a wrapper called DjangoChartit, with Python Django.

Upvotes: 0

lomantpa
lomantpa

Reputation: 56

Using jQuery 1.7.2 + HighCharts 3.0.2 the problem was solved by using:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                $(window).resize(); 
            }
        }        
    }, ..

This is the almost the same as @revo, but uses the 'window' object instead of 'document'.

Upvotes: 2

revo
revo

Reputation: 11

Maybe a little late , but i had the same problem with jQuery 1.9.1 and didn't want to downgrade it for Highcharts with dotnet.highcharts.

if you crate a new Highchart there e.g.

.InitChart(new Chart
 {
    DefaultSeriesType = ChartTypes.Line,
    MarginRight = 130,
    MarginBottom = 25,
    ClassName = "chart",
    Events = new ChartEvents { Load = "function(event) { $(document).resize(); }" }
  }) .....

You also can use it 

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                //When is chart ready?
                $(document).resize(); 
            }
        }        
    }, ..

. the events line is what you need then you render your chart

I hope it helped, i had some hours to figure it out how it works :)

Upvotes: 1

Ebru
Ebru

Reputation: 41

You needn't change any version of Highcharts or Jquery, if you resize() your div-container at the end of your script.

For example:

$('#div').resize();

Upvotes: 3

Asped
Asped

Reputation: 3103

I had the same problem - after loading the page, the chart didn't display the lines (only the title and legend). After any browser resize or also zooming the chart suddenly appeared.

The problem was with jQuery > 1.7 (my version now is 1.8.2) Update of the Highcharts to the latest version (v2.3.3 (2012-10-04)) fixed the problem (and also other small issues)

Upvotes: 6

Glycerine
Glycerine

Reputation: 7347

I had exactly the same problem - Highcharts JS v2.1.5 (2011-06-22) does not work with jQuery 1.7.1

After changing to jQuery 1.6.1 (The last stable release I used) it worked. Someone should check other versions of jQuery.

Upvotes: 7

Igor Dymov
Igor Dymov

Reputation: 16460

Remove line chart.render();

When HighCharts constructor is called there's no need to call render implicitly.

Upvotes: 6

Related Questions