How To Show Jquery-Ui Dialog Height And Width With Chart?

[mng]

I have rendered my chart on jquery-ui dialog.

my html page looks like

<div id="chartdiv"  style="height:600px;width:600px;margin:auto;">The Chart Will Appear Here.<span id="w" style="display: none;"><input type="text" value="600"/></span><span id="h" style="display: none;"><input type="text" value="600"/></span></div><script type="text/javascript">var myChart = new FusionCharts("MultiAxisLine.swf", "myChartId", "100%", "100%", "0", "0");myChart.setDataURL("mychart.xml");myChart.render("chartdiv");FusionCharts.addEventListener('Error', function (eventObject, argumentsObject) {alert('There was an error with  charts!\n' + argumentsObject.message);});</script>[/size][/font]

 

I tired to show current height and width like this with jquery

 

$('#chartdiv').dialog({

resize: function(e,ui) {

$('#w').text(Math.round(ui.size.width));

$('#h').text(Math.round(ui.size.height));

}

});

 

But found that fusionchart.js some how ignoring every thing between <div> to </div> so, How can I show the current height and width?

Thanks,

Edited October 22, 2011 by mng

[FusionCharts Support]

Hi,

 

FusionCharts.js normally removes all elements inside the DIV where you are rendering the chart. Hence, this.

 

You can however create a wrapper DIV around this like:

 

<div id="wrapper">
  <span id="w" style="display: none;"><input type="text" value="600"/></span>
  <span id="h" style="display: none;"><input type="text" value="600"/></span>
  <div id="chartdiv"  style="height:600px;width:600px;margin:auto;">The Chart Will Appear Here.</div>
<div>

 

 

and set #wrapper as the dialog element.