CODEWITHSUNDEEP
javascriptdimple.js
cmgerber
cmgerber

Reputation: 2299

Dimple.js bar chart transitions including removed bars

When transitioning to new data that has less or different bars in a dimple bar chart the bars that are removed are pushed on top of each other to the left of the chart and stay for the whole transition time.

Here is an example of code that recreates the effect:

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    { Animal: "Cats", Value: (Math.random() * 1000000) },
    { Animal: "Dogs", Value: (Math.random() * 1000000) },
    { Animal: "Mice", Value: (Math.random() * 1000000) },
    { Animal: "Rat", Value: (Math.random() * 1000000) },
    { Animal: "Cow", Value: (Math.random() * 1000000) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal");
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();

d3.select("#btn").on("click", function() {
   myChart.data = [
     { Animal: "Cats", Value: (Math.random() * 1000000) },
     { Animal: "Dogs", Value: (Math.random() * 1000000) },
     { Animal: "Mice", Value: (Math.random() * 1000000) }
   ];
   myChart.draw(1000);
});

If you click on the button in the example you will see the effect. Example: http://jsfiddle.net/nf57j/25/

(dimple adapted from John Kiernander's answer here: Update dimple.js chart when select a new option)

Is there a way to keep the removed bars out of the transition?

Upvotes: 3

Views: 980

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

I've rewritten all the transition code for Dimple v2.0 which I'll be releasing on Monday. I've just tried this example in version 2 and it looks a lot better.

Upvotes: 6

Related Questions