Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Chart Tooltip Html with logic functionality

Arne Muhs
5 years ago Feb 28, 2017 2:58pm

Hello,

is it possible to create a tooltip in html with logic functionality?

I have this javascript function

        sb.append( "function()" );
        sb.append( "{" );
        sb.append( "  var text = '';" );
        sb.append( "  if(this.point.ivShowValue == true)" );
        sb.append( "  {" );
        sb.append( "    if( this.point.ivValue != null )" );
        sb.append( "    {" );
        sb.append( "      text = this.series.name +': <b>' + this.point.ivValueAsString + ' ' + this.point.ivMessage + '</b>';" );
        sb.append( "    }" );
        sb.append( "    else if ( this.point.ivBottomValue != null || this.point.ivUpperValue != null )" );
        sb.append( "    {" );
        sb.append( "      text = this.series.name + ':<br><b>' + this.point.ivUpperValueAsString + ' ' + this.point.ivUpperMessage + '</b><br><b>' + this.point.ivBottomValueAsString + ' ' + this.point.ivBottomMessage + '</b>';" );
        sb.append( "    }" );
        sb.append( "  }" );
        sb.append( "  else" );
        sb.append( "  {" );
        sb.append( "    text = this.series.name +': <b>'+ Highcharts.dateFormat('%d.%m.%y', this.point.low) + ' - ' + Highcharts.dateFormat('%d.%m.%y', this.point.high) + '</b><br>' + this.point.name;" );
        sb.append( "  }" );
        sb.append( "  return text;" );
        sb.append( "}" );

the only thing i want is to set a tabulator. But it doesnt work with \t.

Could anyone help me out?

Thank you.

Guillermo Alvarez
5 years ago Mar 01, 2017 7:55am

Hi,

You can use html for the tooltip content, but you'll need to enable useHTML. 

Take a look at the result and code in Lines with Complex HTML Tooltip demo.

Hope this helps,

Guille

+2
Arne Muhs
5 years ago Mar 01, 2017 9:43am

Guillermo Alvarez: Take a look at the result and code in Lines with Complex HTML Tooltip demo.

 

I know this example, but there is no complex logic in it.
I have my own class which extends DataSeriesItem for some more properties to show, so i want to something happen if its correct set otherwise something different happens.

If i copy my logic into the pointformatter it's blank.
Maybe i missed something.

Thanks for your answer i appreciate it.
 

Guillermo Alvarez
5 years ago Mar 01, 2017 9:51am

Tooltip has setPointFormatter so it should work using a complex formatter function too.

It's not really easy to see what's going on, but I would try to do some console.log( debugging and check the value you use for your conditions. Also, I have the feeling than in a point formatter 'this' refers to the point, so try both with 'this.point.ivShowValue' and 'this.ivShowValue' to see if it makes a difference.
 

+1
Arne Muhs
5 years ago Mar 01, 2017 9:52am

Ok i will try it thank you :).