Placing pie charts in a list/ in order.

Kuba's Avatar


29 Sep, 2016 02:09 PM


I started with this amazing software 3-4 weeks ago - I'm more designer than programmer/coder.

 I'have found on this forum really nice example of generating pie chart. Modified this a bit using my CSV file - that works fine.

Started positioning charts and it works ok when I use Grid node, but my problem is that need to put charts like elements of list (see attached img). Tried to define each chart position by resampling e.g. ellipse etc. - but it destroy pieces of each single chart...

Any idea how to place them like problem-description.jpg ? or where should I start looking for solution?

All files and description attached.

  1. Support Staff 1 Posted by john on 29 Sep, 2016 09:18 PM

    john's Avatar

    Hi Kuba,

    Welcome to the Nodebox community!

    The problem with your current approach is that you are creating a mass of independent pieces. You have a total of 30 arcs (3 per pie), 30 center covers, and 10 labels - a total of 70 objects. It then becomes hard to herd all these objects into the right place.

    A better approach is to make one pie at a time, group each one into a single object, and then arrange those 10 objects in a grid.

    I have attached a solution. Basically I just combined most of your current nodes into a single subnetwork called donut. For each row of the table you feed into it, donut produces one pie chart complete with center cover and label. If you look inside donut you will see that the final node is a group node. This is what glues everything together into a single pie object.

    When creating objects like this, there is no need to worry about positioning them until later. Inside donut everything is centered at the origin. This simplifies everything.

    When you hook donut to the csv node you wind up with 10 donuts on top of each other. To space them out all you need to do is feed that list of 10 donuts into a translate node and use a grid to define the 10 positions.

    I could have just used an ordinary grid node. But to make it general purpose I created another subnetwork called make_grid. Make_grid takes in the table (in order to count the rows) and a number (labeled "columns") that controls the number of columns you want. It then figures out the number of rows, the overall height needed to space the rows evenly, and then slices the grid to return just the positions you need. In my example I set columns to 4, so you get two rows of 4 and third row of 2. Change the value of columns to see how the layout changes.

    Solution network and screenshot attached.

    Hope this helps!


Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:


Already uploaded files

  • 227 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

17 Jun, 2024 02:26 PM
15 Jun, 2024 01:44 PM
08 Jun, 2024 09:05 AM
08 Jun, 2024 09:00 AM
04 Jun, 2024 04:37 AM