How to color different data sets with different colors in dimple.js

Question

I am using another post's data and dimple.js script:

Multi-series in dimplejs

If you use the original unhacked data in that post, how do you color profit and revenue differently, that is, how can you use two different colors for y1 and y3? It seems like dimple does not support this, by sheer philosophy.

Answer 1

Restructuring the data as in that answer is not required with newer versions of dimple because of the introduction of composite axes. It could now be achieved like this:

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 y1 = chart.addMeasureAxis("y", "Revenue");
var y2 = chart.addMeasureAxis("y", "Units");
var y3 = chart.addMeasureAxis(y1, "Profit");
chart.addSeries("Sales Units", dimple.plot.bar, [x,y2]);
chart.addSeries("Sales Revenue", dimple.plot.line, [x,y1]);
chart.addSeries("Gross Profit", dimple.plot.bubble, [x,y3]);

chart.assignColor("Sales Units", "white", "red", 0.5);
chart.assignColor("Sales Revenue", "#FF00FF");
chart.assignColor("Gross Profit", "green");

x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");

chart.draw();

http://jsbin.com/mafegu/2/edit?js,output

As you can see I've also assigned some colours to the series as per your question. The first parameter is the series colour identifier (in this case the label applied to each series), the second is fill, third is stroke and fourth is opacity.

The only gotcha here is that the labels used for the lines (and therefore the keys to colour the series) can't themselves be dimension names in the data (otherwise dimple will try to disaggregate by their values). A trailing space works to differentiate them if necessary.

EDIT: I put the wrong link in

Answer 2

This behavior can be achieved through a slight abuse of dimple's colorAxis feature. A color axis is supposed to be a third axis that you can add to a series to have its color change within a given range based on some value. However, you can force a colorAxis to be a constant color by assigning the start and end point of its ranges to be the same color. If you create a single-color colorAxis in this way for each series, you can assign each a different color:

Important note: This works just fine for bubble chart series. However, for reasons that remain unclear to me, if you attempt to assign different colorAxis objects to different line chart series, they will all be given the color of the last one assigned.

Here's the 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("Profit", ["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, prof]);
var y3 = chart.addMeasureAxis("y", "Profit");
chart.addSeries("null", dimple.plot.bubble, [x,y3, rev]);

x.dateParseFormat = "%m/%Y";
x.addOrderRule("Date");

chart.draw();

(jsFiddle here)