Search code examples
jqueryflotbezierstacked-area-chart

Flot chart stacked curved lines


Has anyone used a stacked flot chart with the curved lines plugin? They do not appear to be compatible because the curved lines plugin adds an additional data series which adds to the total stack value, basically duplicating each series, creating a striped look and doubling the scale of the Y axis. Does anyone have a solution or workaround?

Here's a jsfiddle. The example on the top shows the stack without curved lines. The example on the bottom shows the problem.

<div class="demo-container">
    <div id="placeholder" style="height: 200px; width: 400px;" class="demo-placeholder"></div>
    <div id="placeholder2" style="height: 200px; width: 400px;" class="demo-placeholder"></div>
</div>

$(function() {

    var d1 = [];
    for (var i = 0; i <= 10; i += 1) {
        d1.push([i, parseInt(Math.random() * 30)]);}

    var d2 = [];
    for (var i = 0; i <= 10; i += 1) {
        d2.push([i, parseInt(Math.random() * 30)]);}

    var d3 = [];
    for (var i = 0; i <= 10; i += 1) {
        d3.push([i, parseInt(Math.random() * 30)]);}

    $.plot("#placeholder", [ d1, d2, d3 ], {
        series: { stack: true,
                 lines: {show: true, fill: true, }, }
    });

    $.plot("#placeholder2", [ d1, d2, d3 ], {
        series: { stack: true,
                 lines: {show: true, fill: true, }, 
                curvedLines: {  active: true, fit: true, apply: true },}
    });
});

Solution

  • The author of the curvedLines plugin fixed the problem I was seeing. If you go to my original jsfiddle linked above, you will see it is now working as desired. (The curvedLines.js on GitHub is an external reference in the jsfiddle, so when it was updated, the fix was integrated in the fiddle automatically.)