php - jquery flip! component: highchart is no longer interactive? -
i have page containing table , highchart displays values. using flip! component i'm trying switch between 2 objects when so, highchart lose it's interactivity (the tooltip no longer displayed, zoom option doesn't work , on). has faced problem , know how solve it?
here html:
this button
<span id="button"> button </span> this flip:
<div id="flip">here flip container</div> this div containing object
<div style="display: none"> <table id="table"> values </table> <div id="chart">highchart</div> </div> here how switch:
$('#button').button().click(function(){ $('#flip').flip({ direction: 'bt', content:$('#chart'), color: 'white', speed: 200 }); });
i think issue here chart drawn while container not visible. try drawing chart after container visible. put highchart in function, , call on flip transition, or predefine highchart variable , run highcharts jquery code right after flip command (maybe callback?)
i'm not sure flip plugin, maybe code below trick...
$('#button').button().click(function(){ $('#flip').flip({ direction: 'bt', content:$('#chart'), color: 'white', speed: 200 }).each( function() { drawchart(); }); }); function drawchart() { // draw chart here }
Comments
Post a Comment