How to create consistent pie chart labels and colors

Universal Dashboard Universal Dashboard Help
1

Hello,

Can I define consistency with chart label names and color?

UDChart
UDChart1424×367 55.2 KB

Below are 3 identical charts, only the source data has been changed to vary the status. Here are my observations:

  • Chart labels appear in the same order as the csv source file
  • Colors are applied in the order specified in New-UDChart
  • Label names only appear if they exist in the source data
  1. Can I map colors to a specific status? Success = green, Warning = yellow, Running = blue, Failed = red
  2. Can I display all 4 names in order, even if there is no data to display?

Here is my code:

$theme = Get-UDTheme -Name ‘Azure’
$xmlData = Import-Csv -Path C:\Data\BackupExport.csv
$xmlData2 = Import-Csv -Path C:\Data\BackupExport2.csv
$xmlData3 = Import-Csv -Path C:\Data\BackupExport3.csv

$MyDashboard = New-UDDashboard -Title “Backup Job Dashboard” -Theme $theme -Content {
New-UDRow -Columns {
New-UDColumn -Size 3 {
New-UDChart -Title “Status 1” -Type Pie -FontColor “#ffdc00” -Endpoint {
$xmlData.Status |
Group-Object |
Select-Object Name, Count |
Out-UdChartData -DataProperty “count” -BackgroundColor @("red", "blue", "green", "yellow")
-BorderColor @(“black”, “black”, “black”, “black”) -LabelProperty "Name"
-HoverBackgroundColor “yellow”
} -Options @{
legend = @{
display = $true;
position = ‘right’
labels = @{
fontColor = ‘#FFFFFF’;
fontSize = 16
}
}
}
}

    New-UDColumn -Size 3 {
        New-UDChart -Title "Status 2" -Type Pie -FontColor "#ffdc00" -Endpoint {
            $xmlData2.Status |
            Group-Object |
            Select-Object Name, Count |
            Out-UdChartData -DataProperty "count" `
                -BackgroundColor @("red", "blue", "green", "yellow") `
                -BorderColor @("black", "black", "black", "black") `
                -LabelProperty "Name" `
                -HoverBackgroundColor "yellow"
        } -Options @{
            legend = @{
                display  = $true;
                position = 'right'
                labels   = @{
                    fontColor = '#FFFFFF'; 
                    fontSize  = 16
                }
            }
        }
    }

    New-UDColumn -Size 3 {
        New-UDChart -Title "Status 3" -Type Pie -FontColor "#ffdc00" -Endpoint {
            $xmlData3.Status |
            Group-Object |
            Select-Object Name, Count |
            Out-UdChartData -DataProperty "count" `
                -BackgroundColor @("red", "blue", "green", "yellow") `
                -BorderColor @("black", "black", "black", "black") `
                -LabelProperty "Name" `
                -HoverBackgroundColor "yellow"
        } -Options @{
            legend = @{
                display  = $true;
                position = 'right'
                labels   = @{
                    fontColor = '#FFFFFF'; 
                    fontSize  = 16
                }
            }
        }
    }
}

}

Start-UDDashboard -Port 1001 -Dashboard $MyDashboard

Regards,

Mark Tellier

2

I ended up solving the problem, here is how I did it, along with the new code as example.

Backup status in my case will consist of a maximum of 4 results, Success, Warning, Running or Failed. Define a place holder array for each of these results, in order.

$ph = (0, 0, 0, 0)

Assign a variable to the result stats, including the total Count and Name

$results = $csvData.Status | Group-Object | Select-Object Count, Name

Now, iterate through each of the results, updating the place holder

foreach ($item in $results) {
if ($item.Name -like “Success”) {
$ph[0] = $item.Count
}
elseif ($item.Name -like “Warning”) {
$ph[1] = $item.Count
}
elseif ($item.Name -like “Running”) {
$ph[2] = $item.Count
}
elseif ($item.Name -like “Failed”) {
$ph[3] = $item.Count
}
}

Create an ordered hash table with the results, order will not change

$hash = [ordered]@{Success = $ph[0]; Warning = $ph[1]; Running = $ph[2]; Failed = $ph[3] }

Here are the results, notice consistency with chart labels

pie-final
pie-final1418×366 61.3 KB

Here is the final code to demonstrate the 3 different pie charts. Not sure why the code is formatting the way it is, maybe someone has a suggestion.

