Chart Tooltips with buttons

10 posts, 0 answers
  1. Walid
    Walid avatar
    19 posts
    Member since:
    May 2013

    Posted 25 May 2014 Link to this post

    Hello,

    I'm playing around with chart tooltips (kendo.dataviz.chart & kendo.dataviz.sparkline)
    Using a function to provide the tooltip content I'm able to customize its content in order to add some buttons (used to launch actions from each tooltip directly).
    The problem that I'm having is that I can't figure out how to keep mouse focus while staying over of the tooltip and trying to click anyone of the buttons. I need to prevent the chart control to draw a new tooltip when the pointer is moving away from the original chart point.

    Is there any way to handle the mouse behaviour over a tooltip object? (I've checked with autoHide: false and showOn: "click" - no luck)
    Is there a better way to have "buttons" or "actions" associated to points in charts?

    Thanks,
    Walid
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 May 2014 Link to this post

    Hi Walid,

    This scenario is not supported out-of-the-box by Kendo UI Chart. As a possible workaround I can suggest the following appoach: 
    - Hide the default tooltip;
    - Show the tooltip in the seriesClick event with a custom position.
    $("#chart").kendoChart({
      //....
      tooltip: {
         visible: false,
      },
      seriesClick: onSeriesClick
    });
     
    function onSeriesClick(e){
      $("#chart .k-tooltip").html(e.dataItem).css('background', e.series.color).show();
    }
     
    /* CSS */
    .k-tooltip{
       /* custom position */           
    }
    </style>


    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 15 Oct 2014 in reply to Iliana Nikolova Link to this post

    hello,

    in this way how can I set position dynamically on the top of each series ?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 16 Oct 2014 Link to this post

    Hello Arsen,

    I answered to the same question in your other ticket, however here is my answer too:

    This scenario is not supported out-of-the-box by Kendo UI Chart. As a possible workaround I would suggest to use the k-chart-tooltip class and add an appropriate top / left margin values.
    .k-chart-tooltip{
       margin-top-35px !important;
       margin-left-30px !important;
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 27 Oct 2014 in reply to Iliana Nikolova Link to this post

    Thank you, Iliana.

    One more question, How can I change bar opacity with onSeriesClick event ?

    Thanks in advance
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Oct 2014 Link to this post

    Hi Arsen,

    In order to achieve this you should change the series.opacity value and redraw the chart. As an example: 
    $("#chart").kendoChart({
      //....
      seriesClick: function(e){
         e.series.opacity = 0.5
         e.sender.redraw();
      },
      transitions: false
    });

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 29 Oct 2014 in reply to Iliana Nikolova Link to this post

    does not work!

    Thanks
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 29 Oct 2014 Link to this post

    Hi Arsen,

    I tested the suggested solution and it is working as expected. Please take a look at this dojo and let me know if I am missing something.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Arsen
    Arsen avatar
    15 posts
    Member since:
    Sep 2014

    Posted 29 Oct 2014 in reply to Iliana Nikolova Link to this post

    Hi LLiana,

    its working in common, but I need to set opacity just the bar I have clicked, not all together, and reset opacity after mouse leave from selected bar.
    I have set the highlight=false on seriesHover event, and need to set custom opacity on click event.

    thanks
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 31 Oct 2014 Link to this post

    Hi Arsen,

    Actually the opacity configuration is related to the entire series not to a particular point in the series, however you can change the color of the clicked bar. As a possible approach I would suggest the following:
    - Define colorField for all points;
    - In the seriesClick event change the colorField value.

     For your convenience here is a simple example. Please keep in mind that there is no event which fires when the mouse leaves the selected bar.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top