CODEWITHSUNDEEP
jqueryflotbezierstacked-area-chart
user3595174
user3595174

Reputation: 21

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 },}
    });
});

Upvotes: 1

Views: 2745

Answers (2)

user3595174
user3595174

Reputation: 21

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.)

Upvotes: 1

paulitto
paulitto

Reputation: 4673

You may use tickformatter option to customize y axis in any way you like. E.g. if values are doubled, you can output y axis labels divided by 2.

$.plot("#placeholder2", [ d1, d2, d3 ], {
    series: { stack: true,
             lines: {show: true, fill: true, }, 
            curvedLines: {  active: true, fit: true, apply: true },},                
            yaxis:{
                tickFormatter: function(val, axis){
                    return (val/2).toFixed();
                }
            }
});

see updated fiddle

Upvotes: 1

Related Questions