Add 'title' to svg element about peity HOT 16 CLOSED

I'm surprised this one hasn't been requested more often. I think many users would expect to see values when hovering over parts of a chart. @benpickles I would be more than happy to work with you on the details on this. Just let me know and I can draft something up.

Also, not to be picky but I think a more intuitive title for this issue would be Add tooltip to charts.

from peity.

Ok so here's my first crack at doing this for a pie/donut chart. I am by no means a JS guru. This is merely to get a concept across and start getting feedback. So here's a fiddle that I did: https://jsfiddle.net/larryazevedo/01v4oLuj/

As you can see, I'm suggesting the following:

• Help the user know what part of a chart they're looking at by slightly changing the fill color on mouseover. This becomes more important on smaller charts.
• Switch to SASS/CSS for fill colors:
  • Makes peity charts easy to integrate into frameworks like Bootstrap, Foundation, etc
  • Theming across an entire application would be much easier. Highcharts does this well.
  • I realize this may feel like it would be a project in itself so if you would like, I can show you examples of how useful this can be and how I would set it up.
• Have the tooltip accept a {{value}} and/or {{percent}} that can be used in the actual tooltip.
• The tooltip itself should be outside the <svg> so as not to get clipped by the svg's viewBox.

@benpickles, I would appreciate your feedback on this.

PS: I'll start on bar chart tooltips after I get feedback on this one.

from peity.

Thanks that's really useful. I've been thinking about this and will get back to you soon when I've got something concrete to show.

from peity.

Here's my second attempt at this: https://jsfiddle.net/larryazevedo/khbkkjyv/13/

I'll tell you right now... it has it's flaws but I just wanted to get different ideas out there so it helps us brainstorm better ways to do it. I'll try to get something else to show you guys later in the next week or so.

from peity.

@eman1986 good point, I've just released version 3.3.0 that includes the relevant commit.

from peity.

Thanks for the offer, sounds good :) It's been requested in some form or another a few times... #2, #9, #29, #31, #55, #84

from peity.

Ok, I'll try to get to it by next Monday.

from peity.

I like that, it's exactly what I'm looking for.

from peity.

@benpickles I know this is kinda off topic but I just wanted to throw this out to you before you start coding anything.

Let's look at the example you have on http://benpickles.github.io/peity/:

The current code:

<p class="data-attributes">
  <span data-peity='{ "fill": ["red", "#eeeeee"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
  <span data-peity='{ "fill": ["orange", "#eeeeee"], "innerRadius": 14, "radius": 36 }'>2/7</span>
  ...
</p>

The proposed code:

<p class="data-attributes">
  <span data-peity='{ "class": ["fill-danger", "fill-gray-lighter"],    "innerRadius": 10, "radius": 40 }'>1/7</span>
  <span data-peity='{ "class": ["fill-warning", "fill-gray-lighter"], "innerRadius": 14, "radius": 36 }'>2/7</span>
  ...
</p>

So instead of outputting the fill attribute, it would output the class attribute; giving the user much more flexibility. I suppose you could give the ability to configure both the fill and class attributes but I don't know why anyone would want to do that. Actually, the more I think about it, the more I'm in favor of scraping the fill attribute altogether (in favor of using class).

Of course, we should include a Sass and CSS file when downloading Peity. I can help with that as well.

Let me know what you think?

Larry

from peity.

That's a really interesting suggestion. Would you mind creating a new issue for this so that it can be discussed independently.

from peity.

RE tooltips, I've made a tiny addition to include the element's value (not yet on master): 22f7ad9.

Here's an example of what it enables: https://jsbin.com/vufayan/edit?html,js,output

I don't think this is quite what you were hoping for but I'm wary of adding too much functionality to the library preferring instead to expose enough to enable extended uses. That said when combined with the (seemingly undocumented!) after hook I think there's much more potential to achieve what you're looking for - I'll have to get back to you with an example of this.

from peity.

@benpickles
Your example doesn't work
give me "error"
"@vufayan.js:33:6" on console

from peity.

Thanks @robbisy. Possibly due to http://stackoverflow.com/a/18049842/194664, should be fixed now.

from peity.

@benpickles
Your example is great.
And any plan to merge the changes into master?

from peity.

It has a bug. Just change <br> to <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

from peity.

Do we have an ETA of when this will be available? I'd love to use this on a project I'm working on

from peity.