jQuery flot ...how to fill splines? -

jQuery flot ...how to fill splines? -

i using jquery flot plugin , trying fill splines. can fill when set show: false in lines , causes sec line show. doing wrong?

i have code this:

$(function () { $.plot($("#flotcontainer"), [{ data: data9_1, label: "page views", color: "#e74c3c" } ],{ series: { lines: { show: true, fill: 0.3, linewidth: 1, fillcolor: "#d5d5d5" }, splines: { show: true, tension: 0.4, linewidth: 1, fill: 1 }, points: { radius: 5, show: true, fill: true, fillcolor: "#ffffff" }, shadowsize: 2 }, grid: { hoverable: true, clickable: true, tickcolor: "#d5d5d5", borderwidth: 1, color: '#d5d5d5' }, colors: ["#1ab394", "#464f88"], xaxis:{ ticks: [ [1, "jan 2015"], [2, "feb 2015"], [3, "mar 2015"], [4, "apr 2015"] ], color: "#838383" } , yaxis: { ticks: 4 }, legend: { show: false, } } ); $("#flotcontainer").usetooltip();

});

and shows this:

if remove show: true lines gets rid of sec line of filling.

how can smooth spline filling?

it looks using this spline plugin. see this comment on same page forked version fill working:

@aaronaverill: needed fill work forked plugin , fixed it.

you can set fill via splines: { fill: (float between 0 , 1 || false) } option. seriescolor automatically used.

my fork draws entire line @ 1 time instead of doing 1 segment @ time should faster.

the fork here: https://github.com/amkohn/flot/blob/master/jquery.flot.spline.js

and set demo here: http://jsfiddle.net/mhtey/1/

since project i'm working on doesn't utilize area charts i'm not sure if works them properly. used modified version of flot while working on shouldn't impact anything.

jquery flot