javascript - Flot chart rendering unexpectedly -
i'm trying display flot chart 3 arrays. make things simple arrays same:
[[1,1],[2,3],[3,6],[4,10],[5,15],[6,21]]
i create arrays following ruby code:
def flot_chart_series total=0 foo=[] (1..6).each |number| foo.push [number, total+=number] end foo end
here erb processed javascript code:
var fb_shares = <%= flot_chart_series %>; var twitter_shares = <%= flot_chart_series %>; var email_shares = <%= flot_chart_series %>; var plot = $.plot($("#statschart"), [ { data: fb_shares, label: "facebook shares"}, { data: twitter_shares, label: "twitter shares" }, { data: email_shares, label: "email shares" }], { series: { lines: { show: true, linewidth: 1, fill: true, fillcolor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 }, { opacity: 0.15 } ] } }, points: { show: true, linewidth: 2, radius: 3 }, shadowsize: 0, stack: true }, grid: { hoverable: true, clickable: true, tickcolor: "#f9f9f9", borderwidth: 0 }, legend: { // show: false labelboxbordercolor: "#fff" }, colors: ["#3071eb", "#30a0eb", "#a7b5c5"], xaxis: { ticks: [[1, "jan"], [2, "feb"], [3, "mar"], [4,"apr"], [5,"may"], [6,"jun"], [7,"jul"], [8,"aug"], [9,"sep"], [10,"oct"], [11,"nov"], [12,"dec"]], font: { size: 12, family: "open sans, arial", variant: "small-caps", color: "#697695" } }, yaxis: { ticks:3, tickdecimals: 0, font: {size:12, color: "#9da3a9"} } });
the problem chart doesnt plot 3 of same lines, creates lines increasing in value. here screen shot of graph: flot chart screen shot
any ideas i'm doing wrong?
as @captain hints @ in comment because using stacking plugin stack: true
. going stack 3 identical lines on top of each other.
compare these fiddles: stack true , stack false.
if don't want stack rid of plugin (less javascript == faster loading) , stack: true
option.
Comments
Post a Comment