Update tooltipContent continuously in waterfallchart without mouse move

Update tooltipContent continuously in waterfallchart without mouse move

Posted by: spathi on 4 August 2021, 3:01 am EST

• 

  spathi

  • Post Options:
  • Link
    Copy

  Posted 4 August 2021, 3:01 am EST

  Update tooltipConent for waterFall chart based api response. if the mouse is moved then only it’s updating . continuously if we stay at one position it’s not updating. means tooltipContent is not calling continuously. can you please help on it in angular 10

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 August 2021, 6:54 am EST

  Hello,
  
  Could you please provide some more information on the following points:

  1. when do you wish to update the tooltip content(that is make a call to API)
  2. how you are setting and updating the tooltip content after fetching the response from the API, and once fetched how long do you wish to send the request to API.
  3. does your chart renders dynamic data, which keeps on updating with time as the tooltip content depends on the chart?

  Geeting the information helps us in the further investigation to help you more.

  Also, you need to hide the tooltip before updating its content, as it cannot be updated will show.

  Regards.

• 

  spathi

  • Post Options:
  • Link
    Copy

  Posted 6 August 2021, 3:49 am EST

  1. when do you wish to update the tooltip content(that is make a call to API) - When
     
     I hover on particular point then it i s showing some loading message, if I still place the mouse there itself with out moving then I need to show the content from the response

  2. how you are setting and updating the tooltip content after fetching the response from the API, and once fetched how long do you wish to send the request to API. - public tooltipContent = (hti: wjChart.HitTestInfo) => {
     
     if (hti.item) {
     
     if (hti.item.variable && this.visualizationConfig.insights?.waterFallImpacts?.enableHoverOverValues) {
     
     const feature = this.featureDefinitions.features.find((feat) => hti.item.variable.replace(’ *', ‘’) === feat.DisplayName);
     
     if (feature) {
     
     if (!this.impactDetails[hti.item.variable]) {
     
     const val = wijmo.Globalize.format(hti.item.aggregateEffect, this.dataLabelFormat);
     
     let tooltip =

     <span>${hti.item.variable} </span><br/> <span>Total: ${val}</span><br/><br/><table class="tooltip-waterFall">

     ;

          this.service.getWaterFallImpactDetailsData(feature.Name).subscribe((res) => {
            res.impactFeatures.forEach((ele, i) => {
              if (i === this.visualizationConfig.insights?.waterFallImpacts?.maxHoverOverValues - 1) {
                return;
              }
              if (ele.value) {
                tooltip += `<tr><td>${ele.value}</td> <td>:</td><td>${wijmo.Globalize.format(ele.totaleffect, 'f1')}</td></tr>`;
              }
            });
            tooltip += '</table>';
     
            this.impactDetails[hti.item.variable] = tooltip;
            this.waterFallChart.tooltipContent = this.tooltipContent;
          });
     
          // TODO: This is the place where we should initiate impact details call
          this.impactDetails[hti.item.variable] = `<span>Loading...</span>`;
        }
        return this.impactDetails[hti.item.variable];
      } else {
        const val = wijmo.Globalize.format(hti.item.aggregateEffect, this.dataLabelFormat);
        return `<span>${hti.item.variable || hti.x}: ${val}</span>`;
      }
     

     } else {
     
     const val = wijmo.Globalize.format(hti.item.aggregateEffect, this.dataLabelFormat);
     
     return

     <span>${hti.item.variable || hti.x}: ${val}</span>

     ;
     
     }
     
     }

     const formattedPrediction = wijmo.Globalize.format(this.prediction, this.dataLabelFormat);

     return

     <span>${this.impactWaterFallChart.totalLabel}: ${formattedPrediction}</span>

     ;
     
     };

  3. does your chart renders dynamic data, which keeps on updating with time as the tooltip content depends on the chart? - No only once the chart data is updated after the API response.

  my question was simple i just want to call the tooltipContent Property continuously when i hover on particular point( with out mouse move) in the waterfall chart.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 8:46 am EST

  Hi,

  We apologize but we cannot implement the above requirement i.e. to make continuous calls to the API while the mouse pointer is at the same position, because the tooltip is shown on the mouse hover event call.

  what happens here is if you make a regular call to render the tooltip causing the loop to start, further events are blocked as the current loop is still being executed, thus making it difficult to stop the ongoing loop using other conditions or events.

  Also, the tooltip content can only be updated after being hidden, so you need to hide the tooltip before showing the updated content, for that, I would recommend that instead of calling tooltipContent regularly what you can do is after getting the updated tooltip content(from the API call), first hide the tooltip, the second update the tooltip content then call the tooltip show method.

  Sorry for the inconvenience caused.

  ~regards