Chart tooltip onserieshover...

[Robin]

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.

[Alan]

Bump....
Also looking for a solution to this.

Thanks

[T. Tsonev]

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

[Robin]

Excellent.  This work great.

Thank you.

[David]

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

[Iliana Nikolova]

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

[David]

so where i use that function if the chart donde have this statment like seriesHover: function??

[Iliana Nikolova]

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

[David]

Oooooo thanks thanks,