Multiple UDChartJS per dashboard

PowerShell Universal
1

Hi,
I’m trialing the software and have found the docs to be OKAY. Hard to find certain things but with enough effort it can be found.

I’ve played around with these cmdlets and I cannot for the life of me figure out how to put 2 charts on the same row on a dashboard. I’ve spent a few hours searching and toying.

New-UDLayout
New-UDSplitPane
New-UDRow

I am NOT interested in multiple dashboard pages or tabs. I want multiple charts on a single screen.

I have 1 donut and 1 bar chart. I’ve tried the following but all of them produce a result that is 2 charts, both full page width and each on their own row. I tried new row, new column, new column with nested new row, new layout with 2 columns, new split pane with direction horizontal. Here is my code with new row implemented:

New-UDDashboard -Title 'VMDK Dashboard' -Content {

    $csv = '\\server\share$\Reports\VMDK_Report\VMDK_Report.csv'

    $objVMDK = Import-Csv -Path $csv

    New-UDRow -Columns {

            # Provisioned Types

            $pTypes = $objVMDK |

                Group-Object -Property 'VmdkProvisioned' -NoElement |

                Sort-Object -Property 'Name'

            $ptProps = @{

                Type = 'doughnut'

                Data = $pTypes

                DataProperty = 'Count'

                LabelProperty = 'Name'

                HoverBorderColor = 'black'

                HoverBackgroundColor = 'Green'

                BackgroundColor = @(

                    '#d98919'

                    '#741010'

                    '#4b82d3'

                )

                Options = @{

                    title = @{

                        display = $true

                        text = 'Provisioned Types'

                    }

                }

            }

            New-UDChartJS @ptProps

       

            # VMDKs per vCenter - Top Servers by VMDK Count

            $pVC = $objVMDK |

                Group-Object -Property 'VIServer' |

                Sort-Object -Property 'Count' -Descending

            #

            $pvcProps = @{

                Type = 'bar'

                Data = $pVC

                DataProperty = 'Count'

                LabelProperty = 'Name'

                HoverBorderColor = 'black'

                HoverBackgroundColor = 'Green'

                Options = @{

                    title = @{

                        display = $true

                        text = 'VMDKs per vCenter - Top Servers by VMDK Count'

                    }

                }

            }

            New-UDChartJS @pvcProps

        # }

    }

}

Please help.

Product: PowerShell Universal
Version: 2.9.2
2

You will have to set the size of the columns. Here’s an example.

New-UDDashboard -Title 'Test' -Content {
    New-UDRow -Columns {
        New-UDColumn -LargeSize 6 {
             $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 
 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName
        }
          New-UDColumn -LargeSize 6 {
             $Data = Get-Process | Sort-Object -Property CPU -Descending | Select-Object -First 10 
 New-UDChartJS -Type 'bar' -Data $Data -DataProperty CPU -LabelProperty ProcessName
        }
    }
}
3

No joy. I pasted your sample code into a new dashboard page and this is what it looks like:

[EDIT1]: In widescreen mode it is on 1 row as it should be, but in portrait mode it’s 2 rows.
[EDIT2]: The screen seems to require a certain # of pixels in order for this to work. On my small widescreen it’s still stacked on top. Only when I put it on my large 24" screen and maximize it does it look like I want it to.
[EDIT3]: OK so I found that a lower size int does it (see 2nd pic). The help docs do not have parameter descriptions or examples in a lot of cases. I’m not sure why the random values I selected make the layout look better. Other than the cmdlet help and the github repo with md/txt files, is there another resource? I would suggest helping contribute to get the help docs filled out but I would only be guessing.

snafu
snafu1041×1114 10.8 KB

learnin
learnin1035×403 15.3 KB

4

Thanks for the feedback. I’ve updated the documentation here: Grid - PowerShell Universal

5

Cool beans, thanks Adam