tycoon17

How to toggle chart visibility?

Recommended Posts

Hi,

 

while using the latest release of fusion charts XT, i ran into the following issue.

 

On a page i am displaying 9 charts where i want to initially hide 6 of them.

When the user clicks a 'show all' button, all charts should be shown.

 

This does not work correctly with .show() or .slideToggle().

 

When clicking the button only 2 out of the 6 charts get shown and their size/position is not correct.

 

Here the code i am using to control visibility:

 

<button id="tbutton">Show All</button>
<script>
$( "#tbutton" ).click(function() {
$( "tr.hiddenrow" ).show();
});
</script>';

 

<tr><td><div id=chart1>Chart</div></td></tr>

<tr><td><div id=chart2>Chart</div></td></tr>

<tr><td><div id=chart3>Chart</div></td></tr>

<tr class="hiddenrow" style="display: none;"><td><div id=chart4>Chart</div></td></tr>

<tr class="hiddenrow" style="display: none;"><td><div id=chart5>Chart</div></td></tr>

<tr class="hiddenrow" style="display: none;"><td><div id=chart6>Chart</div></td></tr>

<tr class="hiddenrow" style="display: none;"><td><div id=chart7>Chart</div></td></tr>

<tr class="hiddenrow" style="display: none;"><td><div id=chart8>Chart</div></td></tr>

<tr class="hiddenrow" style="display: none;"><td><div id=chart9>Chart</div></td></tr>

 

Regards,

 

T

 

 

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Could you please try once by setting style="visibility: hidden;" initially and on click of button, change it to "visible" and see if it works?

 

Ref. Code:

$( "tr.hiddenrow" ).css({"visibility" : "visible"});

Hope this helps!

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