0

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!

skb
  • 30,624
  • 33
  • 94
  • 146

1 Answers1

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/

johntraver
  • 3,612
  • 18
  • 17
  • So would I have to add the HTML for the svg or canvas as the content property of the surface? – skb May 06 '14 at 16:49
  • You can insert into the content property for svg, the canvas since it's more programmatic, may have to be done with subclassing similar to this example.. Where your drawing code could run in the deploy function. http://stackoverflow.com/questions/23495176/famo-us-how-to-fade-in-a-text-box – johntraver May 06 '14 at 16:57