This is a migrated thread and some comments may be shown as answers.

Why so much different chart tooltips, that all can do different things but all are very limited?

5 Answers 28 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Dirk
Top achievements
Rank 1
Dirk asked on 21 Nov 2013, 10:23 PM
Hello,

I' ve tried to set up a tooltip for an stacked area and stacked line (lines for comparison) chart.
From my point of view the categoryaxis crosshair tooltip would be great for showing details of chart data, because there is the vertical crosshair, which shows all datapoints.

  1. But the only thing you can show in this tooltip is the category value. Does this make sense? This value is shown at the bottom of the chart. Why can't I access all the dataItems?
  2. Why can't I change the relative position of all of the tooltips to the mouse pointer? On my chart the tooltip (standard for all the chart) now hides the points of interest, because it is just to the right of the mouse pointer.
  3. The most 'datafull' tooltip ist the standard, but this one jumps an falls to the nearest point of data on moving the mouse pointer.

What I'd like to suggest is to build a general purpose tooltip (templates are cool!), that:

  1. can access all data (especially dataItems) so you can provide additional data that is only used on tooltip
  2. can be positioned:
  • at a static point, static X or Y value or
  • relative to the upper left corner of the chart or
  • relative to the mouse pointer

Did I miss any feature or ist there no way to achive my goals (poitioning and showing all data) at this time?

Best regards
Dirk

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Nov 2013, 08:57 PM
Hi Dirk,

Up to the questions
  1. I believe using shared tooltip is suitable for this requirement;
  2. I am not quite sure if I understand this question correctly - I tested the default tooltip and everything is rendered as expected. Could you please elaborate a bit more or better yet provide a jsBin example / picture which demonstrates the issue? This way I would be able to advice you further and provide concrete recommendations;
  3. Same as the above point.
On a side note, as a different approach I can suggest hiding the default tooltip and show it in the seriesHover event with a custom position. For a sample code take a look at this forum thread.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dirk
Top achievements
Rank 1
answered on 05 Dec 2013, 05:19 PM
Hello Iliana,

up to the answers:
  1. you suggest to use the shared tooltip but all data you can access within is "... points - the category" and "pointscategory - the category name...", taken from API Docs. So there's no access to all dataItems. And the problem is there's no tooltip type that is a) able to access and be freely positioned (see following). Another point is, that the shared tooltip is shown on title and legend, which I don' like and no way to configure...
  2. and 3. I can't position the tooltip freely. Let's say I'd like to see the tooltip always 100px to the right of the current mouse pointer position (vertical crosshair).

Suggestion to use custom tooltip in seriesHover event:
as I'm using the vertical crosshair it should not matter if the mouse pointer is over a series or not the tooltip should always show data (exact values) of six series, that are stacked. This is luckily partially achievable by using the 'standard' tooltip of the chart, which shows up if the mouse pointer was over a series at the minimum of one time. The problem is, that I can't tell the tooltip to show up 100px to the right of the mouse pointer (not relative to data point in the chart).

Generally speaking I'like to have a (one) tooltip that I can position freely and that is able to access ALL data (all dataItems, category etc.) within the chart. This is a wish not a question.


Best regards
Dirk

0
Iliana Nikolova
Telerik team
answered on 09 Dec 2013, 03:49 PM
Hi Dirk,

Actually using a shared tooltip you could reach the original data through the dataItem in a sharedTemplate. For example: 
//....
tooltip: {
   visible: true,
   shared: true,
   sharedTemplate: " <div>#: category #</div>"+
   " # for (var i = 0; i < points.length; i++) { #"+
   "<div>#: points[i].series.name# : #: points[i].dataItem.blog #</div>"+
    "# } #"
}

Regarding the tooltip position, you are right - at this point there is no option for changing the tooltip position, however we keep this idea in mind for future releases. 

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dirk
Top achievements
Rank 1
answered on 23 Dec 2013, 10:07 PM
Hi Iliana,

The shared tooltip you suggested works fine, since the dataItem is accessible via points[x] - which I did not know.

So I did not find anything on this topic (e.g. points[x]) in API Reference.
Did I miss something in API Reference?

Some might say that documentation of Kendo UI is a problem since you can do almost everything with the widgets/controls but little is documented - or just hard to find.

A 'workaround' is the extraordinary support you provide.

Thanks a lot
Dirk
0
Alex Gyoshev
Telerik team
answered on 25 Dec 2013, 09:38 AM
Hello Dirk,

Indeed, the properties of a given category point are not well described in the documentation. Aside from that, the size of the chart documentation makes it hard to search. We are continuously looking for ways to improve that.

In that particular case, you can use a console.log in the template to see all the available data. (# console.log(points[i]); #).

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Dirk
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Dirk
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or