Creating New-UDChartJS

PowerShell Universal
1 
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
2

image
image1201×497 20.9 KB

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/

3

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?

4

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
5

Excellent, thanks @adam!

6

@adam is there a way to change the colors of each property, but keep them somewhat transparent so that it is readable. My issue is when I use the -BackgroundColor parameter, they use a solid fill color and it doesn’t display well when they overlap (sometimes you can’t see one of the datasets at all because it is covered up by a dataset that has higher value). I like the visual you have above in your image, but would like to use separate colors somehow.

I’m looking into the configuration used here: Line Chart | Chart.js
Maybe use the Utils.transparentize property when creating the dataset with “New-UDChartJSDataset”