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
Map
Map component for Universal Dashboard.
The UDMap component is a robust control that provides a huge set of features. You can select base layers, configure togglable layers, set markers, define vectors and interact with other Universal Dashboard components.
Basic Map
This basic map defines a simple base layer using the wmflabs.org tile server. You can use your own custom tile server by specifying a URL. The map is position over Hailey, Idaho.
Layer Control
You can enable the layer control by using the New-UDMapLayerControl cmdlet. This map defines several layers with components that you can toggle on and off. You can only have one base layer selected as a time. Map overlay layers can toggle on and off.
Markers
Markers are used to highlight particular locations.
Custom Icons
You can specify custom icons for markers using the -Icon parameter.
Popups
You can create a popup when clicking the marker by using the -Popup parameter and the New-UDMapPopup cmdlet.
Heatmaps
Heatmaps can be defined by creating a heatmap layer. The intesity and location of the heatmap clusters can be defined by using the New-UDMapHeatmapLayer cmdlet.
Marker Clusters
Marker clusters group together markers that are close to each other. As you zoom in or out, the clusters will either combine or explode.
Interactive Maps
Maps provide a series of interactive capabilities for add components to and manipulating the map.