EvotecIT / PSWriteHTML

PSWriteHTML is PowerShell Module to generate beautiful HTML reports, pages, emails without any knowledge of HTML, CSS or JavaScript. To get started basics PowerShell knowledge is required.
MIT License
848 stars 107 forks source link

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

Open SumeshP opened 1 year ago

SumeshP commented 1 year ago
    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 commented 1 year ago

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 
PrzemyslawKlys commented 1 year ago

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.

SumeshP commented 1 year ago

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