> 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/it/app/components/data-visualization/charts.md). # Charts Crei grafici nelle app di PowerShell Universal con le integrazioni ChartJS e Nivo, includendo grafici a barre, a linee, a torta, heatmap, grafici di rete e monitor con aggiornamento automatico. Universal Apps offre diverse soluzioni di creazione di grafici integrate per aiutarla a visualizzare i dati recuperati da PowerShell. ## ChartJS Universal Apps si integra con [ChartJS](https://www.chartjs.org/). ### Creazione di un grafico Per creare un grafico, utilizzi `New-UDChartJS` e `New-UDChartJSData`. Il grafico seguente mostra i dieci processi con il maggiore utilizzo della CPU. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` ### Tipi #### Barre ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Barre in pila ```powershell $GraphPrep = @( @{ RAM = "Server1"; AvailableRam = 128; UsedRAM = 10 } @{ RAM = "Server2"; AvailableRam = 64; UsedRAM = 63 } @{ RAM = "Server3"; AvailableRam = 48; UsedRAM = 40 } @{ RAM = "Server4"; AvailableRam = 64;; UsedRAM = 26 } @{ RAM = "Server5"; AvailableRam = 128; UsedRAM = 120 } ) $AvailableRamDataSet = New-UDChartJSDataset -DataProperty AvailableRAM -Label 'Available' -BackgroundColor blue $UsedRamDataset = New-UDChartJSDataset -DataProperty UsedRAM -Label 'Used' -BackgroundColor red $Options = @{ Type = 'bar' Data = $GraphPrep Dataset = @($AvailableRamDataSet, $UsedRamDataset) LabelProperty = "RAM" Options = @{ scales = @{ xAxes = @{ stacked = $true } yAxes = @{ stacked = $true } } } } New-UDChartJS @Options ``` #### Barre orizzontali ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ indexAxis = "y" plugins = @{ legend = @{ position = "right" } } }p ``` #### Bolle Un grafico a bolle è composto da coordinate x e y e da un valore r per il raggio dei cerchi. ```powershell $Data = @( @{ x = 1; y = 10; r = 15 } @{ x = 12; y = 25; r = 35 } @{ x = 8; y = 10; r = 95 } @{ x = 6; y = 95; r = 25 } ) New-UDChartJS -Type 'bubble' -Data $Data ``` #### Linee ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'line' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Ciambella ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'doughnut' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Torta ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'pie' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` #### Radar ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'radar' -Data $Data -DataProperty CPU -LabelProperty ProcessName ``` ### Colori I colori possono essere definiti utilizzando i vari parametri di colore di `New-UDChartJS`. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 $Options = @{ Type = 'bar' Data = $Data BackgroundColor = 'Red' BorderColor = '#c61d4a' HoverBackgroundColor = 'Blue' HoverBorderColor = '#451dc6' DataProperty = 'CPU' LabelProperty = 'ProcessName' } New-UDChartJS @Options ``` ### Set di dati Per impostazione predefinita, non è necessario definire manualmente i set di dati. Un singolo set di dati viene creato automaticamente quando si utilizzano i parametri `-DataProperty` e `-LabelProperty`. Se desidera definire più set di dati per un singolo grafico, può utilizzare la proprietà `-Dataset` insieme a `New-UDChartJSDataset`. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 $CPUDataset = New-UDChartJSDataset -DataProperty CPU -Label CPU -BackgroundColor '#126f8c' $MemoryDataset = New-UDChartJSDataset -DataProperty HandleCount -Label 'Handle Count' -BackgroundColor '#8da322' $Options = @{ Type = 'bar' Data = $Data Dataset = @($CPUDataset, $MemoryDataset) LabelProperty = "ProcessName" } New-UDChartJS @Options ``` ### Eventi di clic È possibile eseguire un'azione quando un utente fa clic sul grafico. Questo esempio mostra un toast con il contenuto della variabile `$Body`. La variabile `$Body` contiene una stringa JSON con informazioni sugli elementi su cui è stato fatto clic. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 $Options = @{ Type = 'bar' Data = $Data DataProperty = 'CPU' LabelProperty = "ProcessName" OnClick = { Show-UDToast -Message $Body } } New-UDChartJS @Options ``` ### Grafici con aggiornamento automatico Può utilizzare `New-UDDynamic` per creare grafici che si aggiornano a intervalli. ```powershell New-UDDynamic -Content { $Data = 1..10 | % { [PSCustomObject]@{ Name = $_; value = get-random } } New-UDChartJS -Type 'bar' -Data $Data -DataProperty Value -Id 'test' -LabelProperty Name -BackgroundColor Blue } -AutoRefresh -AutoRefreshInterval 1 ``` ### Monitor I monitor sono un tipo speciale di grafico che tiene traccia dei dati nel tempo. I monitor sono utili per visualizzare dati come le statistiche sulle prestazioni dei server che cambiano frequentemente. Restituisce un singolo valore da un monitor e questo viene rappresentato graficamente in modo automatico nel tempo. ``` New-UDChartJSMonitor -LoadData { Get-Random -Max 100 | Out-UDChartJSMonitorData } -Labels "Random" -ChartBackgroundColor "#297741" -RefreshInterval 1 ``` ### Opzioni Il cmdlet `New-UDChartJS` supporta l'accettazione di opzioni ChartJS avanzate. Può utilizzare il parametro `-Options` per passare una hashtable. Questo esempio nasconde la legenda. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ legend = @{ display = $false } } ``` #### Titolo Può includere un titolo con l'opzione del titolo. ```powershell $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ plugins = @{ legend = @{ title = @{ display = $true text = 'Bar Chart' } } } } ``` ## Grafici Nivo Universal Dashboard si integra con [Nivo Charts](https://nivo.rocks/components). Di seguito troverà esempi e documentazione sull'utilizzo di questi grafici. ### Creazione di un grafico Tutti i grafici Nivo possono essere creati con `New-UDNivoChart`. Specificherà un parametro switch per i diversi tipi di grafici. Ogni tipo di grafico accetterà un formato di dati ben definito tramite il parametro `-Data`. ```powershell $Data = 1..10 | ForEach-Object { $item = Get-Random -Max 1000 [PSCustomObject]@{ Name = "Test$item" Value = $item } } New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000 ``` ### Pattern Nivo offre la possibilità di specificare pattern da visualizzare sopra i set di dati. Può configurare questi pattern con `New-UDNivoPattern` e `New-UDNivoFill` . ```powershell $Data = @( @{ country = 'USA' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Germany' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Japan' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } ) $Pattern = New-UDNivoPattern -Dots -Id 'dots' -Background "inherit" -Color "#38bcb2" -Size 4 -Padding 1 -Stagger $Fill = New-UDNivoFill -ElementId "fries" -PatternId 'dots' New-UDNivoChart -Definitions $Pattern -Fill $Fill -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country' ``` ### Larghezze responsive I grafici Nivo offrono larghezze responsive, in modo da ridimensionarsi automaticamente quando vengono inseriti in una pagina o quando il browser viene ridimensionato. È necessaria un'altezza quando si utilizzano larghezze responsive. ### Grafici con aggiornamento automatico Come molti componenti di Universal Dashboard v3, i grafici Nivo non definiscono autonomamente le proprietà di aggiornamento automatico. Può invece sfruttare `New-UDDynamic` per aggiornare il grafico a intervalli. ```powershell New-UDDynamic -Content { $Data = 1..10 | ForEach-Object { $item = Get-Random -Max 1000 [PSCustomObject]@{ Name = "Test$item" Value = $item } } New-UDNivoChart -Id 'autoRefreshingNivoBar' -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000 } -AutoRefresh ``` ### OnClick I grafici Nivo supportano i gestori di eventi OnClick. Le verranno fornite informazioni in formato JSON sul set di dati su cui è stato fatto clic. ```powershell $Data = @( @{ country = 'USA' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Germany' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } @{ country = 'Japan' burgers = (Get-Random -Minimum 10 -Maximum 100) fries = (Get-Random -Minimum 10 -Maximum 100) sandwich = (Get-Random -Minimum 10 -Maximum 100) } ) New-UDNivoChart -Bar -Data $Data -Height 400 -Width 900 -Keys @('burgers', 'fries', 'sandwich') -IndexBy 'country' -OnClick { Show-UDToast -Message $EventData -Position topLeft } ``` ### Tipi di grafici #### Barre ```powershell New-Example -Title 'Bar' -Description '' -Example { $Data = 1..10 | ForEach-Object { $item = Get-Random -Max 1000 [PSCustomObject]@{ Name = "Test$item" Value = $item } } New-UDNivoChart -Bar -Keys "Value" -IndexBy 'name' -Data $Data -Height 500 -Width 1000 } ``` #### Bolle ```powershell $TreeData = @{ Name = "root" children = @( @{ Name = "first" children = @( @{ Name = "first-first" Count = 7 } @{ Name = "first-second" Count = 8 } ) }, @{ Name = "second" Count = 21 } ) } New-UDNivoChart -Bubble -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800 ``` #### Calendario ```powershell $Data = @() for($i = 365; $i -gt 0; $i--) { $Data += @{ day = (Get-Date).AddDays($i * -1).ToString("yyyy-MM-dd") value = Get-Random } } $From = (Get-Date).AddDays(-365) $To = Get-Date New-UDNivoChart -Calendar -Data $Data -From $From -To $To -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60 ``` #### Heatmap ```powershell $Data = @( @{ state = "idaho" cats = 72307 dogs = 23429 moose = 23423 bears = 784 } @{ state = "wisconsin" cats = 2343342 dogs = 3453623 moose = 1 bears = 23423 } @{ state = "montana" cats = 9234 dogs = 3973457 moose = 23472 bears = 347303 } @{ state = "colorado" cats = 345973789 dogs = 0237234 moose = 2302 bears = 2349772 } ) New-UDNivoChart -Heatmap -Data $Data -IndexBy 'state' -keys @('cats', 'dogs', 'moose', 'bears') -Height 500 -Width 1000 -MarginTop 50 -MarginRight 130 -MarginBottom 50 -MarginLeft 60 ``` #### Linee ```powershell [array]$Data = [PSCustomObject]@{ id = "DataSet" data = (1..20 | ForEach-Object { $item = Get-Random -Max 500 [PSCustomObject]@{ x = "Test$item" y = $item } }) } New-UDNivoChart -Line -Data $Data -Height 500 -Width 1000 -LineWidth 1 ``` #### Rete Supponendo di avere i dati JSON seguenti, può utilizzare il codice dell'app riportato di seguito. ```json { "nodes": [ { "id": "Node 1", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 2", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 3", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 4", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 5", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 6", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 7", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 8", "height": 1, "size": 24, "color": "rgb(97, 205, 187)" }, { "id": "Node 0", "height": 2, "size": 32, "color": "rgb(244, 117, 96)" }, { "id": "Node 1.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 1.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 2.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 3.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 4.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 5.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 5.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 5.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 6.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 7.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.0", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.1", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.2", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.3", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.4", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.5", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.6", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.7", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" }, { "id": "Node 8.8", "height": 0, "size": 12, "color": "rgb(232, 193, 160)" } ], "links": [ { "source": "Node 0", "target": "Node 1", "distance": 80 }, { "source": "Node 1", "target": "Node 1", "distance": 80 }, { "source": "Node 1", "target": "Node 1.0", "distance": 50 }, { "source": "Node 1", "target": "Node 1.1", "distance": 50 }, { "source": "Node 1", "target": "Node 1.2", "distance": 50 }, { "source": "Node 1", "target": "Node 1.3", "distance": 50 }, { "source": "Node 1", "target": "Node 1.4", "distance": 50 }, { "source": "Node 1", "target": "Node 1.5", "distance": 50 }, { "source": "Node 1", "target": "Node 1.6", "distance": 50 }, { "source": "Node 0", "target": "Node 2", "distance": 80 }, { "source": "Node 2", "target": "Node 2.0", "distance": 50 }, { "source": "Node 2", "target": "Node 2.1", "distance": 50 }, { "source": "Node 2", "target": "Node 2.2", "distance": 50 }, { "source": "Node 2", "target": "Node 2.3", "distance": 50 }, { "source": "Node 2", "target": "Node 2.4", "distance": 50 }, { "source": "Node 2", "target": "Node 2.5", "distance": 50 }, { "source": "Node 2", "target": "Node 2.6", "distance": 50 }, { "source": "Node 2", "target": "Node 2.7", "distance": 50 }, { "source": "Node 2", "target": "Node 2.8", "distance": 50 }, { "source": "Node 0", "target": "Node 3", "distance": 80 }, { "source": "Node 3", "target": "Node 3.0", "distance": 50 }, { "source": "Node 3", "target": "Node 3.1", "distance": 50 }, { "source": "Node 3", "target": "Node 3.2", "distance": 50 }, { "source": "Node 3", "target": "Node 3.3", "distance": 50 }, { "source": "Node 3", "target": "Node 3.4", "distance": 50 }, { "source": "Node 3", "target": "Node 3.5", "distance": 50 }, { "source": "Node 3", "target": "Node 3.6", "distance": 50 }, { "source": "Node 3", "target": "Node 3.7", "distance": 50 }, { "source": "Node 3", "target": "Node 3.8", "distance": 50 }, { "source": "Node 0", "target": "Node 4", "distance": 80 }, { "source": "Node 4", "target": "Node 8", "distance": 80 }, { "source": "Node 4", "target": "Node 4.0", "distance": 50 }, { "source": "Node 4", "target": "Node 4.1", "distance": 50 }, { "source": "Node 4", "target": "Node 4.2", "distance": 50 }, { "source": "Node 4", "target": "Node 4.3", "distance": 50 }, { "source": "Node 4", "target": "Node 4.4", "distance": 50 }, { "source": "Node 4", "target": "Node 4.5", "distance": 50 }, { "source": "Node 4", "target": "Node 4.6", "distance": 50 }, { "source": "Node 4", "target": "Node 4.7", "distance": 50 }, { "source": "Node 4", "target": "Node 4.8", "distance": 50 }, { "source": "Node 0", "target": "Node 5", "distance": 80 }, { "source": "Node 5", "target": "Node 5.0", "distance": 50 }, { "source": "Node 5", "target": "Node 5.1", "distance": 50 }, { "source": "Node 5", "target": "Node 5.2", "distance": 50 }, { "source": "Node 0", "target": "Node 6", "distance": 80 }, { "source": "Node 6", "target": "Node 6.0", "distance": 50 }, { "source": "Node 6", "target": "Node 6.1", "distance": 50 }, { "source": "Node 6", "target": "Node 6.2", "distance": 50 }, { "source": "Node 6", "target": "Node 6.3", "distance": 50 }, { "source": "Node 6", "target": "Node 6.4", "distance": 50 }, { "source": "Node 0", "target": "Node 7", "distance": 80 }, { "source": "Node 7", "target": "Node 7.0", "distance": 50 }, { "source": "Node 7", "target": "Node 7.1", "distance": 50 }, { "source": "Node 7", "target": "Node 7.2", "distance": 50 }, { "source": "Node 7", "target": "Node 7.3", "distance": 50 }, { "source": "Node 7", "target": "Node 7.4", "distance": 50 }, { "source": "Node 7", "target": "Node 7.5", "distance": 50 }, { "source": "Node 0", "target": "Node 8", "distance": 80 }, { "source": "Node 8", "target": "Node 8.0", "distance": 50 }, { "source": "Node 8", "target": "Node 8.1", "distance": 50 }, { "source": "Node 8", "target": "Node 8.2", "distance": 50 }, { "source": "Node 8", "target": "Node 8.3", "distance": 50 }, { "source": "Node 8", "target": "Node 8.4", "distance": 50 }, { "source": "Node 8", "target": "Node 8.5", "distance": 50 }, { "source": "Node 8", "target": "Node 8.6", "distance": 50 }, { "source": "Node 8", "target": "Node 8.7", "distance": 50 }, { "source": "Node 8", "target": "Node 8.8", "distance": 50 } ] } ``` ```powershell New-UDNivoChart -Network -Data (Get-Content "$Repository\network.json" | ConvertFrom-Json) ``` #### Stream ```powershell $Data = 1..10 | ForEach-Object { @{ "Adam" = Get-Random "Alon" = Get-Random "Lee" = Get-Random "Frank" = Get-Random "Bill" = Get-Random } } New-UDNivoChart -Stream -Data $Data -Height 500 -Width 1000 -Keys @("adam", "alon", "lee", "frank", "bill") ``` #### Treemap ```powershell $TreeData = @{ Name = "root" children = @( @{ Name = "first" children = @( @{ Name = "first-first" Count = 7 } @{ Name = "first-second" Count = 8 } ) }, @{ Name = "second" Count = 21 } ) } New-UDNivoChart -Treemap -Data $TreeData -Value "count" -Identity "name" -Height 500 -Width 800 ``` ### Colore basato sui dati Può utilizzare il formato seguente per utilizzare colori basati sui suoi dati. ```powershell $Data = $([PSCustomObject]@{ value = 30 color = '#BF5290' } [PSCustomObject]@{ value = 100 color = '#52BE80' } ) New-UDNivoChart -Pie -Data ($Data | Where-Object { $_.Value -ne 0 }) -InnerRadius 0.7 -CornerRadius 5 -PadAngle 1 -Colors @{datum = 'data.color' }` -MarginLeft "150" -MarginTop 1 -Height 370 -Responsive ``` --- # 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/it/app/components/data-visualization/charts.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.