JQPlot Grouped Stacked graph with different colours - jqplot

Question

I am trying to produce the following graph with JQPlot
I have attempted this as best I can however the script causes an excsessive runtime and eventually firefox comes up with the stop script notice.
Any suggestions?
$(document).ready(function () {
var assigned1 = [5, 12, 2, 0, 0, 4, 8];
var assigned2 = [4, 0, 2, 0, 0, 2, 4];
var assigned3 = [1, 0, 2, 0, 0, 2, 0];
var assigned4 = [0, 0, 5, 0, 0, 3, 0];
var assigned5 = [0, 0, 1, 0, 0, 0, 0];
var assigned = [assigned1, assigned2, assigned3, assigned4, assigned5];
var numCompleted = [assigned1, assigned2, assigned3, assigned4, assigned5]; //[4,3,6,5,5,4,0,0,5,4,0,0,0,0];
//[1,1,0,0,2,2,8,7,4,4,11,10,1,1];
//var test3 = [4,6,3,8,6,3,1,9,1,5,3,6,7,4];
var dates = ['Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine', 'Assigned', 'Employee', 'Machine'];
plot3 = $.jqplot('chart3', [assigned, numCompleted], {
// Tell the plot to stack the bars.
seriesColors: ["#81a7d4", "#d0d0d0", "#fac"],
stackSeries: true,
shadow: false,
title: 'Cell Name',
animate: false,
captureRightClick: false,
grid: {
drawGridLines: false,
shadow: false
},
legend: {
show: false,
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 10,
barPadding: 0,
shadowOffset: 0,
groups: 7,
highlightMouseDown: true
},
pointLabels: {
show: true,
hideZeros: true,
edgeTolerance: 10
}
},
grid: {
gridLineColor: '#fff',
borderWidth: 0,
shadow: false,
background: "white"
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dates,
showTickMarks: false
},
yaxis: {
showTicks: false
}
}
});
});
http://jsfiddle.net/K5cjj/1/

Answer 1

I have managed to do this by drawing multiple graphs to the same element. This has other issue but appears to work, can anyone expand on this to enable the click function to work on all bars
However this works in Firefox, chrome and IE11 only, IE 10 and below is all messed up (as usual)
http://jsfiddle.net/LADzf/1
$(document).ready(function(){
/* graph config */
var maxVal = 13;
/* graph vals */
var assigned1 = [5, 0, 0, 0, 12, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 8, 0, 0];
var assigned2 = [3, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 2, 0, 0];
var assigned3 = [2, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0];
var assigned4 = [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var employee1 = [0, 5, 0, 0, 0, 10, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 12, 0];
var employee2 = [0, 5, 0, 0, 0, 2, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var machine = [0, 0, 12, 0, 0, 0, 12, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 12];
var basevals = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
/* graph ticks */
var ticks = ['Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine', ' ', 'Assigned', 'Employee', 'Machine'];
var blankticks = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '];
var dateticks = ['<br><br><br><br>01/01/2014', '<br><br><br><br>02/01/2014', '<br><br><br><br>03/01/2014', '<br><br><br><br>04/01/2014', '<br><br><br><br>05/01/2014', '<br><br><br><br>06/01/2014', '<br><br><br><br>07/01/2014'];
/* plot the base graph */
plotbase = $.jqplot('chart3', [basevals], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false, angle: 90},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dateticks,
tickOptions: {markSize: 0}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
}
});
plot3 = $.jqplot('chart3', [machine], {
seriesColors: ["#a62525"],
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barMargin: 10,
highlightMouseOver: true
},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false, angle: 90},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: blankticks,
tickOptions: {markSize: 0}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
}
});
plot2 = $.jqplot('chart3', [employee1, employee2], {
seriesColors: ["#67ce64", "#da9831"],
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10, highlightMouseOver: true},
pointLabels: {show: false}
},
axesDefaults: {show: false},
tickOptions: {showMark: false},
axes: {
showLabel: false,
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: blankticks
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal,
showLabel: false,
show: false
}
},
grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
});
plot1 = $.jqplot('chart3', [assigned1, assigned2, assigned3, assigned4], {
stackSeries: true,
captureRightClick: true,
seriesColors: ["#effa38", "#37d1f8", "#5129b6"],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {barMargin: 10, highlightMouseOver: true },
pointLabels: {show: false}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions: {
angle: -90,
}
},
yaxis: {
padMin: 0,
min: 0,
max: maxVal
}
}, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'}
});
$('#chart3').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
});
});