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

Chart tooltip onserieshover...

8 Answers 506 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 16 Jul 2012, 07:51 PM
I am attempting to hurdle our last issue with moving to Kendo charting.  On most of our charts, we provide a more indepth look at the data when hovering over a bar series item.  Often we will popup a panel with a pie chart breaking down totals, or a grid of the data that makes up the bar item etc.
I can utilize the onserieshover and create the pie chart/grid but can't seem to figure out how to make it appear as though it is a popup/hover item of the parent chart.  
My last attempt (which was a horrible idea, but I figured I'll try it), was to expand the .k-tooltip div to the size I needed, append a div tag, and call .chart on that.  It works... sort of.  It looks like it is drawing the chart, but then disappears.
See fiddle http://jsfiddle.net/giltnerj0/ZPEWN/5/ may hopefully describe what I am trying to do a little better.

If you comment out the 
    $(".k-tooltip").width(300);
    $(".k-tooltip").height(400);
    $(".k-tooltip").append("<br /><div id='childChart'></div>");

and then uncomment the 
<!--<div id="childChart"></div>--> 

It works perfectly, just as a separate chart.

8 Answers, 1 is accepted

Sort by
0
Alan
Top achievements
Rank 1
answered on 05 Sep 2012, 03:38 PM
Bump....
Also looking for a solution to this.

Thanks
0
Accepted
T. Tsonev
Telerik team
answered on 10 Sep 2012, 12:19 PM
Hi,

One possible solution is to use the tooltip template to render the "child" chart. For example: http://jsbin.com/ufufom/2/edit 

Using Kendo MVVM seems like an even cleaner alternative, but we don't have an example ready.

All the best,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robin
Top achievements
Rank 1
answered on 10 Sep 2012, 12:46 PM
Excellent.  This work great.

Thank you.
0
David
Top achievements
Rank 1
answered on 21 Dec 2012, 09:24 PM
if i use that example as reference to my app, how i can put that tooltip in a static position, 
im using this for static position:

<script>
$("#chart").kendoChart({
  //....
   tooltip: {
      visible: false
   },
   seriesHover: showTooltip
});
  
var showTooltip = function(e) {$("#chart .k-tooltip").html(e.value).show();
}
</script>
 
<style>
.k-tooltip{
   //custom position
}‚Äč
</style>

but the tooltip dosnt close when im not hover over the series

explain me please
0
Iliana Nikolova
Telerik team
answered on 26 Dec 2012, 01:13 PM
Hi David,

The observed behavior is due to the following:
  • The default chart's tooltip is not visible;
  • In the seriesHover event the element with class .k-tooltip is shown (using jQuery show() method), but such element is never hidden.

I am afraid at present there is no event which is fired when the series in Kendo UI Chart are not hovered. As a possible workaround you could hook up to the jQuery mouseleave event and hide the element with class .tooltip when the mouse leaves the chartArea. For example:

$("#chart").mouseleave(function(e){
    $("#chart .k-tooltip").html(e.value).hide()
})

 
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 03 Jan 2013, 01:18 PM
so where i use that function if the chart donde have this statment like seriesHover: function??
0
Iliana Nikolova
Telerik team
answered on 03 Jan 2013, 02:23 PM
Hi David,

You can call such function after the chart is initialized. For your convenience I prepared a simple jsFiddle example which demonstrates the suggested approach in action.

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
answered on 03 Jan 2013, 02:29 PM
Oooooo thanks thanks, 
Tags
Charts
Asked by
Robin
Top achievements
Rank 1
Answers by
Alan
Top achievements
Rank 1
T. Tsonev
Telerik team
Robin
Top achievements
Rank 1
David
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or