Fleet graphs: biaxial linear diagram, laying ONE axis

Question

I hope someone out there can tell me that what I'm trying to do is perhaps even possible with the FLOT Javascript library. I am trying to show a chart (bottom) with a double axis and three datasets. One dataset is on the left axis and two datasets are on the right axis. What I really want to do is collect two data sets on the right axis, as they should be displayed cumulatively. So far, I have not been able to get this diagram to respond to the stack: true setup in general.

If anyone could help me, I would really like it. My code and snapshot chart are currently on. I am trying to fit the blue and green areas corresponding to the right axis (y2).

$(function () { var previousPoint; var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]]; var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]]; var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]]; var ds = new Array(); ds.push({ data:completes, label: "Complete", yaxis: 2, lines: { show: true, fill: true, order: 2, } }); ds.push({ data:screeners, label: "Pre-Screened", yaxis: 1, lines: { show: true, fill: true, order: 1, } }); ds.push({ data:holds, label: "Holds", yaxis: 2, lines: { show: true, fill: true, order: 3, } }); //tooltip function function showTooltip(x, y, contents, areAbsoluteXY) { var rootElt = 'body'; $('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y - 35, left: x - 5, border: '1px solid #000', padding: '1px 5px', 'z-index': '9999', 'background-color': '#202020', 'color': '#fff', 'font-size': '11px', opacity: 0.8 }).prependTo(rootElt).show(); } //Display graph $.plot($("#placeholder1"), ds, { grid:{ hoverable:true }, xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ], yaxes: [ { min: 0, tickFormatter: function numberWithCommas(x) { return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ","); }, } ], y2axis: [ ], legend: { show: true } }); 

});

Answer 1

It is very simple. The styling plugin is not documented, but in the source code you can see that there are two ways to indicate that you want stacking to be enabled.

Two or more series are stacked when their “stack” attribute is set to the same key (which can be any number or string, or simply “true”). to specify the default stack, you can set

Series

: {stack: null or true or key (number / string)}

or specify it for a specific series

$. plot ($ ("# placeholder"), [{data: [...], stack: true}])

In this case, we want to specify it within the two objects of the series that we want to stack, which look like this:

 ds.push({ data:completes, label: "Complete", yaxis: 2, stack: true, //added lines: { show: true, fill: true, order: 2, } }); ds.push({ data:screeners, label: "Pre-Screened", yaxis: 1, lines: { show: true, fill: true, order: 1, } }); ds.push({ data:holds, label: "Holds", yaxis: 2, stack: true, //added lines: { show: true, fill: true, order: 3, } }); 

Add these two bits to stack:true and include the stack plugin in your javascript sources, and that will do it. See here in action: http://jsfiddle.net/ryleyb/zNXBd/