Creating New-UDChartJS

Product: PowerShell Universal
Version: 2.6.2

My data is getting pulled from a CSV file with the following headers:

Time | Property1 | Property2 | Property3

  • How can I add multiple lines on the same line chart?
  • How can I set the y axis to a specified max value?
  • How can I customize the size of the chart?

$Data = Import-CSV C:\Temp\file.csv

$Time = New-UDChartJSDataset -DataProperty Time -Label 'Time'
$Property1 = New-UDChartJSDataset -DataProperty Property1 -Label 'Property1'
$Property2 = New-UDChartJSDataset -DataProperty Property2 -Label 'Property2'
$Property3 = New-UDChartJSDataset -DataProperty Property3 -Label 'Property3'

New-UDChartJS -Type 'Line' -Data $Data -DataProperty Property1 -LabelProperty Time

This chart has 3 lines, is 1/3 the size of the page and sets the max tick to 40 when the data goes above that.

New-UDDashboard -Title 'Test' -Content {
    New-UDRow -Column {
    New-UDColumn -LargeSize 4 -Content {
    $Data = @(
        [PSCustomObject]@{
            'Time' = 1
            'Property1' = 2
            'Property2' = 4
            'Property3' = 6
        }
        [PSCustomObject]@{
            'Time' = 2
            'Property1' = 1
            'Property2' = 9
            'Property3' = 3
        }
        [PSCustomObject]@{
            'Time' = 3
            'Property1' = 20
            'Property2' = 40
            'Property3' = 60
        }
    )

    $Property1 = New-UDChartJSDataset -DataProperty Property1 -Label 'Property1'
    $Property2 = New-UDChartJSDataset -DataProperty Property2 -Label 'Property2'
    $Property3 = New-UDChartJSDataset -DataProperty Property3 -Label 'Property3'

    New-UDChartJS -Type 'Line' -Data $Data -DataSet @($Property1, $Property2, $Property3) -LabelProperty Time  -Options @{  
scales = @{
            yAxes = @(@{
                ticks = @{
                    max = 40
                }
                
            })
        }
        
    }
    }
    }
}

Anything you can pass to the options value for ChartJS, you can pass to the options hashtable in PSU.

https://www.chartjs.org/docs/2.9.4/getting-started/

That’s exactly what I was looking for @adam, thanks for the clean, thorough example.

To wrap this one up, how can I change the colors for each property?

You should be able to use the background and border color properties of the dataset cmdlets.

    $Property1 = New-UDChartJSDataset -DataProperty Property1 -Label 'Property1' -BackgroundColor 'red'
    $Property2 = New-UDChartJSDataset -DataProperty Property2 -Label 'Property2' -BackgroundColor 'blue' -BorderColor 'orange'
    $Property3 = New-UDChartJSDataset -DataProperty Property3 -Label 'Property3'

1 Like

Excellent, thanks @adam!