Search code examples
javascriptdimple.js

Dimple Barplot Unable to Align or Order Bars Effectively using Grouping or Order Rules

I'm having an issue with Dimple.JS, their Grouping/Order Rule methods are not allowing me to control the order or alignment of the bar columns as I'd like to.

Even the x-axis order is off and I had to add a row called 'Order' to my data to make sure that the chart's x-axis was being rendered correctly in the ascending order of Group Bins ('0-10' to '90-100').

My data is stored as follows:

var data = [];
var obj = {
          'Group Bins': '0-10',
          'Gender': 'Male',
          'Rate': 20%,
          'Order': 1
    };

data.push(obj);

Then this is the code I have to render the barplot:

  var svg = dimple.newSvg("#container", 1200, 400);
  var myChart = new dimple.chart(svg, bardata);
  myChart.setBounds(60, 20, 950, 300)
  myChart.fontFamily = 'Courier';
  myChart.assignColor('Male', "#0175AE", 'darkslategrey', 0.7);
  myChart.assignColor("Female", "#E8603C", "crimson", 0.7);
  var x_bar = myChart.addCategoryAxis("x", ['Group Bins', 'Gender'], false);
  x_bar.addOrderRule('Order', false); //Exactly renders Group Bins in Order
  var y_bar = myChart.addMeasureAxis("y", "Rate");
  y_bar.tickFormat = "%"
  var bar_series = myChart.addSeries("Gender", dimple.plot.bar);
  bar_series.addOrderRule('Gender', true); //Exactly Renders Legend in Order
  myChart.addLegend(500, 2, 510, 20, "right");
  myChart.ease = "bounce";
  myChart.draw(1000);

I am using this to render multiple instances of the same chart with different datasets but the bars don't align in an exact order. I would like the 'Females'(blue) to come first, then the 'Male' (Red) columns in each group.

Here are two instances with different datasets, see how the alignment is randomized. It doesn't seem to follow a rule at all.

Bar 1 (Problematic)

Bar 2 (Correct)

See how there is no logical order in the bars? They just switch over...

Not sure how to control this, so far I have tried adding Order Rules like

x_bar.addOrderRule('Reviewer Group', false); //Doesn't Work and now Order is Wrong
x_bar.addOrderRule(['Order','Gender'], false); //Doesn't Work and now Order is Wrong
x_bar.addOrderRule(['Order','Female', 'Male'], false); //Doesn't Work and now Order is Wrong

//passing a function


var ordering = function(x,y){
    console.log(x);
    console.log(y);
};

x_bar.addOrderRule(ordering, false);

// Obj looks like:
// {'Group Bins': '0-10', Gender: [ 'Male', 'Female'], Rate:[0.14, 0.14, 0.30, 0.30], Order: [1, 1]}

Not sure how to implement the Order Exactly and Precisely from making sure that the x-axis has all Group Bins in correct order, to making sure that the 'Female' bars appear before the 'Mens'.

Solution

  • You should be able to do this with x_bar.addGroupOrderRule('Gender');