Charts
Charting components for Universal Dashboard.
Universal Dashboard provides several built-in charting solutions to help visualize your data retrieved from PowerShell.
To use charts within your dashboard, you will need to add the UniversalDashboard.Charts component.

ChartJS

Universal Dashboard integrates with ChartJS.

Creating a Chart

To create a chart, use New-UDChartJS and New-UDChartJSData. The below chart shows the top ten CPU using processes.
1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Types

Bar

1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Stacked Bar

1
$GraphPrep = @(
2
@{ RAM = "Server1"; AvailableRam = 128; UsedRAM = 10 }
3
@{ RAM = "Server2"; AvailableRam = 64; UsedRAM = 63 }
4
@{ RAM = "Server3"; AvailableRam = 48; UsedRAM = 40 }
5
@{ RAM = "Server4"; AvailableRam = 64;; UsedRAM = 26 }
6
@{ RAM = "Server5"; AvailableRam = 128; UsedRAM = 120 }
7
)
8
9
$AvailableRamDataSet = New-UDChartJSDataset -DataProperty AvailableRAM -Label 'Available' -BackgroundColor blue
10
$UsedRamDataset = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used' -BackgroundColor red
11
$Options = @{
12
Type = 'bar'
13
Data = $GraphPrep
14
Dataset = @($AvailableRamDataSet, $UsedRamDataset)
15
LabelProperty = "RAM"
16
Options = @{
17
scales = @{
18
xAxes = @(
19
@{
20
stacked = $true
21
}
22
)
23
yAxes = @(
24
@{
25
stacked = $true
26
}
27
)
28
}
29
}
30
}
31
32
New-UDChartJS @Options
Copied!

Horizontal Bar

1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'horizontalBar' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Line

1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Doughnut

1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'doughnut' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Pie

1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'pie' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Radar

1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'radar' -Data $Data -DataProperty CPU -LabelProperty ProcessName
Copied!

Colors

Colors can be defined using the various color parameters of New-UDChartJS.
1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
3
$Options = @{
4
Type = 'bar'
5
Data = $Data
6
BackgroundColor = 'Red'
7
BorderColor = '#c61d4a'
8
HoverBackgroundColor = 'Blue'
9
HoverBorderColor = '#451dc6'
10
DataProperty = 'CPU'
11
LabelProperty = 'ProcessName'
12
}
13
14
New-UDChartJS @Options
Copied!

Data Sets

By default, you do not need to define data sets manually. A single data set is created automatically when you use the -DataProperty and -LabelProperty parameters. If you want to define multiple data sets for a single chart, you can use the -Dataset property in conjunction with New-UDChartJSDataset.
1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
3
$CPUDataset = New-UDChartJSDataset -DataProperty CPU -Label CPU -BackgroundColor '#126f8c'
4
$MemoryDataset = New-UDChartJSDataset -DataProperty HandleCount -Label 'Handle Count' -BackgroundColor '#8da322'
5
6
$Options = @{
7
Type = 'bar'
8
Data = $Data
9
Dataset = @($CPUDataset, $MemoryDataset)
10
LabelProperty = "ProcessName"
11
}
12
13
New-UDChartJS @Options
Copied!

Click Events

You can take action when a user clicks the chart. This example shows a toast with the contents of the $Body variable. The $Body variable contains a JSON string with information about the elements that were clicked.
1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
3
$Options = @{
4
Type = 'bar'
5
Data = $Data
6
DataProperty = 'CPU'
7
LabelProperty = "ProcessName"
8
OnClick = {
9
Show-UDToast -Message $Body
10
}
11
}
12
13
14
New-UDChartJS @Options
Copied!

Auto refreshing charts

You can use New-UDDynamic to create charts that refresh on an interval.
1
New-UDDynamic -Content {
2
$Data = 1..10 | % {
3
[PSCustomObject]@{ Name = $_; value = get-random }
4
}
5
New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'test' -LabelProperty Name -BackgroundColor Blue
6
} -AutoRefresh -AutoRefreshInterval 1
Copied!

