Is it possible to achieve a side by side stacked bar chart using jqplot? For example the X-Axis would be a given month and for each month you would have some number of stacked bars.
Something like this:
NOTE: I'm asking for something different that just a normal stacked chart. Please look at the picture to get a better understanding of what I'm trying to do.
yes, it is possible to do so.
with reference from jqplot
Source Code:
$(document).ready(function(){ var s1 = [2, 6, 7, 10]; var s2 = [7, 5, 3, 4]; var s3 = [14, 9, 3, 8]; plot3 = $.jqplot('chart3', [s1, s2, s3], { // Tell the plot to stack the bars. stackSeries: true, captureRightClick: true, seriesDefaults:{ renderer:$.jqplot.BarRenderer, rendererOptions: { // Put a 30 pixel margin between bars. barMargin: 30, // Highlight bars when mouse button pressed. // Disables default highlighting on mouse over. highlightMouseDown: true }, pointLabels: {show: true} }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer }, yaxis: { // Don't pad out the bottom of the data range. By default, // axes scaled as if data extended 10% above and below the // actual range to prevent data points right on grid boundaries. // Don't want to do that here. padMin: 0 } }, legend: { show: true, location: 'e', placement: 'outside' } }); // Bind a listener to the "jqplotDataClick" event. Here, simply change // the text of the info3 element to show what series and ponit were // clicked along with the data for that point. $('#chart3').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) { $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); } ); }); No one has created this capability for jqplot. This guy said he was going to. Use a different library like Flot, write a plugin for jqplot yourself, or convince someone else to do it! If you use Flot it looks like they have a patch that enables this capability here but it hasn't been merged in.
You will have to plot two graphs on same plot base which will be okay to do if you don't want any tool-tip or something because it will work on only one of the plot try this-
$(document).ready(function(){ /* graph config */ var maxVal = 13; /* graph vals */ var Bar1 = [5, 0, 10, 0, 12, 0]; var Bar2 = [0, 17, 0, 20, 0, 12 ]; var BaseVals=[0,0,0,0,0,0]; /* graph ticks */ var baseTicks=['Americas','','Europe','','Asia',''] var EmptyTicks=['','','','','',''] /* 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: baseTicks, tickOptions: {markSize: 0} }, yaxis: { padMin: 0, min: 0, max: maxVal, showLabel: false, show: false } } }); plot2 = $.jqplot('chart3', [Bar1], { seriesColors: ["#67ce64", "#da9831","#67ce64", "#da9831"],\\this can be changed 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: EmptyTicks }, yaxis: { padMin: 0, min: 0, max: maxVal, showLabel: false, show: false } }, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'} }); plot1 = $.jqplot('chart3', [Bar2], { stackSeries: true, captureRightClick: true, seriesColors: ["#effa38", "#37d1f8", "#5129b6","#5129b6"],//this can be changed seriesDefaults:{ renderer:$.jqplot.BarRenderer, rendererOptions: {barMargin: 10, highlightMouseOver: true }, pointLabels: {show: false} }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, tickRenderer:$.jqplot.CanvasAxisTickRenderer, ticks: EmptyTicks, tickOptions: { angle: -90, } }, yaxis: { padMin: 0, min: 0, max: maxVal } }, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'} }); }); But note this that you will be able to apply tool-tip/Highlighter on only one of the plot