I would like to create a banner ad with an interactive pie chart. The user should be able to rollover different colours in the pie chart and have the legend appear beside it. I can’t seem to figure out how to create a pie chart in Hype. I’ve tried using SVG images, but with SVG elements stacked on top of each other, the lower elements are detected when the mouse moves over them.
Hi Michelle, @mblack
A document usually helps to see how you’re doing this. With SVG’s you can bring them into Hype by putting the code into a rectangle element. This way you can assign #id’s and .classes to individual parts of the SVG. Then you would be able to assign Event Listeners to these parts that fire when you “mouseover” them.
Hello @DBear!
Here is a quick test I did earlier today. Thanks for that suggestion. I’ll look into it a bit more tomorrow. If you have any other suggestions based on the attached file I’d appreciate hearing them.
PieChartTest.hype.zip (17.4 KB)
Hi @mblack
Here is a document based on your supplied SVG’s. Notice the paths are slightly out when put together. Whichever tool you are using to create the SVG’s, create only one with both paths in. You can see the code by selecting the element and clicking ALT-CMD-E or choosing Edit innerHTML from the Edit Menu. I have changed the SVG code slightly (opening your SVG’s in a text editor) and put them together in 1 element. Then I run a function on scene load that adds the listener and on click gets the specific path (with the corresponding ID) and changes the text elements innerHTML based on which path is clicked.
You could even run a timeline on click to by using the API method hypeDocument.startTimelineNamed() … if you want to add animation on the text element. 
Hope this helps. 
PieChartTest-vDBear.hype.zip (20.0 KB)
1 Like