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.
$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
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.
You can use New-UDDynamic to create charts that refresh on an interval.
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
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.
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.
$Data =Get-Process|Sort-Object-Property CPU -Descending |Select-Object-First 10New-UDChartJS-Type 'bar'-Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ legend =@{ display =$false } }
Title
You can include a title with the title option.
$Data =Get-Process|Sort-Object-Property CPU -Descending |Select-Object-First 10New-UDChartJS-Type 'bar'-Data $Data -DataProperty CPU -LabelProperty ProcessName -Options @{ plugins =@{ legend =@{ title =@{ display =$true text ='Bar Chart' } } }}
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.
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.
$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
$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
Color Based on Data
You can use the following format to use colors based on your data.