Flot chart stacked curved lines

Question

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

So, if I'm reading your comment below correctly, the maintainer of the curveLines plugin fixed the issue? Can you answer your own question with that information and then accept it? Trying to keep the `flot` tag clean. — Mark, May 30 '14 at 15:52

paulitto · Answer 1 · 2014-05-27T10:04:39.243

1

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

edited May 27 '14 at 10:04

answered May 27 '14 at 09:46

paulitto

4,585
2
22
28

Nice hack ^^ As long as you don't show the values with a tooltip or something similar this might just work. But it doesn't work nice with the fill style. – Raidri May 27 '14 at 10:17
Thanks for the help. I can see how that might have fixed it too. However, the CurvedLines plugin committer fixed the problem on GitHub and the resource was included, so the jsfiddle updated automatically with the fix and now your fix appears to cut the y-axis scale in half. – user3595174 May 28 '14 at 16:36

score 1 · Accepted Answer · answered May 31 '14 at 20:27

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

Flot chart stacked curved lines

2 Answers2