Sign in to follow this  
mng

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

Recommended Posts

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 by mng

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this