Composite Category Axes

dist/dimple.v1.1.6.js

@@ -279,7 +279,7 @@ var dimple = {
             this._max = (this.overrideMax !== null ? this.overrideMax : this._max);
 
             // If this is an x axis
-            if (this.position === "x") {
+            if (this.position === "x" && this._scale === null) {
                 if (this._hasTimeField()) {
                     this._scale = d3.time.scale()
                         .rangeRound([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
@@ -296,6 +296,12 @@ var dimple = {
                         .nice();
                 } else if (this.measure === null || this.measure === undefined) {
                     distinctCats = getOrderedCategories(this, "x", "y");
+                    // If there are any slaves process accordingly
+                    if (this._slaves !== null && this._slaves !== undefined) {
+                        this._slaves.forEach(function (slave) {
+                            distinctCats = distinctCats.concat(getOrderedCategories(slave, "x", "y"));
+                        }, this);
+                    }
                     this._scale = d3.scale.ordinal()
                         .rangePoints([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
                         .domain(distinctCats.concat([""]));
@@ -321,7 +327,7 @@ var dimple = {
                         break;
                     }
                 }
-            } else if (this.position === "y") {
+            } else if (this.position === "y" && this._scale === null) {
                 if (this._hasTimeField()) {
                     this._scale = d3.time.scale()
                         .rangeRound([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
@@ -338,6 +344,12 @@ var dimple = {
                         .nice();
                 } else if (this.measure === null || this.measure === undefined) {
                     distinctCats = getOrderedCategories(this, "y", "x");
+                    // If there are any slaves process accordingly
+                    if (this._slaves !== null && this._slaves !== undefined) {
+                        this._slaves.forEach(function (slave) {
+                            distinctCats = distinctCats.concat(getOrderedCategories(slave, "y", "x"));
+                        }, this);
+                    }
                     this._scale = d3.scale.ordinal()
                         .rangePoints([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
                         .domain(distinctCats.concat([""]));
@@ -364,7 +376,7 @@ var dimple = {
                         break;
                     }
                 }
-            } else if (this.position.length > 0 && this.position[0] === "z") {
+            } else if (this.position.length > 0 && this.position[0] === "z" && this._scale === null) {
                 if (this.useLog) {
                     this._scale = d3.scale.log()
                         .range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
@@ -379,7 +391,7 @@ var dimple = {
                         .range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
                         .domain([this._min, this._max]);
                 }
-            } else if (this.position.length > 0 && this.position[0] === "c") {
+            } else if (this.position.length > 0 && this.position[0] === "c" && this._scale === null) {
                 this._scale = d3.scale.linear()
                     .range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
                     .domain([this._min, this._max]);
@@ -629,17 +641,26 @@ var dimple = {
                             aggField = [],
                             key,
                             k,
+                            i,
                             newRow,
                             updateData;
+
                         if (series.categoryFields === null || series.categoryFields === undefined || series.categoryFields.length === 0) {
                             aggField = ["All"];
-                        } else if (series.categoryFields.length === 1 && d[series.categoryFields[0]] === undefined) {
-                            aggField = [series.categoryFields[0]];
                         } else {
-                            series.categoryFields.forEach(function (cat) {
+                            // Iterate the category fields
-                                aggField.push(d[cat]);
+                            for (i = 0; i < series.categoryFields.length; i += 1) {
-                            }, this);
+                                // Either add the value of the field or the name itself.  This allows users to add custom values, for example
+                                // Setting a particular color for a set of values can be done by using a non-existent final value and then coloring
+                                // by it
+                                if (d[series.categoryFields[i]] === undefined) {
+                                    aggField.push(series.categoryFields[i]);
+                                } else {
+                                    aggField.push(d[series.categoryFields[i]]);
+                                }
+                            }
                         }
+
                         // Add a key
                         key = aggField.join("/") + "_" + xField.join("/") + "_" + yField.join("/") + "_" + zField.join("/");
                         // See if this field has already been added. 
@@ -1258,7 +1279,13 @@ var dimple = {
                     }, this);
                     axis._max = distinctCats.length;
                 }
-
+                // Set the bounds on all slaves
+                if (axis._slaves !== null && axis._slaves !== undefined && axis._slaves.length > 0) {
+                    axis._slaves.forEach(function (slave) {
+                        slave._min = axis._min;
+                        slave._max = axis._max;
+                    }, this);
+                }
                 // Update the axis now we have all information set
                 axis._update();
 

examples/lines_horizontal_stacked.html

@@ -10,10 +10,13 @@
       data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
       var myChart = new dimple.chart(svg, data);
       myChart.setBounds(60, 30, 505, 305);
-      var x = myChart.addCategoryAxis("x", "Month");
+      var x1 = myChart.addCategoryAxis("x", "Month");
-      x.addOrderRule("Date");
+      x1.addOrderRule("Date");
-      myChart.addMeasureAxis("y", "Unit Sales");
+      var x2 = myChart.addCategoryAxis(x1, "Price Tier");
-      myChart.addSeries("Channel", dimple.plot.line);
+      var y1 = myChart.addMeasureAxis("y", "Unit Sales");
+      var y2 = myChart.addMeasureAxis("y", "Operating Profit");
+      myChart.addSeries("Channel", dimple.plot.line, [x1, y1]);
+      myChart.addSeries("Channel", dimple.plot.bar, [x2, y2]);
       myChart.addLegend(60, 10, 500, 20, "right");
       myChart.draw();
     });

examples/templates/lines_horizontal_stacked.html

@@ -7,10 +7,13 @@
       data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
       var myChart = new dimple.chart(svg, data);
       myChart.setBounds(60, 30, 505, 305);
-      var x = myChart.addCategoryAxis("x", "Month");
+      var x1 = myChart.addCategoryAxis("x", "Month");
-      x.addOrderRule("Date");
+      x1.addOrderRule("Date");
-      myChart.addMeasureAxis("y", "Unit Sales");
+      var x2 = myChart.addCategoryAxis(x1, "Price Tier");
-      myChart.addSeries("Channel", dimple.plot.line);
+      var y1 = myChart.addMeasureAxis("y", "Unit Sales");
+      var y2 = myChart.addMeasureAxis("y", "Operating Profit");
+      myChart.addSeries("Channel", dimple.plot.line, [x1, y1]);
+      myChart.addSeries("Channel", dimple.plot.bar, [x2, y2]);
       myChart.addLegend(60, 10, 500, 20, "right");
       myChart.draw();
     });

src/objects/axis/methods/_update.js

@@ -45,7 +45,7 @@
             this._max = (this.overrideMax !== null ? this.overrideMax : this._max);
 
             // If this is an x axis
-            if (this.position === "x") {
+            if (this.position === "x" && this._scale === null) {
                 if (this._hasTimeField()) {
                     this._scale = d3.time.scale()
                         .rangeRound([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
@@ -62,6 +62,12 @@
                         .nice();
                 } else if (this.measure === null || this.measure === undefined) {
                     distinctCats = getOrderedCategories(this, "x", "y");
+                    // If there are any slaves process accordingly
+                    if (this._slaves !== null && this._slaves !== undefined) {
+                        this._slaves.forEach(function (slave) {
+                            distinctCats = distinctCats.concat(getOrderedCategories(slave, "x", "y"));
+                        }, this);
+                    }
                     this._scale = d3.scale.ordinal()
                         .rangePoints([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
                         .domain(distinctCats.concat([""]));
@@ -87,7 +93,7 @@
                         break;
                     }
                 }
-            } else if (this.position === "y") {
+            } else if (this.position === "y" && this._scale === null) {
                 if (this._hasTimeField()) {
                     this._scale = d3.time.scale()
                         .rangeRound([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
@@ -104,6 +110,12 @@
                         .nice();
                 } else if (this.measure === null || this.measure === undefined) {
                     distinctCats = getOrderedCategories(this, "y", "x");
+                    // If there are any slaves process accordingly
+                    if (this._slaves !== null && this._slaves !== undefined) {
+                        this._slaves.forEach(function (slave) {
+                            distinctCats = distinctCats.concat(getOrderedCategories(slave, "y", "x"));
+                        }, this);
+                    }
                     this._scale = d3.scale.ordinal()
                         .rangePoints([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
                         .domain(distinctCats.concat([""]));
@@ -130,7 +142,7 @@
                         break;
                     }
                 }
-            } else if (this.position.length > 0 && this.position[0] === "z") {
+            } else if (this.position.length > 0 && this.position[0] === "z" && this._scale === null) {
                 if (this.useLog) {
                     this._scale = d3.scale.log()
                         .range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
@@ -145,7 +157,7 @@
                         .range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
                         .domain([this._min, this._max]);
                 }
-            } else if (this.position.length > 0 && this.position[0] === "c") {
+            } else if (this.position.length > 0 && this.position[0] === "c" && this._scale === null) {
                 this._scale = d3.scale.linear()
                     .range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
                     .domain([this._min, this._max]);

src/objects/chart/methods/_getSeriesData.js

@@ -110,17 +110,26 @@
                             aggField = [],
                             key,
                             k,
+                            i,
                             newRow,
                             updateData;
+
                         if (series.categoryFields === null || series.categoryFields === undefined || series.categoryFields.length === 0) {
                             aggField = ["All"];
-                        } else if (series.categoryFields.length === 1 && d[series.categoryFields[0]] === undefined) {
-                            aggField = [series.categoryFields[0]];
                         } else {
-                            series.categoryFields.forEach(function (cat) {
+                            // Iterate the category fields
-                                aggField.push(d[cat]);
+                            for (i = 0; i < series.categoryFields.length; i += 1) {
-                            }, this);
+                                // Either add the value of the field or the name itself.  This allows users to add custom values, for example
+                                // Setting a particular color for a set of values can be done by using a non-existent final value and then coloring
+                                // by it
+                                if (d[series.categoryFields[i]] === undefined) {
+                                    aggField.push(series.categoryFields[i]);
+                                } else {
+                                    aggField.push(d[series.categoryFields[i]]);
+                                }
+                            }
                         }
+
                         // Add a key
                         key = aggField.join("/") + "_" + xField.join("/") + "_" + yField.join("/") + "_" + zField.join("/");
                         // See if this field has already been added. 

src/objects/chart/methods/draw.js

@@ -103,7 +103,13 @@
                     }, this);
                     axis._max = distinctCats.length;
                 }
-
+                // Set the bounds on all slaves
+                if (axis._slaves !== null && axis._slaves !== undefined && axis._slaves.length > 0) {
+                    axis._slaves.forEach(function (slave) {
+                        slave._min = axis._min;
+                        slave._max = axis._max;
+                    }, this);
+                }
                 // Update the axis now we have all information set
                 axis._update();