> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/powershell-befehle/new-udchartjs.md). # New-UDChartJS ### Synopsis Erstellt ein neues ChartJS-Diagramm. ### Syntax ```powershell New-UDChartJS [-Id ] [-Type ] [-Options ] [-OnClick ] [-LoadData ] [-LabelProperty ] [] New-UDChartJS [-Id ] [-DatasetLabel ] [-Type ] [-Options ] [-OnClick ] -Data [-DataProperty ] [-LabelProperty ] [-BackgroundColor ] [-BorderColor ] [-HoverBackgroundColor ] [-HoverBorderColor ] [-BorderWidth ] [] New-UDChartJS [-Id ] [-Type ] [-Options ] [-OnClick ] -Data -Dataset [-LabelProperty ] [] ``` ### Beschreibung Erstellt ein neues ChartJS-Diagramm. ### Parameter #### -Id Die ID der Komponente. Standardmäßig ist dies eine zufällige GUID. ``` Required? false Position? named Default value [Guid]::NewGuid() Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DatasetLabel Die Bezeichnung für den Datensatz. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Type Der Typ des zu erstellenden Diagramms. Gültige Werte sind bar, line, area, doughnut, radar, pie und bubble. ``` Required? false Position? named Default value bar Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Options Eine Hashtable mit Optionen, die an das Diagramm übergeben werden. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -OnClick Ein Skriptblock, der ausgeführt wird, wenn auf das Diagramm geklickt wird. $EventData enthält das Element, auf das geklickt wurde. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Data Die für das Diagramm zu verwendenden Daten. Dies ist ein Array von Objekten oder 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 \Wird verwendet, wenn mehrere Datensätze definiert werden. Dies ist ein Array von Hashtables. Verwenden Sie das Cmdlet New-UDChartJSDataset, um den Datensatz zu erstellen.Required? truePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-DataPropertyDie für die Daten zu verwendende Eigenschaft. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-LabelPropertyDie für die Bezeichnung zu verwendende Eigenschaft. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-BackgroundColor \Die Hintergrundfarbe des Diagramms. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault value @("#808978FF")Accept pipeline input? falseAliasesAccept wildcard characters? false-BorderColor \Die Rahmenfarbe des Diagramms. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault value @("#FF8978FF")Accept pipeline input? falseAliasesAccept wildcard characters? false-HoverBackgroundColor \Die Hintergrundfarbe des Diagramms beim Überfahren mit der Maus. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault value @("#807B210C")Accept pipeline input? falseAliasesAccept wildcard characters? false-HoverBorderColor \Die Rahmenfarbe des Diagramms beim Überfahren mit der Maus. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault value @("#FF7B210C")Accept pipeline input? falseAliasesAccept wildcard characters? false-BorderWidthDie Rahmenbreite des Diagramms. Dies wird nur verwendet, wenn das Diagramm einen einzelnen Datensatz hat.Required? falsePosition? namedDefault value 1Accept pipeline input? falseAliasesAccept wildcard characters? false \ This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about\_CommonParameters ( BEISPIEL 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 . --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.devolutions.net/powershell-universal/de/powershell-befehle/new-udchartjs.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.