Monitors

Monitors are a special kind of chart that tracks data over time. Monitors are good for displaying data such as server performance stats that change frequently. You return a single value from a monitor and it is graphed automatically over time.
1
New-UDChartJSMonitor -LoadData {
2
Get-Random -Max 100 | Out-UDChartJSMonitorData
3
} -Labels "Random" -ChartBackgroundColor "#297741" -RefreshInterval 1
Copied!

Options

The New-UDChartJS cmdlet supports accepting advanced ChartJS options. You can use the -Options parameter to pass in a hashtable.
This example hides the legend.
1
$Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10
2
New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{
3
legend = @{
4
display = $false
5
}
6
}
Copied!

Nivo Charts

Universal Dashboard integrates with Nivo Charts. Below you will find examples and documentation for using these charts.

Creating a Chart

All the Nivo charts can be created with New-UDNivoChart. You will specify a switch parameter for the different types of charts. Each chart type will take a well defined data format via the -Data parameter.
1
$Data = 1..10 | ForEach-Object {
2
$item = Get-Random -Max 1000
3
[PSCustomObject]@{
4
Name = "Test$item"
5
Value = $item
6
}
7
}
8
New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000
Copied!

Patterns

Nivo provides the ability to specify patterns to display over data sets. You can configure these patterns with New-UDNivoPattern and New-UDNivoFill .
1
$Data = @(
2
@{
3
country = 'USA'
4
burgers = (Get-Random -Minimum 10 -Maximum 100)
5
fries = (Get-Random -Minimum 10 -Maximum 100)
6
sandwich = (Get-Random -Minimum 10 -Maximum 100)
7
}
8
@{
9
country = 'Germany'
10
burgers = (Get-Random -Minimum 10 -Maximum 100)
11
fries = (Get-Random -Minimum 10 -Maximum 100)
12
sandwich = (Get-Random -Minimum 10 -Maximum 100)
13
}
14
@{
15
country = 'Japan'
16
burgers = (Get-Random -Minimum 10 -Maximum 100)
17
fries = (Get-Random -Minimum 10 -Maximum 100)
18
sandwich = (Get-Random -Minimum 10 -Maximum 100)
19
}
20
)
21
22
$Pattern = New-UDNivoPattern -Dots -Id 'dots' -Background "inherit" -Color "#38bcb2" -Size 4 -Padding 1 -Stagger
23
$Fill = New-UDNivoFill -ElementId "fries" -PatternId 'dots'
24
25
New-UDNivoChart -Definitions $Pattern -Fill $Fill -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country'
Copied!

Responsive Widths

Nivo charts provide responsive widths so they will resize automatically when placed on a page or the browser is resized. A height is required when using responsive widths.

Auto Refreshing Charts

Like many components in Universal Dashboard v3, Nivo charts do not define auto-refresh properties themselves. Instead, you can take advantage of New-UDDynamic to refresh the chart on an interval.
1
New-UDDynamic -Content {
2
$Data = 1..10 | ForEach-Object {
3
$item = Get-Random -Max 1000
4
[PSCustomObject]@{
5
Name = "Test$item"
6
Value = $item
7
}
8
}
9
New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000
10
} -AutoRefresh
Copied!

OnClick

