centerText for Doughnut Chart

Hi there,

I am currently trying to build up a new dashboard for one of our customers.
Therefore I was trying to implement a new doughnut chart that should show the overall amount of managed clients in the middle of the doughnut and the different OS shown in the doughnut.
In chartJS I found that centertext is possible but unfortunately I couldn’t manage to add this code correctly to show this in the UD built dashboard. Is there anybody able to show me how this can be managed.
Currently in the examlpe code there are 2 Charts.
The first one is the doughnut chart that show basically everything as wanted. In the second one I tried to add the option. Unfirtunately in the second the labels also vanished :wink:
The Module Version used is
2.5.2 Universaldashboard
PSVersion 5.1.14393.2515
Examplecode is shown below:
indent preformatted text by 4 spaces

Skript for Dashboard creation

Header Logo

$managedclients = New-Object PSobject -Property @{
OS = (“Windows10”,“Windows8”,“Windows7”,“MAC”)
Count = (“500”,“600”,“20”,“10”)
}

$Dashboard = New-UDDashboard -Title “Dashboard” -NavBarColor “#555555” -NavBarFontColor “#111111” -Content {
New-UDLayout -Columns 3 -Content {
New-UDCard -Content {
New-UDChart -Title “Clients” -Type Doughnut -RefreshInterval 5 -Endpoint {
$managedclients | ForEach-Object {
[PSCustomObject]@{ OS = $managedclients.OS; Count = $managedclients.Count }
} | Out-UDChartData -BackgroundColor @("#DE1B2A","#F5DE09","#377bbc","#791F82") -HoverBackgroundColor “#b1c94e” -DataProperty “Count” -LabelProperty “OS” #-Options @{Centertext = @{display = $true;Text = “Test”}}
}
}
New-UDCard -Content {
New-UDChart -Title “Clients” -Type Doughnut -RefreshInterval 5 -Endpoint {
$managedclients | ForEach-Object {
[PSCustomObject]@{ OS = $managedclients.OS
Count = $managedclients.Count
}
} | Out-UDChartData -Dataset @(
New-UdChartDataset -DataProperty “Count” -Label “OS” -BackgroundColor @("#DE1B2A","#F5DE09","#377bbc","#791F82") -HoverBackgroundColor “#b1c94e
)
}-Options @{
legend = @{
display = $true
}
centerText = @{
display = $true
text = “CentertextTest”
}
}
}
}
}

Get-UDDashboard |Stop-UDDashboard
Start-UDDashboard -Dashboard $Dashboard -Port 10000

Hi again, is there nobody who could help me out with this?

I believe the centerText Option is based around the beforeDraw plugin. It’s not native.


It may be possible to add java plugins using UD JavaScript Elements, but that’s outside my skillset.

Hi,
Thanks for your quick reply! Meanwhile I found the UD Javascript CMD let on my own. As well as the documentation. Unfortunately my skillset isn‘t that good neither.

So is anyone in the community able to show how it would be possible to add the wanted feature with additional JS code, and wants to share his knowledge😉?
I think this might be possibly highly appreciated also from other users of doughnut charts!

Thank you all in advance.

Hi again,
is there nobody who is able to clarify how to add the Java code to add Text to a doghnut charts center with a UD Java Script element, and furthermore how to use it afterwards ;-)?

I tried already with the how tos Online and in the documentation which were a little bit too limited.

Many thanks for all your replies

Hey @Numelle is this what you are looking to achieve?


If so it looks like you need to add an additional javascript file for this to actually work…

Hey @psDevUK thank very much! Thats exactly what I am looking for.
I already tried to change existing js files or to add a new one that could manage this.
Unfortunately I am well in Powershell coding but my knowledge for the UDDashboard Plugin and how to add additionall scripts so that they can be used within my PS script to manipulate existing charts is not good as I currrently do not completely understand how the charts are build by the Plugin.
Therefore would it be possible to provide a kind of how to?
e.g. starting from:

  1. What codesnippets need to added to a js file to fulfill my need?
  2. Where does this snippet need to be saved within the Plugin folder?
  3. How can this script be made available correctly to the Plugin?
  4. How does this snippet to be used then within the Plugin to manipulate my existing doughnut charts.

If you could help me out with this this would be highly appreciated!

Many thanks for your help!
kind regards Numelle

Hi @Numelle I think I am going to have to ask @adam how to add additional .JS files to your dashboard, as sadly I do not have a scooby-doo at the moment, my HTML skills are not good. It’s like I might be able to fix the grid not exporting in IE if I figure adding additional JS capabilities…Opens up so many possibilities

Hi @psDevUK , if you could ask @adam this would be gr8.
Possibly we could also post this into a feature request? :smiling_imp:
Looking forward to hearing from you :wink:
cya
Numelle

Can you open a GitHub issue for this? I think it’s going to require doing something inside UD.

Hi @Adam thank you very much for this hint!
I’ve opened an enhancement request.

Thanks for having a look at this!
Licenses have been already ordered :stuck_out_tongue_winking_eye:

1 Like