jqPlot graph in accordion

I want to plot a graph within a jQuery accordion but开发者_JAVA技巧 it causes the graph to chopped and the scales to be displayed. Anyone got a fix for this?

As explained on jqPlot's Tab and Accordion UI Widgets page, jqPlot needs to know the size of the chart when it's plotted, and it can't do that if the chart is hidden by an accordion or tab. The solution is to either specify the chart's dimensions in an alternate fashion or to call replot when the accordion is expanded. See Tab and Accordion UI Widgets for full details and example code.

Everything in the accordion is hidden until it is expanded, which means it is dimensionless. You need to wait until the portion of the DOM your accordion chart is contained in is shown, and then plot the graph. If you look at the ui.html example included in the latest release of jqPlot, you'll see this:

Here, the plot is created at a div named chart1, which is inside a hidden jQuery UI Tab:

plot1 = $.jqplot('chart1', [l1, l2, l3],  {
  title: "I was hidden",
  lengend:{show:true},
  series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
  cursor:{show:true, zoom:true},
  axesDefaults:{useSeriesColor:true}
});

And then an event handler is registered with the 'tabsshow' event fired by the jQUery UI Tab. In your case, you'll want to register a handler for the 'accordionchange' event fired by the jQuery UI Accordion widget upon completion of changing the accordion's state. Here's how you bind to the Tab's 'tabsshow' event for the above code example:

$('#tabs').bind('tabsshow', function(event, ui) {
  if (ui.index == 1 && plot1._drawCount == 0) {
    plot1.replot();
  }
  else if (ui.index == 2 && plot2._drawCount == 0) {
    plot2.replot();
  }
});

There's also a working example in the same ui.html file with an accordion. You can find the example in the latest release from bitbucket here: jqplot.1.0.0a_r701

Also, make sure that you don't instantiate multiple jqPlot objects on the same div, or you'll have plots sitting on top of one another and overload the browser.

Hidden elements, like a tab or accordion element have no size, so you may want to use a technique mentioned in jqplot's documentation, ie.:

1. provide dimensions of the graph in an alternative way (eg. data-height and data-width attributes) AND
2. call replot() when the graph gets displayed.

However, the example in the documentation uses for 2. an event name which can be incorrect with your version of jquery-ui. For example, if you use Bootstrap 3, the proper event has a different name: "shown.bs.tab".

Links:

• http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html
• http://getbootstrap.com/javascript/#tabs-events