We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

exclude a series to be shown inside the trackball tooltip

Thread ID:

Created:

Updated:

Platform:

Replies:

133028 Oct 4,2017 07:51 PM UTC Oct 10,2017 06:13 PM UTC JavaScript 7
loading
Tags: ejChart
Marco Giorgi
Asked On October 4, 2017 07:51 PM UTC

Is there a way to exclude one or more series to be shown inside the trackball tooltips of a line chart?
I.e. the series that are not shown in the legend.
(https://help.syncfusion.com/js/chart/user-interactions#trackball)

for example here http://jsplayground.syncfusion.com/nmp2ifhm I'd like to hide the tooltip of the trackball for Japan data

Thanks,
Marco



Saravana Kumar Kanagavel [Syncfusion]
Replied On October 5, 2017 07:04 AM UTC

Hi Marco, 

Thanks for contacting Syncfusion Support. 

We have analyzed your query and modified the sample based on your requirement. Please refer the code example below 

[JS] 
$("#container").ejChart( 
{ 
       trackToolTip:"onTrackballRendering" 
}); 
 
function onTrackballRendering(sender){ 
      if(sender.data.Series.name == "Japan" && sender.data.serIndex == 2){ 
         sender.cancel = true; 
      } 
  } 
 

In the above code, we are triggering trackTooltip event . In the event, we have cancelled the trackball rendering for third series of japan.  
Find the sample link from the below 


And you can change this with respect to your requirement. Find the output of the sample below 

 

Please let us know if you have any concern. 

Regards, 
Saravana Kumar K. 


Marco Giorgi
Replied On October 5, 2017 07:15 AM UTC

many thanks Saravana for your reply, 

One more question could it be possible to remove also the circle that appears over the series that is not displayed in the trackball?


Saravana Kumar Kanagavel [Syncfusion]
Replied On October 5, 2017 12:18 PM UTC

Hi Marco, 

Thanks for your update. 

We have analyzed your query and modified the sample based on your requirement. 

Please refer the code example below 

[JS] 
$("#container").ejChart( 
{ 
      trackToolTip:"onTrackballRendering" 
  } 
  var markerElement, markerId,seriesIndex; 
    function onTrackballRendering(sender){ 
      var chart$("#container").ejChart("instance"); 
      if(sender.data.Series.name == "Japan" && sender.data.serIndex == 2) { 
         sender.cancel = true; 
         seriesIndex = sender.data.serIndex; 
       } 
        markerId"container_svg_TrackSymbol_" + seriesIndex + "_" + sender.data.pointIndex; 
        if(!(ej.isNullOrUndefined(markerId))){       
        for(var i=0;i< chart.gTrackball.childElementCount;i++){ 
           var trackElement = chart.gTrackball.childNodes[i]; 
           (trackElement.id == markerId) ? trackElement.remove() : "" ; 
         } 
       }       
    }    
 

In the above code , we are trigger the trackTooltip event . In the event, we have cancelled the rendering of tooltip and also remove the hovering marker for particular third series dynamically. 

Kindly find the sample link from the below 



Please find the output of the sample below 
 

And also we provided second solution that is dynamically show and hide the whole marker for particular point in third series. Please refer the code example below 

[JS] 
$("#container").ejChart( 
{ 
   trackToolTip:"onTrackballRendering" 
} 
 
var markerElement, markerId, markerClipId; 
    function onTrackballRendering(sender){ 
      var seriesIndex; 
      var chart$("#container").ejChart("instance"); 
      if(sender.data.Series.name == "Japan" && sender.data.serIndex == 2) { 
         sender.cancel = true; 
         seriesIndex = sender.data.serIndex; 
       } 
       if(!(ej.isNullOrUndefined(seriesIndex))){ 
         markerId = "container_svg_Series" + seriesIndex + "_Point" + sender.data.pointIndex +"_symbol"; 
         var markerElement = document.getElementById(markerId); 
         markerClipId"container_svg_TrackSymbol_" + seriesIndex + "_" + sender.data.pointIndex; 
         for(var j = 0; j < markerElement.parentElement.childElementCount;j++){ 
           var currentElement = markerElement.parentElement.children[j]; 
           currentElement.style.display= (currentElement.id == markerId) ? "none" : "block"; 
        } 
        for(var i=0;i< chart.gTrackball.childElementCount;i++){ 
           var trackElement = chart.gTrackball.childNodes[i]; 
           (trackElement.id == markerClipId) ? trackElement.remove() : "" ; 
         } 
       }       
    }    
 

And kindly find the sample link from the below 



Please find the output of the sample below 

 

Please let us know if you have any concern on this. 

Regards, 
Saravana Kumar K. 


Marco Giorgi
Replied On October 5, 2017 09:50 PM UTC

Thanks Saravana, your support is priceless.

I'm not able to make it work on my implementation, as I get an undefined object error at line:

for (var i = 0; i < chart.gTrackball.childElementCount; i++) {

gTackball is undefined.

I've tried to make the two example as similar as possible but on mine doesn't work, maybe some configuration that generates a conflict. 

Effectively, inspecting the chart object I don't see any gTrackball member.

Here is the playground where you can see the issue at line 235:

http://jsplayground.syncfusion.com/231ie1es



Saravana Kumar Kanagavel [Syncfusion]
Replied On October 6, 2017 08:34 AM UTC

Hi Marco, 

Thanks for your update. 

We have analyzed your query and found that you have enabled the canvas rendering for chart in sample. In our previous update, we have provided the code for chart rendering in SVG mode. Now we have modified the sample to work properly in both SVG and Canvas modes. 

Please refer the code example below 

[JS] 
$("#chart").ejChart({ 
    trackToolTip: 'onTrackballRendering' 
} 
function onTrackballRendering(sender) { 
    var chart = $("#chart").ejChart("instance"); 
    if (sender.data.Series.name != '"2017"' && sender.data.Series.name != '"average"') { 
      sender.cancel = true; 
      seriesIndex = sender.data.serIndex; 
    } 
    markerId = (chart.model.enableCanvasRendering) ? "chart_canvas_trackSymbol_" + seriesIndex + "_" + sender.data.pointIndex : "chart_svg_TrackSymbol_" + seriesIndex + "_" + sender.data.pointIndex; 
    var trackElement; 
    if (!chart.model.enableCanvasRendering) { 
      if (!(ej.isNullOrUndefined(seriesIndex))) { 
        for (var i = 0; i < chart.gTrackball.childElementCount; i++) { 
          trackElement = chart.gTrackball.childNodes[i]; 
          (trackElement.id == markerId) ? trackElement.remove() : ""; 
        } 
      } 
    } else { 
      trackElement = document.getElementById(markerId); 
      trackElement.style.visibility = "hidden"; 
    } 
  } 
 
 
Note : You can change the code respect to your requirement. 

And you can find the sample from the below link 

Please let us know if you have any concern. 

Regards, 
Saravana Kumar K. 


Marco Giorgi
Replied On October 6, 2017 04:30 PM UTC

Many thanks Saravana.

The example works fine but as you can see from the playground the labels keep their "original" position, therefore, due to the high number of series, they look like they are misplaced. Sometimes they are never displayed as they go outside of the chart area.

Is there a way to change their positions?


Dharanidharan Dharmasivam [Syncfusion]
Replied On October 10, 2017 06:13 PM UTC

Hi Marco,  
 
Thanks for your update. 
 
We have analyzed your query. We would like to let you know that, since there are more number of series, the trackball tooltip will be visible whose position fits in the chart area, other tooltips will not be visible.  
 
Screenshot: 
  
In the above screenshot, there are more than 30 series, but the trackball tooltip is visible whose position fits in the chart area. As per your request, in our previous updates we have provided workaround solution with respect to your scenario. Since the chart is rendered in canvas mode, the trackball tooltip positions can’t be customized. 

However we have achieved your requirement as workaround using trackToolTip event. In this event we have removed the default tooltip(since position can’t be customized) and added tooltip as canvas element. Now trackball tooltip will be visible for the two series (2017 and average). You can change this with respect to your requirement. Find the code snippet to achieve this scenario. 
 
JS: 

$("#chart").ejChart({ 
    //... 
    trackToolTip: 'onTrackballRendering', 
}); 
 
function onTrackballRendering(sender) { 
   //Removed default tooltip 
   sender.cancel = true; 
 
    //Added tooltip with respect to series 
    if(sender.data.Series.name == '"2017"') { 
       ele.fillStyle =sender.data.Series.fill; 
       ele.fillRect(sender.model.m_AreaBounds.Width/2,sender.model.m_AreaBounds.Height/3,80, 30); 
       ele.fillStyle ="white"; 
       ele.fillText(sender.data.currentText, sender.model.m_AreaBounds.Width/2 +    
                                   padding,sender.model.m_AreaBounds.Height/3 + 20); 
       ele.font = "11px Segoe UI"; 
       ele.textAlign = "center"; 
       ele.stroke(); 
    } 
   else if (sender.data.Series.name == '"average"') { 
       ele.fillStyle = sender.data.Series.fill; 
       ele.fillRect(sender.model.m_AreaBounds.Width/2,sender.model.m_AreaBounds.Height/2,80, 30); 
       ele.fillStyle ="white" 
       ele.font = "11px Segoe UI"; 
       ele.textAlign = "center"; 
       ele.fillText(sender.data.currentText, sender.model.m_AreaBounds.Width/2 + padding  
              ,sender.model.m_AreaBounds.Height/2+20 ); 
       ele.stroke(); 
    } 
} 

 Screenshot: 
 
Sample for reference can be find from below link. 

Kindly revert us, if you have any concern. 

Dharani. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;