I have done it. here is the implementation on your code Jsfiddle Link
Take into consideration that you have to draw Legends
by your self and not by using jqplot.
if you can do that then my code will take care of the rest.
$(document).ready(function () {
var graphObj = [];
var s11 = [["a",1],["b",1],["c",5],["d",2]];
var s12 = [["a",2],["b",2],["c",6],["d",5]];
var s21 = [["a",3],["b",3],["c",7],["d",1]];
var s22 = [["a",4],["b",4],["c",8],["d",8]];
drawBarchart("chart1", s11, s12, s21, s22, 0);
drawBarchart("chart2", s11, s12, s21, s22, 1);
$(".jqplot-table-legend tr").click(function(){
var index = this.rowIndex;
for(var j =0; j<graphObj.length; j++){
graphObj[j].series[index].show = !graphObj[j].series[index].show;
graphObj[j].redraw();
}
});
function drawBarchart(name, s11, s12, s21, s22, i) {
graphObj[i] = $.jqplot(name, [s11, s12, s21, s22], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid: {
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //choose bar chart
rendererOptions: {
fillToZero: true
},
pointLabels: {
show: false,
location: 'e',
edgeTolerance: -15
} //adds values+labels to bars
}, //seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
showGridline: false
}
}, //xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks: false,
label: 'axis1',
pad: 1.05,
tickOptions: {
showGridline: false
}
}, //yaxis
y2axis: {
showTicks: false,
label: 'axis2',
pad: 1.05,
tickOptions: {
showGridline: false
}
} //yaxis
}, //axes
series: [{
yaxis: 'yaxis',
label: 's11[0]'
}, {
yaxis: 'y2axis',
label: 's11[1]'
}, {
yaxis: 'yaxis',
label: 's12[0]'
}, {
yaxis: 'y2axis',
label: 's12[1]'
}, {
yaxis: 'y2axis',
label: 's21'
}, {
yaxis: 'y2axis',
label: 's22'
},
]
});
}
});