CODEWITHSUNDEEP
d3.jsdimple.js
sirrocco
sirrocco

Reputation: 8055

Ordering columns in a stacked bar chart - dimple

I'm trying to sort a stacked bar chart generated with DimpleJS.

I tried something like this : 

    var svg = dimple.newSvg('#graphicview', "100%", "100%");

    var data1 = [
      { Tasks: 10, Date: "Jan", MyValue: "Val 1", Order: 1 },
      { Tasks: 15, Date: "Jan", MyValue: "Val 2", Order: 2 },
      { Tasks: 15, Date: "Jan", MyValue: "Val 3", Order: 3 },
      { Tasks: 50, Date: "Feb", MyValue: "Val 1", Order: 1 },
      { Tasks: 115, Date: "Feb", MyValue: "Val 2", Order: 2 },
      { Tasks: 0, Date: "Mar", MyValue: "Val 1", Order: 1 },
      { Tasks: 0, Date: "Apr", MyValue: "Val 1", Order: 1 }
    ];

    var myChart = new dimple.chart(svg, data1);

    var x = myChart.addCategoryAxis("x", "Date");
    x.addOrderRule(['Jan', 'Feb', 'Mar', 'Apr']);
    var y = myChart.addMeasureAxis("y", "Tasks");
    y.addOrderRule(function (left, right) {
        debugger;
        if (left.Order === right.Order)
            return 0;
        if (left.Order > right.Order)
            return 1;
        return -1;
    });
    y.showPercent = false;
    y.hidden = true;

    var s = myChart.addSeries("MyValue", dimple.plot.bar);
    myChart.assignColor('Val 1', '#aa0123');
    myChart.draw();

http://jsfiddle.net/sirrocco/mkzTk/1/

On the second column, the order should be inverse. The sorting code is not getting called at all - from the code it seems like it's because of the axis type - but I'm not sure what axis to use to get the same result.

Also - in Firefox - the fiddle does not render for some reason.

Any thoughts ?

Edit

Thanks John, I do have another issue now - I'm trying to add labels on the bar and I've used the example from the dimple site. However I had to modify it a bit since it wasn't really working :

http://jsfiddle.net/sirrocco/mkzTk/4/

Is this a good approach ?

Upvotes: 0

Views: 3663

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

Firstly I notice you are using version 1 of dimple which is quite out of date now, I recommend referencing the latest (http://dimplejs.org/dist/dimple.v2.1.0.min.js), I don't think there are semantic changes which will break any of your code here. This will fix the Firefox problem.

Regarding the issue of ordering (which has nothing to do with the version). You can't order a measure axis, in this case you need to apply the order rule to the series instead:

// In order to deal with cases where order differs by column 
// you need to include it in your series definition
var s = myChart.addSeries(["Order", "MyValue"], dimple.plot.bar);

// Your function approach would also work, but as it is the default 
// handling for a numeric column you can just specify order like this
s.addOrderRule("Order");

Here it is working:

http://jsfiddle.net/mkzTk/2/

Upvotes: 3

Related Questions