exclude a series to be shown inside the trackball tooltip

[Marco Giorgi]

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]

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 

Sample Link : http://jsplayground.syncfusion.com/5cdzx2qf 

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]

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]

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 

Sample Link : http://jsplayground.syncfusion.com/vyngbxux 

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 

Sample Link  : http://jsplayground.syncfusion.com/32jta3t0 

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]

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]

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 

Sample Link : http://jsplayground.syncfusion.com/a5mqr4w5 

Please let us know if you have any concern. 

Regards, 

Saravana Kumar K. 

[Marco Giorgi]

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]

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. 

http://jsplayground.syncfusion.com/fsqyhbyo  

Kindly revert us, if you have any concern. 

Thanks, 

Dharani.