Nivo charts support OnClick event handlers. You will be provided with information about the data set that was clicked as JSON.
1
$Data = @(
2
@{
3
country = 'USA'
4
burgers = (Get-Random -Minimum 10 -Maximum 100)
5
fries = (Get-Random -Minimum 10 -Maximum 100)
6
sandwich = (Get-Random -Minimum 10 -Maximum 100)
7
}
8
@{
9
country = 'Germany'
10
burgers = (Get-Random -Minimum 10 -Maximum 100)
11
fries = (Get-Random -Minimum 10 -Maximum 100)
12
sandwich = (Get-Random -Minimum 10 -Maximum 100)
13
}
14
@{
15
country = 'Japan'
16
burgers = (Get-Random -Minimum 10 -Maximum 100)
17
fries = (Get-Random -Minimum 10 -Maximum 100)
18
sandwich = (Get-Random -Minimum 10 -Maximum 100)
19
}
20
)
21
New-UDNivoChart -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country' -OnClick {
22
Show-UDToast -Message $EventData -Position topLeft
23
}
Copied!

Types of Charts

Bar

1
New-Example -Title 'Bar' -Description '' -Example {
2
$Data = 1..10 | ForEach-Object {
3
$item = Get-Random -Max 1000
4
[PSCustomObject]@{
5
Name = "Test$item"
6
Value = $item
7
}
8
}
9
New-UDNivoChart -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000
10
}
Copied!

Bubble

1
$TreeData = @{
2
Name = "root"
3
children = @(
4
@{
5
Name = "first"
6
children = @(
7
@{
8
Name = "first-first"
9
Count = 7
10
}
11
@{
12
Name = "first-second"
13
Count = 8
14
}
15
)
16
},
17
@{
18
Name = "second"
19
Count = 21
20
}
21
)
22
}
23
24
New-UDNivoChart -Bubble -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800
Copied!

Calendar

1
$Data = @()
2
for($i = 365; $i -gt 0; $i--) {
3
$Data += @{
4
day = (Get-Date).AddDays($i * -1).ToString("yyyy-MM-dd")
5
value = Get-Random
6
}
7
}
8
9
$From = (Get-Date).AddDays(-365)
10
$To = Get-Date
11
12
New-UDNivoChart -Calendar -Data $Data -From $From -To $To -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60
Copied!

Heatmap

1
$Data = @(
2
@{
3
state = "idaho"
4
cats = 72307
5
dogs = 23429
6
moose = 23423
7
bears = 784
8
}
9
@{
10
state = "wisconsin"
11
cats = 2343342
12
dogs = 3453623
13
moose = 1
14
bears = 23423
15
}
16
@{
17
state = "montana"
18
cats = 9234
19
dogs = 3973457
20
moose = 23472
21
bears = 347303
22
}
23
@{
24
state = "colorado"
25
cats = 345973789
26
dogs = 0237234
27
moose = 2302
28
bears = 2349772
29
}
30
)
31
New-UDNivoChart -Heatmap -Data $Data -IndexBy 'state' -keys @('cats', 'dogs', 'moose', 'bears') -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60
Copied!

Line

1
[array]$Data = [PSCustomObject]@{
2
id = "DataSet"
3
data = (1..20 | ForEach-Object {
4
$item = Get-Random -Max 500
5
[PSCustomObject]@{
6
x = "Test$item"
7
y = $item
8
}
9
})
10
}
11
New-UDNivoChart -Line -Data $Data -Height 500 -Width 1000 -LineWidth 1
Copied!

Stream

1
$Data = 1..10 | ForEach-Object {
2
@{
3
"Adam" = Get-Random
4
"Alon" = Get-Random
5
"Lee" = Get-Random
6
"Frank" = Get-Random
7
"Bill" = Get-Random
8
}
9
}
10
11
New-UDNivoChart -Stream -Data $Data -Height 500 -Width 1000 -Keys @("adam", "alon", "lee", "frank", "bill")
Copied!

Treemap

1
$TreeData = @{
2
Name = "root"
3
children = @(
4
@{
5
Name = "first"
6
children = @(
7
@{
8
Name = "first-first"
9
Count = 7
10
}
11
@{
12
Name = "first-second"
13
Count = 8
14
}
15
)
16
},
17
@{
18
Name = "second"
19
Count = 21
20
}
21
)
22
}
23
24
New-UDNivoChart -Treemap -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800
Copied!