centerText for Doughnut Chart

Universal Dashboard Universal Dashboard Help
1

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

2

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

3

I believe the centerText Option is based around the beforeDraw plugin. It’s not native.
http://www.authorcode.com/how-to-add-text-inside-the-doughnut-chart-using-chart-js/
It may be possible to add java plugins using UD JavaScript Elements, but that’s outside my skillset.

4

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.

5

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

6

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…

7

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

8

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

9

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

10

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

11

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
12

I know it’s been a long time, but I built this just now

Capture
Capture.PNG481×520 17.5 KB

Is this something you want?

3 Likes
13

Hi Adam, sorry for my late reply. Thanks for building this. Basically this is exactly what we are looking for. We would have the possibility to add a custom text to the innercircle or at least the overall count for a chart for example:

example
example.jpg725×732 55.9 KB

This is the overall count and within the legend the number of each color is mentioned.
Therefore from my perspective additionally the width of the doughnut itself should be editable as well.
That would be aussum! :wink:
Thanks for having a look at this!

1 Like
14

Hey @Numelle no worries…I had it in the back of my head that someone else was after a similar control, then I found this post again so thought I should update it. I found this package here:-


And there is no mention of text other than the progress text, which you can show or hide, or the percentage symbol you can show or hide.

15

Hi @psDevUK, would be fine as well, as the heading of the graph says already what it is about.

16

Hey @Numelle I actually put this in a “complaints” dashboard I designed for my company. I built a back-end SQL database, and this is from my login, showing I have raised 8 complaints, which I stored in a SESSION variable, then used another SESSION variable to calculate the total complaints…then get my complaints divide by total complaints multiplied by 100 gives you a percentage:-

contribution
contribution.PNG408×505 32.5 KB

So to try an encourage people to use the system more they can now see their contribution. Please note it is mainly female staff using the system, hence the “hot pink” text and progress :grin:

2 Likes
17

@psDevUK Is this released now? Looks exactly like something I’m after!

1 Like
18

Hey @hammena yes this is, it is located here:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDCircle

19

@psDevUK Ok. So I need to install another PSUD module? It will not work with the regular one (not Community)?

20

Hey @hammena I use UD Community to build these additional add-ons to UD on my personal laptop. This works in the comminuty version of UD and the enterprise version of UD. It is not included in UD by default as I built this as a custom component. To try and contribute to the comminuty

So yes you will need to download the module, then install this as well as your regular UD module then you get a new function to use:-

New-UDHeading -Size 4 -Color 'white' -Text "Contribution"
if($Session:Total -ne $null)
{[int]$Progress = $Session:MyNum / $Session:Total * 100}
if($Progress -gt 0)
{
    New-UDCircle -Progress $Progress -Responsive $false -Size 180 -LineWidth 22 -ProgressColor "hotpink"
}

See this is using the New-UDCircle function I wrote to display this. I hope this explains it better for you?