javascript - Inconsistent behavior when applying multiple colorAxis objects to line vs. bubble plots in dimple.js -
while answering this question, came across seems strange behavior in dimple.js line charts. trying come way exploit coloraxis objects control series color. bubble charts, creating multiple coloraxis objects , assigning different ones different series works fine coloring series differently:
code:
var svg = dimple.newsvg("body", 800, 400); var data = [ {"month":"01/2013", "revenue":2000, "profit":2000, "units":4}, {"month":"02/2013", "revenue":3201, "profit":2000, "units":3}, {"month":"03/2013", "revenue":1940, "profit":14000, "units":5}, {"month":"04/2013", "revenue":2500, "profit":3200, "units":1}, {"month":"05/2013", "revenue":800, "profit":1200, "units":4} ] var chart = new dimple.chart(svg, data); chart.setbounds(60,20,680,330); var x = chart.addcategoryaxis("x", "month"); var prof = chart.addcoloraxis("profit", ["green", "green"]) var rev = chart.addcoloraxis("revenue", ["black", "black"]) var y2 = chart.addmeasureaxis("y", "units"); chart.addseries("null", dimple.plot.bar, [x,y2]); var y1 = chart.addmeasureaxis("y", "revenue"); chart.addseries("null", dimple.plot.bubble, [x,y1, rev]); var y3 = chart.addmeasureaxis("y", "profit"); chart.addseries("null", dimple.plot.bubble, [x,y3, prof]); x.dateparseformat = "%m/%y"; x.addorderrule("date"); chart.draw();
however, if change series lines:
var y1 = chart.addmeasureaxis("y", "revenue"); chart.addseries("null", dimple.plot.line, [x,y1, rev]); var y3 = chart.addmeasureaxis("y", "profit"); chart.addseries("null", dimple.plot.line, [x,y3, prof]);
both lines colored according recent coloraxis assigned:
(jsfiddle)
why this? expected behavior?
i think i've figured out what's going on here:
the first argument chart.addseries()
functions key used keep track of color of series. if give 2 series same key, same color, if key null
(which, incidentally, should not string, doesn't change behavior described). point of argument specify how data should broken groups, , null means don't want them broken groups. in order have different colors , not split data groups, need use different strings each series, , need not names of variables in data-set:
var y1 = chart.addmeasureaxis("y", "revenue"); chart.addseries("revenue label", dimple.plot.line, [x,y1, rev]); var y3 = chart.addmeasureaxis("y", "profit"); chart.addseries("profit label", dimple.plot.line, [x,y3, prof]);
coloraxis objects aren't necessary here, unless want assign specific color specific line (which assigncolor()
).
for bubble charts, behavior of coloring series same category field same color can over-ridden coloraxis, demonstrated. line charts, cannot be. since seems potentially unintended, i've submitted an issue on github.
Comments
Post a Comment