Piechart with multiple parts


#1

Hi guys,

perhaps a noobish question but at the moment I’m stuck:

Every form, graphic or pic is put in a “rectangle container” by “Hype”, meaning by clicking an object you have eight anchor-points around it.

The chart I have to put up have some very big pie-pieces (i.e. 36%) but VERY small pieces also (i.e. 1,2% and 2,5%).

Every pie-piece is a single png which is grouped with the others.

MY PROBLEM
To be clickable and calling an action the PNG has to be on top layer (right!?).

Due to the rectangle-container-behaviour the smaller pieces overlays each other in a way that it is impossible to click the parts next to it.

Is there a way to set up an “image-map” that follows the true form of the graphic, like in the old HTML-days?

Any help really is appreciated!

Thanks a lot and best regards

Tesla


(Hans-Gerd Claßen) #2

svg instead of png?


#3

I’ve never used SVG before. Does this format exclude the “rectangle” behaviour of graphics?


#4

Here’s a demo of how to link just the path of an SVG:

http://jsfiddle.net/7bwm0scu/

It requires setting an ID on the path or SVG element you want linked:

<clipPath id="clipTriangleUp">
            <polygon points="0 87,100 87,50 0"/>
</clipPath>

And then including an anchor tag which references the ID of that path within the SVG code:

clip-path="url(#clipTriangleUp)"

Easier than this would be to use regular rectangles (which can have opaque). If you strategically overlay them, you can get them to link to individual URLs or timelines: linkedelements.hype.zip (25.7 KB)


#5

Perhaps my project-file will make it clearer. Please have a look:
Pie-Chart.hype.zip (58.4 KB)

Especially “Layer 4” and “Layer5” are blocking each other.

You hoover over layer 5 but text 4 fades in due to the fact that clickable instance have to be top-level.

Hope anybody can help me out on this. Thanks!

Best
Tesla


(Jeremy Anderson) #6

Hey Tesla,

Suggest that you look at http://d3pie.org

You will find that this with javascript is way better than doing this manually. They have a cool generator on the website for testing your content as well. Good luck!


#7

That indeed is a possible tool but with hype I have greater influence on the look.

Isn’t there any way of solving this within “Hype”?

Best,
Tesla


(Jeremy Anderson) #8

I’m relatively new to using Hype myself and am not the best person to offer
up advice here. I just thought to share a resource which which I have used
previously for accomplishing SVG pie charts. Sorry I cannot be of further
assistance.


#9

Hi Jeremy,

please don’t get me wrong. Indeed your tip was the right path. I was able to realize the piechart due to your hint. Thanks for that!
I was/I’m still dazzled that “hype” seems to reach its limits on such a simple figure.

Best,
Tesla


(Jonathan Deutsch) #10

In fairness, it is more that HTML has reached its limit, which is why one needs to go SVG :wink:. I just came across this article for drawing pie charts (anything but simple…):