famo.us: drawing a pie chart

Question

I need to take some data as input like:

{
  "category1" : 200,
  "category2" : 153,
  "category3" : 310
}

and use it to display a pie chart. The pie will be a donut (I'm going to show some summary text in the empty center area of the donut) and as you can probably guess each "category" will be one slice of the pie based on how much of the overall sum of values it represents. Each piece will be a different color and take up an angle proportional to its value.

I have no idea how to draw a circle with famo.us, let alone an arc of a donut. I also want to handle click events on each piece of pie individually but I'm guessing that's not the tricky part. Thank you!

Answer 1

For one, circles in famous can be made simply by applying a 50% borderRadius property to any Surface element.

When it comes to arcs, there is no way in Famo.us that makes arcs easier to create. You will have to look into canvas, or SVG..

Here is an example of such in canvas..

http://wickedlysmart.com/how-to-make-a-pie-chart-with-html5s-canvas/