Using Chart + Expander

[WildcatMattMember]

I’ve been using Chart for about 9 months now to generate a dashboard for employee stats.  Overall the users are happy with the results, but users running with smaller screen resolution want the ability to hide the charts while they’re working.

I implemented this by wrapping the chart DIVs with Expander and a cookie so if the user hides the dashboard, it will be collapsed initially when the page is reloaded.  The expander portion works flawlessly, but it seems to be interfering with the charts.

If the user collapses -> reloads -> expands with version 2.8.0, the chart elements will be misaligned.  In IE 8, the title is shifted to the right and the grid is shifted up and left.  Chrome 26 shows the chart zoomed in.

If I use version 2.8.3 and collapse -> reload -> expand, the charts do not appear at all.  (I’m guessing this is related to the change in 2.8.2 to not refresh the chart when the host element is hidden?)

I’ve tried this with JQuery 1.7.2 and 1.9.1 with no difference in behavior.

[WildcatMattMember]

Here is an example of the graphs using 2.8.0, before and after the collapse cycle:

http://www.matthewkurth.com/livejournal/bvu/goodgraph.png
http://www.matthewkurth.com/livejournal/bvu/badgraph.png

[Peter StoevKeymaster]

Hi,

You may use the Expander’s initContent to initialize the Chart. That is the expected way.

Example:

$("#jqxExpander").jqxExpander({ initContent: function () { $("#jqxButton").jqxButton({width: 100, height: 50 }); } });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[WildcatMattMember]

Thanks for the assistance, that did the trick!

[Author]

Posts