Placing multiple raphael.js objects on a page

Question

I am new to raphael.js and want to use it to make small pie charts that show the progress percentage. I have prepared the function to plot the chart and it works well if I have only one chart on the page. However, when I add additional elements, the charts overlap. I iterate through the .min-pie-chart elements:

$(".min-pie-chart").each(function () {
  var value = $(this).data("percent");
  Raphael($(this), 20, 20).minPieChart(10, 10, 8, value, "rgb(89,185,86)", "rgb(75,175,72)");
});

I'm guessing this is a css issue which is new to me as well.

A demonstration is located here .

Any help is appreciated.

Answer 1

You need to adjust its location based on some factor. In this case, maybe it makes sense to adjust an offset according to its index in the list.

You can get an index from the anonymous function...

each(function (index) {

then

minPieChart(30, (index + 1) * 20, 8, value,

as an example. jsfiddle