PSWriteHTML icon indicating copy to clipboard operation
PSWriteHTML copied to clipboard

Label display issue when two line chart is used along with bar chart (MixedCharts)

Open SumeshP opened this issue 2 years ago • 3 comments

    New-HTMLTab -Name 'Trend - Service Requests' -IconRegular chart-bar {
        New-HTMLChart -Title 'Service Requests New vs Closed' -TitleAlignment center {
        New-ChartAxisX -Name $ColumnData.Week
        New-ChartLine -Name 'Tickets Open' -Value $ColumnData.Open -Color Blue      -Curve smooth -Width 2 -Dash 12 -Cap round 
        New-ChartLine -Name 'Tickets closed' -Value $ColumnData.Closed -Color Green -Curve smooth -Width 2 -Dash 12 -Cap round
        New-ChartBar -Name 'New Tickets' -Value $ColumnData.New -Color DarkSlateGray 
        New-ChartAxisY -Show -TitleText 'Tickets' -TitleColor AliceBlue
        New-ChartEvent -DataTableID 'IDTable' -ColumnID 3
        }
    }

When I use a second line chart as above, the data labels for the bar chart is displayed on the left side of the chart making them unusable.

If i choose alternate formatting options to correct the label to show in the middle of the bar, another problem occurs, as in Example-MixedCharts.ps1 The bar is outlined with a dashed like creating a not so beautiful looking chart.

If i take away the second linechart, then the issue no longer occurs.

SumeshP avatar Jun 28 '23 09:06 SumeshP

apparently, this setup doesnt have the issue. I commented out the -Dash option

        New-ChartLine -Name 'Tickets Open' -Value $ColumnData.Open -Color Blue -Width 2 -Curve smooth #-Dash 12 #-Cap round 
        New-ChartLine -Name 'Tickets closed' -Value $ColumnData.Closed -Color Green #-Curve smooth -Width 2 -Dash 12 -Cap round
        New-ChartBar -Name 'New Tickets' -Value $ColumnData.New -Color DarkSlateGray 

SumeshP avatar Jun 28 '23 13:06 SumeshP

Please provide a full example that I can run and understand what you are showing. I can't understand exactly what you need, but the idea is if you are putting something under tabs or you want to mix it up with other charts/labels and so on you would need to use New-HTMLSection, New-HTMLPanel in one of the variants. But without proper information from you I won't be able to tell what you need.

PrzemyslawKlys avatar Jul 01 '23 07:07 PrzemyslawKlys

Hello, Here is the full example.

Import-Module .\PSWriteHTML.psd1 -Force

$DataTable = @(
    [PSCustomObject] @{ Name = 'Service Desk 1'; Incidents = 1; Resolved = 0; Year = 2001 }
    [PSCustomObject] @{ Name = 'Service Desk 2'; Incidents = 20; Resolved = 15; Year = 2002 }
    [PSCustomObject] @{ Name = 'Service Desk 3'; Incidents = 40; Resolved = 19; Year = 2003 }
    [PSCustomObject] @{ Name = 'Service Desk 4'; Incidents = 15; Resolved = 25; Year = 2004 }
    [PSCustomObject] @{ Name = 'Service Desk 5'; Incidents = 10; Resolved = 19; Year = 2005 }
    [PSCustomObject] @{ Name = 'Service Desk 6'; Incidents = 45; Resolved = 45; Year = 2006 }
    [PSCustomObject] @{ Name = 'Service Desk 7'; Incidents = 18; Resolved = 15; Year = 2007 }
    [PSCustomObject] @{ Name = 'Service Desk 8'; Incidents = 60; Resolved = 50; Year = 2008 }
    [PSCustomObject] @{ Name = 'Service Desk 9'; Incidents = 18; Resolved = 5; Year = 2009 }
    [PSCustomObject] @{ Name = 'Service Desk 0'; Incidents = 9; Resolved = 2; Year = 2010 }
)

New-HTML -TitleText 'Charts - Line' -Online -FilePath $PSScriptRoot\Example-ChartsMultiSeries.html {
    New-HTMLTable -DataTable $DataTable -DataTableID 'IDTable'
    New-HTMLChart -Title 'Incidents Reported vs Solved' -TitleAlignment center {
        New-ChartAxisX -Name $DataTable.Year
        New-ChartAxisY -TitleText 'Series A' -Show
        New-ChartAxisY -TitleText 'Series B' -Show
        New-ChartLine -Name 'Incidents per month' -Value $DataTable.Incidents -Color Yellow -Width 2 -Curve smooth -Dash 12 -Cap round 
        New-ChartLine -Name 'Incidents per month' -Value $DataTable.Incidents -Color blue -Width 2 -Curve smooth -Dash 12 -Cap round 
        New-ChartBar -Name 'Incidents per month resolved' -Value $DataTable.Resolved -Color Green
        New-ChartEvent -DataTableID 'IDTable' -ColumnID 3
    }
} -Show

As you see below, all the green labels are on the left. Doesnt happen with 2 chart items.

image

SumeshP avatar Jul 05 '23 13:07 SumeshP