Getting useful information from $eventdata in UDChart onclick

[PorreKaj]

I have a Chart that shows the “decline” of employees based on expiration date. I really would like to be able to have an onclick that displays more information

The input data for the chart is structured like this:
PS C:\Users\reh> $Cache:Contractersdecline

Date       Consultants
----       -----------
2019-04-02         134
2019-05-02          75
2019-06-02          62
2019-07-02          34
2019-08-02          25
2019-09-02          13
2019-10-02           7
2019-11-02           3
2019-12-02           2
2020-01-02           1
2020-02-02           1
2020-03-02           1
2020-04-02           1

And the chart is setup like this:

New-UDChart -Title "Decline by expiration date" -OnClick {Show-UDToast -Message "$Eventdata"} -Type Line -AutoRefresh -RefreshInterval 5 -Endpoint {
                            $Cache:Contractersdecline | Out-UDChartData -DataProperty "Consultants" -LabelProperty "Date" -BackgroundColor $ChartDataColour -BorderColor $ChartBorderColour -HoverBackgroundColor $ChartHighlightColour -HoverBorderColor $ChartBorderColour
                        } -Options @{
                            legend = @{  
                                display = $false  
                            };
                            scales = @{  
                                xAxes = @(
                                    @{
                                        ticks = @{
                                            display = $false
                                        }
                                    }
                                )
                            }
                        }

Seems promising, but the $eventdata provides no useful information:

Can anyone spot a fault in the code?

[Steven]

Did you ever find out if any useful information is available with OnClick?
I mean, the data returned is fine but what you would really want is a way to relate the click to an entry/row in UDChartData, for example.

[PorreKaj]

Nope, I dropped it

[Steven]

Ah, too bad

@adam : any idea on this, can we access some information once clicked on the graph? Or maybe I am missing the point of OnClick? If so, can you explain what should be done in the event?

[adam]

Hmm yeah I would imagine that should include the data point information. I can take a look later. I swear when I implemented this back in the day it did but maybe I’m wrong.

[Steven]

Hi Adam,

Would be great!

[augustin.ziegler]

Hi @adam

Is there any update on this one?

I am also would love to see this mentioned in my thread.

UDChart new features and bugfixes

@adam Hello, I have been working on an UD project for the last weeks and came across some improvements and bugs in the UDChart. I would like to start this thread to summaries my outcome and discuss a little bit about it. Basically I would like to see this component in a way Grafan is doing it (https://play.grafana.org/d/000000074/alerting?orgId=1&from=1575098670428&to=1575109470428&panelId=4&fullscreen - not noting mainly on the alert feature more on the annotations). At the beginning of my…

[adam]

This will be resolved in tonight’s nightly build. PR: https://github.com/ironmansoftware/universal-dashboard/pull/1338

You’ll be able to use the label\data properties of $EventData to retrieve info about the item that was clicked.

[augustin.ziegler]

Many thanks for this, i will try this in the next days

[augustin.ziegler]

@adam

I have tried this new feature and now the label and value (data) property is included in the $EventData

"label":"/Date(1575218691542)/","value":3

But I was expecting to have the ability to include a whole data object in the $EventData.
I will give you an example:

Here is a chart over time, the raw data is including a ID property

In order of building the chart, the ID property would never shown in the $EventData object.
This will never allow me to e.g. forward to another dynamic page /event/:ID to showe additional information to this event (shown in the chart).

Or do I miss something here?

$Data = @()
    $Data += [PSCustomObject]@{
        Timestamp = (Get-Date).AddMinutes(1)
        Value = 1
        ID = (New-Guid).Guid
    }
    $Data += [PSCustomObject]@{
        Timestamp = (Get-Date).AddMinutes(2)
        Value = 2
        ID = (New-Guid).Guid
    }
    $Data += [PSCustomObject]@{
        Timestamp = (Get-Date).AddMinutes(10)
        Value = 3
        ID = (New-Guid).Guid
    }
    $Data += [PSCustomObject]@{
        Timestamp = (Get-Date).AddMinutes(11)
        Value = 3
        ID = (New-Guid).Guid
    }

    New-UDCard -Content {
        New-UDRow -Endpoint {
            New-UDColumn -LargeSize 6 -Content {
                New-UDTable -Title 'Data' -Headers @("ID", "Timestamp", "Value") -Endpoint {
                    $Data | %{Out-UDTableData -Data $_ -Property @("ID", "Timestamp", "Value")}
                }        
            }
            New-UDColumn -LargeSize 6 -Content {
                New-UDChart -Title 'Time Data' -Type Line -Endpoint {
                    $Data | Out-UDChartData -DataProperty Value -LabelProperty Timestamp
                } -Options @{scales = @{xAxes = @(@{type = 'time'})}} -OnClick {Invoke-UDRedirect -Url "/error/$Eventdata"}
            }
        }
    }  

[adam]

You could use the label to look up your data in your set since it should be unique. The problem with including the whole object is currently, the client-side chart data does not include the entire object and would require some work to serialize the entire object down to the client. The problem with including an entire object is that you are potentially sending a ton of unnecessary data to the client without the user really understanding that it’s happening. The chart really only needs to know about the label and data properties.

In your on click, you could do something like:

$Item = $Data | Where-Object { $_.Timestamp -eq ([DateTime]$EventData.Label) } 
Invoke-UDRedirect -Url "/error/$($Item.Id)"

[augustin.ziegler]

Totally understand the situation, just thought maybe there can be an “better and more native” way.
Thanks for your help.

[OpsEng]

UD 2.8
Just had a go at the onclick in a bar chart and get the $EventData returned as a long string.
eg:
[{"datasetLabel":"","label":"19.08.4131","borderSkipped":"bottom","backgroundColor":"rgba(123, 33, 12, 0.5019608)","borderColor":"rgba(123, 33, 12, 1)","borderWidth":1,"horizontal":false,"base":336,"x":448.01000022888183,"y":20.299999999999954,"width":118.8,"value":287}]
Should this be an object with properties?

gav

[adam]

No. You are going to get the label back from the click and then you can look up your object via the label.

$Item = $Data | Where-Object { $_.Timestamp -eq ([DateTime]$EventData.Label) } 
Invoke-UDRedirect -Url "/error/$($Item.Id)"

[PorreKaj]

I’m still battling with this one.
in 2.9.0 I can finally see some useful information including “Label” and “Value”.

But is there a way to get at that information that doesn’t involve having to parse it etc.

$Eventdata.Label gives me null

[adam]

Not at the moment. I think you’ll have to do:

($EventData | ConvertFrom-Json).Value