100 % stacked bar chart JQPlot - charts

Question

I have the below code for drawing a JQPlot bar chart. Now I want all the bars to be at the same height and display the colors in percentages. Couldn't seem to find an example. Please help!!
Current graph
Expected result
var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];
var options = {
title: 'Title ',
stackSeries: true,
seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
// renderer: $.jqplot.CategoryAxisRenderer,
//
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min: 0,
tickInterval: 5,
max: 50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
var plot = $.jqplot('chartDivId', dataArray, options);

Answer 1

I resolved this issue recently and thought I would share a description of how I solved the problem. I managed to produce a "normalized" stacked bar chart; a chart where all the bars are the same size with data of different scales. Excel of course produces this easily. Turns out, so does jqPlot; there just are no good examples.
The solution is to structure the chart data so that each of the inner-most elements contain three items (i.e. [1, 2, 3]) rather than the usual 2 ([1, 2]). The 1st item is the series number, the 2nd item is the plot point, which jqPlot assumes will also be the label for the plot point. However, this behavior is over ridden by the third item, a label which can be different from the data. So in my case the structure is: ([series], [bar percent], [data]).
For example, if my first bar has two stacks, the 1st stack is 97% and the 2nd stack is 3%, yet the data displayed can be 12 and 456 (12 + 456 = 468 >>> 12/468 = 2.56% and 456/468 = 97.43% [you could also just subtract the first from 100%])
The jqPlot documentation does hint at this but it's not very explicit and I spent an entire day trying to figure this out myself. Read carefully example #2: http://www.jqplot.com/tests/point-labels.php. That's what cracked it for me. :)
Cheers,
Rich

Answer 2

The problem is resolved now!! Its all about supplying the data though arrays(S1,S2,S3) in percentages!!