When I hover a slice of my pie chart I want the curser to change to a pointer using a style.
Is there a spot I can modify the style of that section?
I want to make an event with a nav link to another page.
Is there a way to place an event on each slice?
Hey Zach,
Unfortunately, the style on hover would only work for the entire component rather than individual slices. Here is a link to the User Manual Page for cursor style changes while hovering in Perspective, should you want to explore that. (How to Change Style on Hover - Ignition User Manual 8.1 - Ignition Documentation)
Yes, this can be achieved by using the selection.data property to determine which page to navigate to. Then using one of our system.perspective functions such as navigate() or openPopup() to navigate to the desired page.
Can I involve the selection data into determining the hover style at all?
When I hover a slice, the slice gets large and shows the tooltip.
Can you tell me more about that so I might be able to activate it in a script?
If I put the pie chart into a coordinate container, then I can stack a flex container on top that will let me use event triggers like onPointerOver and onPointerOut.
Then is there a way to simultaneously do these things?
I think I can do these things except I don't know how to activate the slice highlight from a script.
I also don't know if I should use onEnter and onLeave, not sure of the performance of multiple mouse events as onPointerOut or onPointerOver.
I have those questions.
I also need to know how to size the legend.
My pie chart is cutting off the names when I try to align to the left.
My page is looking ridiculous.
I change the day, the row numbers go down or up, and the pie changes size.
I can work around it with setting the pie chart legend to bottom position, using a left join in the query to make sure my number of rows is constant, and setting the size of the container.
It doesn't solve the above questions though.
My newest concern is that I have set a binding for showing values or percentages and I am using a parameter to switch between events and time in the data query.
Well when I show the time, it shows in seconds.
Is there a good way to convert the format of the legend values to hh:mm:ss while still having the pie look normal?
I don't know how to keep it as a number for the pie and then format the legend also.
{category} : {value.percent.formatNumber('#.0')}%
I think I can bind toolTipFormat to convert the tool tip, but I don't see anything for the legend values.
Is there a way to do to math in the tooltip?
I thought I might be able to combine:
Expression tag to convert minutes to hh:mm:ss - #2 by KathyApplebaum]
and
Tooltips – amCharts 4 Documentation]
Some kind of amcharts math if it is possible.
Well I kind of did an expression binding, but it isn't right as # and % are not allowed.
if( {...../flexFilter/flexDate_1/Dropdown.props.value}=1
,'{category} : {value.percent.formatNumber(\'00.0\')} percent\nEvents:{value}',
'{category} : {value.percent.formatNumber(\'00.0\')} percent\nSeconds:{value}\nDowntime:{value.formatDuration(\'hh:mm:ss\')}')
Still shows 100% correctly even when .formatNumber(\'00.0\')
SELECT keyName, val
FROM (select 35 as performance, 65 as ad) t
UNPIVOT( val for keyName in (performance, ad)) u
Also, copied this from @JordanCClark and wanted to post here so I could find it again easier to test my pie chart.
Select coalesce(S.AutoLogged,0) as AutoLogged
, coalesce(S.Entered,0) as Entered
, convert(varchar,dateadd(hh,-7, GETDATE()), 20) as Since from(
SELECT 0 AS test
) AS dummy
LEFT JOIN (
select....
from...
left join anotherTable on....
where...
group....
) as S
ON 1= 1
I needed this trick/technique too.
You can't do this using a Style because the style is attached to the component. Yuo can use theming or the stylesheet.css resource to specify a rule for hovering over slices of the Pie Chart:
div[data-component="ia.chart.pie"] g[role="menuitem"]:hover {
cursor: help;
}
Just to follow up whether you get it working?
I have the same requirements:
I have close to 0 experience of CSS in Perspective, but if there's a solution using CSS, I will start learning it.
I use a binding on my tooltip Format.
Took me a minute to figure it out.
if( {.../flexDate/downtimeDropdown.props.value}=1,
'{category} : {value.percent.formatNumber(\'00.0\')} percent\nEvents:{value}',
'{category} : {value.percent.formatNumber(\'00.0\')} percent\nSeconds:{value}\nDowntime:{value.formatDuration(\'hh:mm:ss\')}')
I think I am not able to do some things with it yet.
So I put tables next to the pie chart column.
The tooltip format works.
I made changes to the labels/tooltipFormat to "[bold]{category}[/] : [font-size: 15px red]{value.value}[/]"
It works on the tooltips now:
Now I need to display the label (item2 below) with actual value as well.
But the label does not have format function, is it something that can be done with style or css?
I haven't been on here for a few days.
I did something where the details are all listed below in a column.
Seems like mine must be customized in the properties of the chart.
Because my font is white and larger than the example you listed.