$theme = Get-UDTheme -Name ‘Azure’
$csvData = Import-Csv -Path C:\code\ps\SCRIPTS\UNIVERSALDASHBOARD\Data\BackupExport.csv
$csvData2 = Import-Csv -Path C:\code\ps\SCRIPTS\UNIVERSALDASHBOARD\Data\BackupExport2.csv
$csvData3 = Import-Csv -Path C:\code\ps\SCRIPTS\UNIVERSALDASHBOARD\Data\BackupExport3.csv

$MyDashboard = New-UDDashboard -Title “Backup Job Dashboard” -Theme $theme -Content {
New-UDRow -Columns {
New-UDColumn -Size 3 {
New-UDChart -Title “Status 1” -Type Pie -FontColor “#ffdc00” -Endpoint {
$ph = (0, 0, 0, 0)
$results = $csvData.Status | Group-Object | Select-Object Count, Name
# Iterate through results, updating values if they exist
foreach ($item in $results) {
if ($item.Name -like “Success”) {
$ph[0] = $item.Count
}
elseif ($item.Name -like “Warning”) {
$ph[1] = $item.Count
}
elseif ($item.Name -like “Running”) {
$ph[2] = $item.Count
}
elseif ($item.Name -like “Failed”) {
$ph[3] = $item.Count
}
}

            $hash = [ordered]@{Success = $ph[0]; Warning = $ph[1]; Running = $ph[2]; Failed = $ph[3] }

            $hash | Out-UdChartData -DataProperty "Values" `
                -BackgroundColor @("green", "yellow", "blue", "red") `
                -BorderColor @("black", "black", "black", "black") `
                -LabelProperty "Keys" `
                -HoverBackgroundColor "orange"
        } -Options @{
            legend = @{
                display  = $true;
                position = 'right'
                labels   = @{
                    fontColor = '#FFFFFF'; 
                    fontSize  = 16
                }
            }
        }
    }

    New-UDColumn -Size 3 {
        New-UDChart -Title "Status 2" -Type Pie -FontColor "#ffdc00" -Endpoint {
            $ph = (0, 0, 0, 0)
            $results = $csvData2.Status | Group-Object | Select-Object Count, Name
            # Iterate through results, updating values if they exist
            foreach ($item in $results) {
                if ($item.Name -like "Success") {
                    $ph[0] = $item.Count
                }
                elseif ($item.Name -like "Warning") {
                    $ph[1] = $item.Count
                }
                elseif ($item.Name -like "Running") {
                    $ph[2] = $item.Count
                }
                elseif ($item.Name -like "Failed") {
                    $ph[3] = $item.Count
                }
            }

            $hash = [ordered]@{Success = $ph[0]; Warning = $ph[1]; Running = $ph[2]; Failed = $ph[3] }

            $hash | Out-UdChartData -DataProperty "Values" `
                -BackgroundColor @("green", "yellow", "blue", "red") `
                -BorderColor @("black", "black", "black", "black") `
                -LabelProperty "Keys" `
                -HoverBackgroundColor "orange"
        } -Options @{
            legend = @{
                display  = $true;
                position = 'right'
                labels   = @{
                    fontColor = '#FFFFFF'; 
                    fontSize  = 16
                }
            }
        }
    }

    New-UDColumn -Size 3 {
        New-UDChart -Title "Status 3" -Type Pie -FontColor "#ffdc00" -Endpoint {
            $ph = (0, 0, 0, 0)
            $results = $csvData3.Status | Group-Object | Select-Object Count, Name
            # Iterate through results, updating values if they exist
            foreach ($item in $results) {
                if ($item.Name -like "Success") {
                    $ph[0] = $item.Count
                }
                elseif ($item.Name -like "Warning") {
                    $ph[1] = $item.Count
                }
                elseif ($item.Name -like "Running") {
                    $ph[2] = $item.Count
                }
                elseif ($item.Name -like "Failed") {
                    $ph[3] = $item.Count
                }
            }

            $hash = [ordered]@{Success = $ph[0]; Warning = $ph[1]; Running = $ph[2]; Failed = $ph[3] }

            $hash | Out-UdChartData -DataProperty "Values" `
                -BackgroundColor @("green", "yellow", "blue", "red") `
                -BorderColor @("black", "black", "black", "black") `
                -LabelProperty "Keys" `
                -HoverBackgroundColor "orange"
        } -Options @{
            legend = @{
                display  = $true;
                position = 'right'
                labels   = @{
                    fontColor = '#FFFFFF'; 
                    fontSize  = 16
                }
            }
        }
    }
}

}

Start-UDDashboard -Port 1001 -Dashboard $MyDashboard

2 Likes