Hide chart tooltips when leave series

5 posts, 0 answers
  1. Rohan
    Rohan avatar
    10 posts
    Member since:
    Sep 2012

    Posted 08 Sep Link to this post

    Right now tooltips shows on entire chart div but i want two show tooltips on the specific bar only if leave that bar then tooltips will hide but now its showing leaving bar also. So i want to destroy the tooltips once leave the chart bar - series.

    I try seriesOver and seriesLeave but its not working

    My code

    if (response.Success) {
    $('#Campaigns').val(response.Campaigns);
    $('.spotterUploadProcessFooter .submitButton:visible').removeClass('k-state-disabled');
    if (response.AllowNextStep) {
    $('li[data-wzform="BudgetDistribution"]').removeClass('k-state-disabled');
    }
    else {
    $('li[data-wzform="BudgetDistribution"]').addClass('k-state-disabled');
    $('.spotterUploadProcessFooter .submitButton:visible').text('Finish Import');
    }
    var tabStrip = $('#uploadSummaryCharts').data('kendoTabStrip');
    for (var i = 0; i < response.CampaignUploadSummaryItems.length; i++) {
    var template = kendo.template($('#uploadSummaryChartTemplate').html());
    var previewHtml = template(response.CampaignUploadSummaryItems[i]);
    tabStrip.append({
    text: response.CampaignUploadSummaryItems[i].CampaignName + '(' + response.CampaignUploadSummaryItems[i].CampaignCode + ')',
    content: previewHtml
    });
    var chartOptions = getChartOptions('Campaign ' + response.CampaignUploadSummaryItems[i].CampaignName + '(' + response.CampaignUploadSummaryItems[i].CampaignCode + ')');
    if (response.CampaignUploadSummaryItems[i].HasCampaignCostDataUploadSummary) {
    var chartDataOptions = {
    dataSource: { data: response.CampaignUploadSummaryItems[i].CampaignCostDataUploadSummary },
    categoryAxis: [{
    field: 'Station',
    majorGridLines: { visible: false },
    line: { visible: true },
    minorGridLines: { visible: false },
    labels: { rotation: 'auto' }
    }],
    series: [{ field: 'OldGrossBudget', name: 'Old Gross Budget', axis: 'left' },
    { field: 'NewGrossBudget', name: 'New Gross Budget', axis: 'left' }],
    seriesLeave: function (e) {
        this.hideTooltip();
    },
    seriesOver: function (e) {
        $(e.element).parent().parent().on("mouseleave", function () {
            $('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).data('kendoChart').hideTooltip();
        });
    },
    valueAxis: { name: 'left', title: { text: 'Gross Budget' }, labels: { format: '{0:#,#.##}' } },
    legend: { item: { visual: chartLegend } },
    tooltip: { visible: false },
    seriesHover: function (e) {
    var htmlData = getToolTipTemplate(e);
    var tdClass = e.series.name.replace(/[^A-Za-z0-9]+/g, '');
    onSeriesHover(tdClass, htmlData, e.sender.element.attr('id'));
    $(e.element).parent().parent().on("mouseleave", function () {
        $('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).data('kendoChart').hideTooltip();
    });
    }
    };
    $.extend(true, chartOptions, chartDataOptions);
    $('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).kendoChart(chartOptions);
    }
    if (response.CampaignUploadSummaryItems[i].HasCampaignSpotDataUploadSummary) {
    var chartDataOptions = {
    dataSource: { data: response.CampaignUploadSummaryItems[i].CampaignSpotDataUploadSummary },
    series: [{ field: 'OldImpacts', name: 'Old Impacts', type: 'column', axis: 'left' },
    { field: 'NewImpacts', name: 'New Impacts', type: 'column', axis: 'left' },
    { field: 'OldSpotCounts', name: 'Old Spot Counts', type: 'line', axis: 'right' },
    { field: 'NewSpotCounts', name: 'New Spot Counts', type: 'line', axis: 'right' }
    ],
    valueAxis: [{ name: 'left', title: { text: 'Impacts' }, labels: { format: '{0:#,#.##}' } },
    { name: 'right', title: { text: 'Spot Count' }, labels: { format: '{0:#,#}' } }],
    legend: { item: { visual: chartLegend } },
    categoryAxis: {
    axisCrossingValue: [0, 10000],
    field: 'DateString',
    majorGridLines: { visible: false },
    line: { visible: true },
    minorGridLines: { visible: false },
    labels: { rotation: 'auto' }
    },
    tooltip: { visible: false },
    seriesHover: function (e) {
    var htmlData = getToolTipTemplate(e);
    var tdClass = e.series.name.replace(/[^A-Za-z0-9]+/g, '');
    onSeriesHover(tdClass, htmlData, e.sender.element.attr('id'));
    }
    }
    $.extend(true, chartOptions, chartDataOptions);
    $('#spotChart' + response.CampaignUploadSummaryItems[i].CampaignID).kendoChart(chartOptions);
    }
    }
    tabStrip.select('li:first');
    }
    else {
    showErrorNotification(response.ErrorMessage);
    }
    }, function () {
    hidePreload();
    });

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 10 Sep Link to this post

    Hello, Rohan,

    You can use the seriesLeave event to hide the tooltip with the hideTooltip() method when the point value meets a certain condition and show it on seriesOver as required with theshowTooltip() method:

    http://dojo.telerik.com/uSEYoLUH/3

    seriesOver: function(e){
              var seriesValue = e.value;
              e.sender.showTooltip(function(point) {
                if(seriesValue === point.value && point.value === 2){
                  return true;
                }
              });
            },
            seriesLeave: function(e){
             if(e.value==2){
              e.sender.hideTooltip();
             }
            }

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

  3. Rohan
    Rohan avatar
    10 posts
    Member since:
    Sep 2012

    Posted 11 Sep in reply to Alex Hajigeorgieva Link to this post

    @Alex Hajigeorgieva the tooltips is custom not a kendo tooltips so how to hide custom tooltips 
  4. Rohan
    Rohan avatar
    10 posts
    Member since:
    Sep 2012

    Posted 14 Sep Link to this post

    i want to hide after the series live not per the value 
  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 15 Sep Link to this post

    Hi, Rohan,

    The example I shared with you followed the initial requirement:

    i want to show tooltips on the specific bar only if leave that bar then tooltips will hide

    The example used the chart methods checking on the value of the serie whether a tooltip should be shown or not. 

    However, if you are using a custom tooltip, then the chart may have no knowledge of it and so the chart methods will do nothing. To be able to assist you further, can you share a simple runnable example, updating the Dojo with how the custom tooltip is created in your application.

    Meanwhile, I created another example that shows а custom toolti on seriesOver and hides it on seriesLeave for every other category. You may decide on your own condition, this is just an example:

    https://dojo.telerik.com/@bubblemaster/OlApULiQ

    Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top