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:

enter image description here

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:

enter image description here

(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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -