> 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/es/comandos-de-powershell/new-udchartjs.md). # New-UDChartJS ### Sinopsis Crea un nuevo gráfico ChartJS. ### Sintaxis ```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 ] [] ``` ### Descripción Crea un nuevo gráfico ChartJS. ### Parámetros #### -Id El ID del componente. Por defecto es un GUID aleatorio. ``` Required? false Position? named Default value [Guid]::NewGuid() Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -DatasetLabel La etiqueta del conjunto de datos. Solo se utiliza cuando el gráfico tiene un único conjunto de datos. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Type El tipo de gráfico que se va a crear. Los valores válidos son bar, line, area, doughnut, radar, pie y bubble. ``` Required? false Position? named Default value bar Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Options Una tabla hash de opciones que se pasan al gráfico. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -OnClick Un bloque de script que se ejecuta cuando se hace clic en el gráfico. $EventData incluirá el elemento en el que se ha hecho clic. ``` Required? false Position? named Default value Accept pipeline input? false Aliases Accept wildcard characters? false ``` #### -Data Los datos que se utilizan para el gráfico. Es una matriz de objetos o tablas hash.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 \Se utiliza al definir varios conjuntos de datos. Es una matriz de tablas hash. Utilice el cmdlet New-UDChartJSDataset para crear el conjunto de datos.Required? truePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-DataPropertyLa propiedad que se utiliza para los datos. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-LabelPropertyLa propiedad que se utiliza para la etiqueta. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-BackgroundColor \El color de fondo del gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.Required? falsePosition? namedDefault value @("#808978FF")Accept pipeline input? falseAliasesAccept wildcard characters? false-BorderColor \El color del borde del gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.Required? falsePosition? namedDefault value @("#FF8978FF")Accept pipeline input? falseAliasesAccept wildcard characters? false-HoverBackgroundColor \El color de fondo al pasar el cursor sobre el gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.Required? falsePosition? namedDefault value @("#807B210C")Accept pipeline input? falseAliasesAccept wildcard characters? false-HoverBorderColor \El color del borde al pasar el cursor sobre el gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.Required? falsePosition? namedDefault value @("#FF7B210C")Accept pipeline input? falseAliasesAccept wildcard characters? false-BorderWidthEl ancho del borde del gráfico. Solo se utiliza cuando el gráfico tiene un único conjunto de datos.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 ( EJEMPLO 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/es/comandos-de-powershell/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.