This is a problem of the headertabs extension and not of jqplot because headertabs encapsulate its area with a separate <div headertabs> while jqplot is rendered within its dedicated area marked as <div class="srf-jqplot..."> and since this area is not part of the headertabs div it can not displayed as part of the headertabs.

If headertabs wants to ensure proper content encapsulation it also has to ensure that content is appropriately reassigned to the headertabs div but this is not the task of jqplot or any other format.

Thanks MWJames. The charts *do* work if they are placed in the very first tab that is created. Just not if they are in the other tabs. Does that change your assessment of the issue at all?

http://wiki.planetkubb.com/wiki/User:Thingles/Scratch4

The assessment remains the same as its a <div> assignment issue in how headertabs includes content. You can check this by using Firefox Firebug or Chrome Inspector in how those <div>'s are hierarchical aligned.

Okay, I did a reasonable amount of debugging on this. Using Chrome and using a URL that goes directly to a tab, like this:

http://wiki.planetkubb.com/wiki/User:Thingles/Scratch4#tab=Graph_2

I *can* get the graph to render on a tab. Note, I have to not reload the URL but just hit return in the location. If the page renders very fast, the chart will display on the "Graph 2" tab (and on the Graph 1 tab!). This seems to suggest it's not an issue with div hierarchy.

I *think* the issue is that jqplot requires some special action if the plot is hidden. The jqPlot docs have some special notes about working with jQuery UI widgets. From the jqPlot docs:

"It is critical to bind the callback to the UI widgets "show" or "change" method which calls the plots "replot" method. Without this, the plot won't properly redraw itself when it's container becomes visible."

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

From this sample it appears that the plots require a replot() call. Unfortunately, this seems like something where the result format and HeaderTabs would have to be aware of each other in order to function. HeaderTabs would need to call the replot() method for the hidden plots, of which it has no idea they even exist right now.

I was going to try to validate this by issuing a replot() call from the console but after extensive digging I couldn't find anywhere that a reference to the chart objects was stored.

(In reply to comment #4)

"It is critical to bind the callback to the UI widgets "show" or "change"
method which calls the plots "replot" method. Without this, the plot won't
properly redraw itself when it's container becomes visible."

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

I'm aware of this issue but in order for replot() to be successful something like a .trigger( ... ) would need be sent from an "actor" (in this case headertabs) so that the graph which understands this kind of trigger can act upon it.

jqplot needs to execute the replot() because we not expose global state of local implementations (such as a graph) to the window object.

The current jqplot implementation is not optimal and needs some serious re-factoring but I do not plan to do this in near future.

Aside from the above the hierarchical <div> is still an issue but a weaker one.