How to pass a variable from javascript to TOOLTIP

[ingezone]

Hello!

I am working with ASP.NET MVC and from javascript I need to update MyVariable in the TOOLTIP.

Through an ajax query I get a FLOW RATE response and I need to pass this result to the TOOLTIP.

Probe, but I have not succeeded, HELP ME ....

My code snippet

Code: Select all

tooltip: {
shared: true,
useHTML: true,
headerFormat: '<td style="text-align: left;"><b>Flow Rate: {MyVariable} [l/s]</b></td>',
pointFormat: '<tr><td><span style="color: {series.color}">\u25CF</span> {series.name}:  </td>' + '<td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2,
split: false,
}

[sebastian.h]

Hi,
We appreciate you reaching out to us.

Try to use tooltip.formatter this is callback function to format values in tooltip.

Code: Select all

      formatter: function() {
        var myVariable = ' test';
        var point = this;
        return point.y + myVariable
      },

Live demo:
https://jsfiddle.net/BlackLabel/7yknj8qg/

API References:
https://api.highcharts.com/highstock/tooltip.formatter

Let me know if that was what you were looking for.
Best regards.

[ingezone]

Hi.

It is not the answer I am looking for. I need to keep the format that I give when starting the graph using the following HTML formatter.

Code: Select all

tooltip: {
shared: true,
useHTML: true,
headerFormat: '<td style="text-align: left;"><b>Flow Rate: {MyVariable} [l/s]</b></td>',
pointFormat: '<tr><td><span style="color: {series.color}">\u25CF</span> {series.name}:  </td>' + '<td style="text-align: right"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2,
split: false,
}

How can I adapt your answer to my requirement.

BEst regards.

[ingezone]

The following image illustrates the format that I need to keep.



Best regards.

[ingezone]

Hello Sebastian

Thanks to your guidance, I finally achieved my goal and can implement the code I need.

Regards

[sebastian.h]

You're welcome!
In case of any further questions, feel free to contact us again.

[ingezone]

Hi Sebastian

The text in TOOLTIP can be made to blink red as if it were an alarm.

It can be done, which is the most efficient way to do it.

Best regards

[sebastian.h]

Hi,

I suppose you can do anything with our highcharts and with a good understanding of JavaScript.
We are only limited by our imagination

Regards.

[ingezone]

You are absolutely right, apply CSS and get it done.

Regards

[sebastian.h]

If you have any questions, feel free to contact me at any time.

Regards.

[nerixs]

Hello,
In the idea of displaying the date, at the top of the tooltip (as on posts 15 of "ingezone" MyVaariable).

It doesn't work and with "point.tip" the value is undefined.
Can you help me?

http://jsfiddle.net/m6wsvdx8/

Best regards

[nerixs]

It is not the date, but the hour.

[sebastian.h]

Hi nerixs,
Thanks for contacting us!

The reason is that you need to mine the data from the object elsewhere, at points[0] you have there two series in the data, and you are looking for the value from points[0] for point.tip.

Code: Select all

            formatter: function() {
              var point = this,
                tip = point.points[0].point.tip;
              return tip;
            },
 

Let me know if was what you are looking for.
Best regards.

[nerixs]

It's Ok, thank you very much.
http://jsfiddle.net/kdstr7a1/
Another possibility, what do you think?
http://jsfiddle.net/dm36xpz1/

Best regards.

[sebastian.h]

Hi,
Thanks for the message and for sharing your example.

Using pointFormatter it's also looks like a good solution for formatting point in the tooltip.

Best regards