New-UDChartJS

Creates a new ChartJS chart.

Synopsis

Creates a new ChartJS chart.

Syntax

New-UDChartJS [-Id <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] [-LoadData <Endpoint>] [-LabelProperty <String>] [<CommonParameters>]

    New-UDChartJS [-Id <String>] [-DatasetLabel <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] -Data <Object> [-DataProperty <String>] [-LabelProperty <String>] [-BackgroundColor <DashboardColor[]>] [-BorderColor <DashboardColor[]>] [-HoverBackgroundColor <DashboardColor[]>] [-HoverBorderColor <DashboardColor[]>] [-BorderWidth <Int32>] [<CommonParameters>]

    New-UDChartJS [-Id <String>] [-Type <String>] [-Options <Hashtable>] [-OnClick <Endpoint>] -Data <Object> -Dataset <Hashtable[]> [-LabelProperty <String>] [<CommonParameters>]

Description

Creates a new ChartJS chart.

Parameters

-Id

The ID of the component. It defaults to a random GUID.

Required?                    false
Position?                    named
Default value                [Guid]::NewGuid()
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-DatasetLabel

The label for the dataset. This is only used when the chart has a single dataset.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Type

The type of chart to create. Valid values are bar, line, area, doughnut, radar, pie, and bubble.

Required?                    false
Position?                    named
Default value                bar
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Options

A hashtable of options to pass to the chart.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnClick

A script block to execute when the chart is clicked. $EventData will include the element that was clicked.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Data The data to use for the chart. This is an array of objects or hashtables.Required? truePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-LoadDataRequired? falsePosition? namedDefault value { $Data = @( @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ Server = "Server4"; AvailableRam = 64; ; UsedRAM = 26 } @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) New-UDChartJSDataset -Data ($Data | Select-Object -Expand AvailableRam) -DataProperty AvailableRam -Label 'Available RAM' -BackgroundColor '#126f8c' -BorderWidth 1 }Accept pipeline input? falseAliasesAccept wildcard characters? false-Dataset <Hashtable[]>Used when defining multiple datasets. This is an array of hashtables. Use the New-UDChartJSDataset cmdlet to create the dataset.Required? truePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-DataPropertyThe property to use for the data. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-LabelPropertyThe property to use for the label. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-BackgroundColor <DashboardColor[]>The background color of the chart. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault value @("#808978FF")Accept pipeline input? falseAliasesAccept wildcard characters? false-BorderColor <DashboardColor[]>The border color of the chart. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault value @("#FF8978FF")Accept pipeline input? falseAliasesAccept wildcard characters? false-HoverBackgroundColor <DashboardColor[]>The hover background color of the chart. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault value @("#807B210C")Accept pipeline input? falseAliasesAccept wildcard characters? false-HoverBorderColor <DashboardColor[]>The hover border color of the chart. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault value @("#FF7B210C")Accept pipeline input? falseAliasesAccept wildcard characters? false-BorderWidthThe border width of the chart. This is only used when the chart has a single dataset.Required? falsePosition? namedDefault value 1Accept pipeline input? falseAliasesAccept wildcard characters? false <CommonParameters> This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters (https://go.microsoft.com/fwlink/?LinkID=113216).Outputs-------------------------- EXAMPLE 1 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -Id 'chart1'PS > }Bar Chart|A bar chart with a data and label property.-------------------------- EXAMPLE 2 --------------------------PS >$Data = @(PS > @{ x = 1; y = 10; r = 15 }PS > @{ x = 12; y = 25; r = 35 }PS > @{ x = 8; y = 10; r = 95 }PS > @{ x = 6; y = 95; r = 25 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw"; } } -Content {PS > New-UDChartJS -Type 'bubble' -Data $Data -Id 'chart2'PS > }Bubble Chart|A bubble chart with a data property.-------------------------- EXAMPLE 3 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'line' -BorderWidth 1 -Id 'chart3'PS > }Line Chart|A line chart with a data and label property.-------------------------- EXAMPLE 4 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'doughnut' -Id 'chart4'PS > }Doughnut Chart|A doughnut chart with a data and label property.-------------------------- EXAMPLE 5 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'pie' -Id 'chart5'PS > }Pie Chart|A pie chart with a data and label property.-------------------------- EXAMPLE 6 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "10vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'radar' -Id 'chart6'PS > }Radar Chart|A radar chart with a data and label property.-------------------------- EXAMPLE 7 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '10vh'; width = "10vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -BackgroundColor '#808978FF' -HoverBackgroundColor '#808978FF' -HoverBorderColor '#808978FF' -BorderColor '#808978FF' -Id 'chart7'PS > }Color|A bar chart with a data and label property and some configured colors.-------------------------- EXAMPLE 8 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -OnClick {PS > Show-UDToast -Message "Clicked: $Body"PS > } -Id 'chart8'PS > }Click|A bar chart with a data and label property and a click event.-------------------------- EXAMPLE 9 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > $Dataset1 = New-UDChartJSDataset -DataProperty AvailableRam -Label 'Available RAM' -BackgroundColor '#126f8c' -BorderWidth 1PS > $Dataset2 = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used RAM' -BackgroundColor '#8da322' -BorderWidth 1PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '10vh'; width = "10vw"; } } -Content {PS > New-UDChartJS -Data $Data -Dataset @($Dataset1, $Dataset2) -LabelProperty Server -Type 'line' -Id 'chart9'PS > }Multiple Data Sets|A line chart with multiple data sets.-------------------------- EXAMPLE 10 --------------------------PS >New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw"; } } -Content {PS > New-UDDynamic -Content {PS > $Data = 1..10 | % {PS > [PSCustomObject]@{ Name = $_; value = get-random }PS > }PS > New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'chart10' -LabelProperty Name -BackgroundColor BluePS > } -AutoRefresh -AutoRefreshInterval 1PS > }Auto Refresh|A bar chart that auto refreshes every second.-------------------------- EXAMPLE 11 --------------------------PS >$Data = @(PS > @{ Server = "Server1"; AvailableRam = 128; UsedRAM = 10 }PS > @{ Server = "Server2"; AvailableRam = 64; UsedRAM = 63 }PS > @{ Server = "Server3"; AvailableRam = 48; UsedRAM = 40 }PS > @{ Server = "Server4"; AvailableRam = 64;; UsedRAM = 26 }PS > @{ Server = "Server5"; AvailableRam = 128; UsedRAM = 120 }PS > )PS > New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '20vh'; width = "20vw"; } } -Content {PS > New-UDChartJS -Data $Data -DataProperty UsedRAM -LabelProperty Server -Type 'bar' -OnClick {PS > Show-UDToast -Message "Clicked: $Body"PS > } -Options @{PS > plugins = @{PS > legend = @{PS > title = @{PS > display = $truePS > text = 'Bar Chart'PS > }PS > }PS > }PS > } -Id 'chart11'PS > }Options|You can use ChartJS options defined as a hashtable to further configure the chart. For more information, see https://www.chartjs.org/docs/3.9.1/.