CODEWITHSUNDEEP
javascriptjquerycsschartshighcharts
Thiryn
Thiryn

Reputation: 319

How to modiffy Highchart size with slide effect

I have multiples charts on the same page in two columns, and I have a button to slide right using jquery animate(), having the left column charts hiding the right columns charts.

My problem is :

Using the function chart.reflow() I can only resize the charts when animate has ended, it is not beautiful.

an other problem append when I reflow, i lose .brighten() property on pie charts (Only on pie charts)

A little example from my fiddle to describe my problem:

$('#resize').click(function(){
    $('#first').animate({
        width : '100%'
    }, 600);
    $('#second').animate({
        width : 'toggle',
        opacity : 'toggle'
    }, 600).queue(function(){
        $('#first').highcharts().reflow();
    });
});

http://jsfiddle.net/8t6ev/1/

Thanks for your help!

Upvotes: 0

Views: 918

Answers (1)

koolaide
koolaide

Reputation: 155

Looks like you need to use the step option of .animate()

    $('#resize').click(function(){
    $('#first').animate({
        width : '100%'
    },{
    duration: 600,
    step: function() {
      $('#first').highcharts().reflow();
    }
    });

    $('#second').animate({
        width : 'toggle',
        opacity : 'toggle'
    }, 600).queue(function(){
        $('#first').highcharts().reflow();
    });
});

Updated Fiddle

Upvotes: 2

Related Questions