Jqplot Side Screenshot Screenshot

Question

Is it possible to create a side histogram using jqplot? For example, X-Axis will be a specific month, and for each month you will have several stacks.

Something like that:

NOTE. I am asking for something else, which is just an ordinary stacking chart. Look at the picture to better understand what I'm trying to do.

Answer 1

Yes it is possible.

with reference from jqplot

Source:

$(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); } ); }); 

Answer 2

No one has created this feature for jqplot. This guy said he was going. Use another library such as Flot, write a jqplot plugin yourself, or convince someone else to do it! If you use Flot, it looks like they have a patch that allows you to use this feature here , but it has not been merged.

Answer 3

You will need to build two graphs on the same basis, which will be good if you do not want to use any hint or something, because it will work only on one of the plots, 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 that you can only use tool-tip / Highlighter on one of the plots