Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
SumeshP opened this issue Jun 28, 2023 · 3 comments

Comments

@SumeshP
Copy link

SumeshP commented Jun 28, 2023

    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
Copy link
Author

SumeshP commented Jun 28, 2023

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
Copy link
Member

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
Copy link
Author

SumeshP commented Jul 5, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants