javascript - Flot Area Chart -
is possible make area chart in flot? i've noticed there "stack" plugin. image below effect want create. there 1 problem, stack plugin automatically adds component data. don't want that. want fill in effect.
i tried fill between property, makes annoying color blending (see below):
in stack example, colors don't blend @ all. that's visual effect i'm going for.
update code used make work was:
var dataset = [ {id: "a", label: "demand (kw)", color: "#2980b9", data: d, lines: { show: true, linewidth: 1, fill: .5}}, {id: "b", label: "demand (kw)", color: "#d35400", data: d2, lines: { show: true, linewidth: 1, fill: .5 }, fillbetween: "a"}, {id: "c", label: "demand (kw)", color: "#c0392b", data: d3, lines: { show: true, linewidth: 1, fill: .5 }, fillbetween: "b"} ]
yes, can set fill color line chart produce area chart.
setting fill color below line chart:
var placeholder = $("#placeholder"); var data = []; var options = { series: { lines: { show: true, fill: true, fillcolor: "rgba(86, 137, 191, 0.8)" }, points: { show: true, fill: false } } }; $.plot(placeholder, data, options);
edit: after looking @ result, here's how got work. need include stack , fillbetween plugins (i had in order):
var placeholder = $("#placeholder"); var data = [ {data: data1, id: "data1id"}, {data: data2, id: "data2id", fillbetween: "data1id"}, {data: data3, id: "data3id", fillbetween: "data2id"} ] var options = { series: { lines: { show: true, fill: true }, points: { show: true, fill: false } } }; $.plot(placeholder, data, options);
Comments
Post a Comment