Good morning, I'm struggling trying to display the tooltip in an XY Chart basing on a condition.
I would like to change the text depending on the value of a series property. In my case I have the "stato_lotto" property and I'm trying to do something like this:
if( '{stato_lotto}' = 'NO',
'Posizione: [bold] {nomeTooltip}' + "[/] \n" ,
'Lotto: [bold] {stato_lotto}' + "[/] \n" )
The tooltip is shown, but it doesn't change based on {stato_lotto} value.
Is this approach wrong?
Hi, make sure your path reference to stato_lotto is right, for example:
{.../Statos.custom.stato_lotto}
Hi Alejandro, actually is not based on a custom property, but is a property of the dataSources
You are quoting stato_lotto, so it is just a string with curly braces. For curly braces to be evaluated in an expression, they must not be quoted. Where you wish to perform string operations, use concat() or arithmetic +, combined with quoted constant strings.
Forgive me Phil, I don't think to have understood correctly.
You mean something like this?
if( concat('{', 'stato_lotto', '}') = 'NO',
I have no error with this expression but is not working, but I'm sure I don't understand right your explanation.
If I don't quote the curly braces I have error in the Binding Preview.
Use the property selector to insure you get the correct reference to the property that you want, the error is undoubtedly because the path is not recognized.
I would expect something more like this:
if(this.props.dataSources.stato_loto} = 'NO', ...
Don't confuse the markup in the text with the expression language, the chart knows how to interpret the markup.
If you're trying to vary the tooltip based on the value of a column, I'm not sure you're headed in the correct direction. The expression language doesn't natively loop.
This "work" but of course in this way I have to choose the index statically.
Yes, that's what I need to do. I guess that using directly the property of the tooltip (that is dynamic based on the value of the column I could do it.
Eventually, how could be possible to manage different tooltip text?
It's a little unclear to me exactly what you are wanting to do with the tool tip. Can you explain in detail, what conditions would make the tool tip change and what that change would be?
Of course sorry, I try to explain it.
I have this XY chart set as column that show the show the production status of some machines.
The tooltip show me the time the machine was off, the yield and other information about that machines. In other cases (but not always) I need to show more information in the tooltip, I know when to show this information because the property of every column "stato_lotto" could be "YES" or "NO".
So I need to know the stato_lotto property of that specific column so to manage the tooltip text.
You can have a look at Perspective XY Chart xAxes tooltip text {dateX} where I've "documented" some of my findings for tooltip formatting.
There's a link in there somewhere to the AM Charts documentation. If they don't support expressions then Ignition probably can't help you. (The XY Chart component is based on the AM Charts XY Chart.)
My Embr-Charts module’s Chart.js component allows for totally custom tooltip content.
You can create callbacks that modify a section of the tooltip (title, body, footer, labels, etc.), or you go fully custom and create the entire tooltip yourself using the “External HTML Tooltip” functionality.
The contex parameter passed into the callback functions allows you to access the current hovered point (+ the rest of the chart’s properties), so you can choose what information you put on the tooltip.
The self parameter available in the callback is the Perspective component itself, which allows you access things like custom properties from within the callbacks.
I will say that this is fairly advanced and if you aren’t comfortable with Javascript you’ll probably have a bad time.
@Transistor, I'm reading the documentation, the only thing that maybe could be useful is this is this, but I don't know how to implement it.
@bmusson, thanks for your help, I wouldn't start from the beginning with all the work, I prefer to continue using the XY chart.. and as you say I have no knowledge in Javascript, but thanks again for the input
I'm trying to do some tests about this, actually expressions are supported because if I do something like this
if( True,
concat( '{', 'labelYaxis', '}'),
concat('{', 'stato_lotto', '}')
)
if I change True to False for example I've different return, what doesn't work is the string in the if, so if I try this
if( concat('{', 'inProduzione', '}') = True,
concat( '{', 'labelYaxis', '}'),
concat('{', 'stato_lotto', '}')
)
or
if( concat('{', 'inProduzione', '}') = '1',
concat( '{', 'labelYaxis', '}'),
concat('{', 'stato_lotto', '}')
)
they don't work. Any idea about this?
Those are bindings which determine what is fed into the tooltip. They are not expressions inside the tooltip - which is what you were asking about.
if( True, ...
This is always true.
if( concat('{', 'inProduzione', '}') = True, ...
This is never true. It would be the same as if("hat" = true, ..., ...) . It will always be false.
if( concat('{', 'inProduzione', '}') = '1', ...
This is checking if the string '{inProduzione}' = '1'` which it doesn't. It will always return false.
Re-read what lrose wrote in post #5.
Transistor, thank you for your reply, I appreciate it.
I was missing this, I thought I could interpretate in the same way of the tooltip.
So I surrender, I also try to insert a script change on the tooltip > text property because I guess maybe it changes but actually the text is static so I don't have any fire.
Thank you all for the help
In the end I opted to create a second series in order to manage the tooltips individually by setting the same Xaxis and creating a new Yaxis and then hiding it.
Thank you all for the help
Yes, that works. You would need to generate two sets of data: one for each tooltip style. You could format them so they appear identical and nobody will ever know!
Don't forget to mark one of the posts as "Solution" - even your own - and it will show up quoted below the question.