Inconsistent behavior when applying multiple colorAxis objects to line vs. bubble plots in dimple.js

Question

While answering this question, I came across what seems like some strange behavior in dimple.js line charts. I was trying to come up with a way to exploit colorAxis objects to control series color. For bubble charts, creating multiple colorAxis objects and assigning different ones to different series works just fine for coloring the 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 I change the series to be 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 are colored according to the most recent colorAxis assigned:

(jsFiddle)

Why is this? Is it the expected behavior?

Answer 1

I think I've figured out roughly what's going on here:

The first argument to chart.addSeries() functions as the key that is used to keep track of the color of that series. If you give two series the same key, they will be the same color, even if that key is null (which, incidentally, should not be a string, but that doesn't change the behavior I described). The point of this argument is really to specify how the data should be broken up into groups, and null just means that you don't want them to be broken up into groups. In order to actually have different colors and not split the data into groups, you need to use different strings for each series, and they need to not be names of variables in your 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 even necessary here, unless you want to assign a specific color to a specific line (which you could also do with assignColor()).

For bubble charts, the behavior of coloring series with the same category field the same color can be over-ridden with a colorAxis, as I demonstrated. For line charts, it cannot be. Since this seems potentially unintended, I've submitted an issue on Github.