Placing jqplot in jquery tabs - jqplot

Question

I am using jqplots to show data graphically in my website. I am able to plot the chart as per our requirement. Now I need to place those graphs in jQuery UI tabs.
I am able to get the graph in the first tab which is active on page load.But I am not able to get the remaining graphs, which are present in other tabs, they are invisible.
I am not able to figure out the reason please help me in this regard.

Answer 1

from your questions there is no code attached, so compare your code with this on JSFiddle http://jsfiddle.net/meccanismocomplesso/9fdJm/1/
I hope this could be useful (It is an example of the book "Beginning JavaScript Charts with jqPlot, Highcharts and D3").
It is perfectly working. There are three different type of charts each in a different tab, and they are all visible.
.

Answer 2

Mention the jqPlot code first, followed by the tabs code. Even I faced the same issue, now fixed.
//$.jplot code
//$("#tabs").tabs();

Answer 3

#meccanismo.complesso Interesting! I am using your jsfiddle (http://jsfiddle.net/meccanismocomplesso/9fdJm/1/) to explore the possibility to run as well the jqplot objects into the jQuery UI tabs. As I was facing the same issue of only showing up only the content in one tab (The active initially), and seeing that the provided example has all the logic all together, thought this could help someone in the near future as well..
[http://jsfiddle.net/zpLxbue8/][1]
Rather than just executing the function as soon as it loads after or before the jQuery UI tabs, used the activate and create to trigger the jqplot

Answer 4

http://jsfiddle.net/zpLxbue8/ [jsFiddle working fine example... jQuery UI tabs displaying different types of graphs by using jQplot plugin][1]
The js content -- omitted due to platform abstraction layer.. script type="text/javascript
jQuery(document).ready(function($){
var $=$.noconflict();
function render(){
var bar1 = [['Apples',11],['Oranges',7],['Pears',3],['Bananas',9],['Lemons',5]];
var data1 = [3,1,2,3,5,4];
var data2 = [4,3,3,4,5,6];
var data3 = [9,10,8,7,4,6];
var data4 = [9,8,7,12,9,10];
var pie1 = [
['Black', 212],['White', 140], ['Red', 131],['Blue', 510]
];
var plot1 = $.jqplot ('chart1', [bar1],{
title: 'Example of a bar chart',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0,
fontSize: '12px'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
var plot2 = $.jqplot ('chart2', [data1,data2,data3,data4],{});
var plot3 = $.jqplot ('chart3', [pie1],{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: false,
sliceMargin: 6,
lineWidth: 5
}
}
});
}
$("#tabs").tabs({
collapsible: true,
//0 is the first tab´s content
active:1,
hide: { effect: "slideUp", duration: 'slow' },
show: { effect: "slideDown", duration: 'slow' },
create: function( event, ui ) {
return render();
},
activate: function( event, ui ) {
return render();
}
});
});