Chart tooltip onserieshover...

9 posts, 1 answers
  1. Robin
    Robin avatar
    46 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    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.
  2. Alan
    Alan avatar
    12 posts
    Member since:
    Aug 2012

    Posted 05 Sep 2012 Link to this post

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

    Thanks
  3. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2815 posts

    Posted 10 Sep 2012 Link to this post

    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!
  4. Robin
    Robin avatar
    46 posts
    Member since:
    Jul 2012

    Posted 10 Sep 2012 Link to this post

    Excellent.  This work great.

    Thank you.
  5. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 21 Dec 2012 Link to this post

    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
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Dec 2012 Link to this post

    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!
  7. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 03 Jan 2013 Link to this post

    so where i use that function if the chart donde have this statment like seriesHover: function??
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 03 Jan 2013 Link to this post

    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!
  9. David
    David avatar
    12 posts
    Member since:
    Nov 2012

    Posted 03 Jan 2013 Link to this post

    Oooooo thanks thanks, 
Back to Top