Multi Line Chart bug

[accforgithubtest]

Introduction

When trying to get a multi-line chart going, running into issues where the chart is blank. Another peculiar issue is that the data for the second category becomes NaN. So I am not sure if this is a issue with specifically with line charts, or something else.

Following the examples from here, this seems to work for bar charts, but not for line charts.

Below is some test data to recreate the issue for line charts. If I change the chart type to bar charts, then it works fine.

To Reproduce

select 'chart' as component,
    'Multi Line' as title,
    'line' as type,
    TRUE as time,
    TRUE as toolbar;

select 'category-a' as series,  '2023-01' as x, '10' as y;
select 'category-a' as series,  '2023-02' as x, '20' as y;
select 'category-a' as series,  '2023-03' as x, '30' as y;
select 'category-a' as series,  '2023-04' as x, '40' as y;
select 'category-a' as series,  '2023-05' as x, '50' as y;
select 'category-a' as series,  '2023-06' as x, '60' as y;
select 'category-a' as series,  '2023-07' as x, '70' as y;
select 'category-a' as series,  '2023-08' as x, '80' as y;
select 'category-a' as series,  '2023-09' as x, '90' as y;
select 'category-a' as series,  '2023-10' as x, '100' as y;
select 'category-a' as series,  '2023-11' as x, '110' as y;
select 'category-a' as series,  '2023-12' as x, '120' as y;
select 'category-b' as series,  '2023-01' as x, '5' as y;
select 'category-b' as series,  '2023-02' as x, '10' as y;
select 'category-b' as series,  '2023-03' as x, '15' as y;
select 'category-b' as series,  '2023-04' as x, '20' as y;
select 'category-b' as series,  '2023-05' as x, '25' as y;
select 'category-b' as series,  '2023-06' as x, '30' as y;
select 'category-b' as series,  '2023-07' as x, '35' as y;
select 'category-b' as series,  '2023-08' as x, '40' as y;
select 'category-b' as series,  '2023-09' as x, '45' as y;
select 'category-b' as series,  '2023-10' as x, '50' as y;
select 'category-b' as series,  '2023-11' as x, '55' as y;
select 'category-b' as series,  '2023-12' as x, '60' as y;

Actual behavior

Chart is blank, and upon hover, seeing one value correctly, and the other value is displayed as NaN. If I change the chart type to bar charts, then it works.

Screenshots

Expected behavior

See 2 lines on the chart, for category-a and category-b respectively.

[lovasoa]

Did you try it in the latest version of SQLPage ? Your example works as-is for me:

[lovasoa]

I suspect the following line change is what fixed it: https://github.com/lovasoa/SQLpage/blob/main/sqlpage/apexcharts.js#L20

[accforgithubtest]

Thanks for the reply, and you are correct, the lines do show up in the latest version (v0.17.1).

There are still issues (though different from the initial issue of blank charts) as can also be in your screenshot

1. There are 2 lines for each category, there should be only one.
2. The values for category-b is showing as 0 (sometimes it was showing NaN in the older version v0.15)

[accforgithubtest]

using this data, the issue is more prominent

select 'chart' as component,
    'Multi Line' as title,
    'line' as type,
    TRUE as time,
    TRUE as toolbar;

select 'category-a' as series,  '2023-01' as x, '10'    as y;
select 'category-a' as series,  '2023-02' as x, '20'    as y;
select 'category-a' as series,  '2023-03' as x, '30'    as y;
select 'category-a' as series,  '2023-04' as x, '40'    as y;
select 'category-a' as series,  '2023-05' as x, '50'    as y;
select 'category-a' as series,  '2023-06' as x, '60'    as y;
select 'category-a' as series,  '2023-07' as x, '70'    as y;
select 'category-a' as series,  '2023-08' as x, '80'    as y;
select 'category-a' as series,  '2023-09' as x, '90'    as y;
select 'category-a' as series,  '2023-10' as x, '100'   as y;
select 'category-a' as series,  '2023-11' as x, '110'   as y;
select 'category-a' as series,  '2023-12' as x, '120'   as y;
select 'category-b' as series,  '2023-01' as x, '05'    as y;
select 'category-b' as series,  '2023-02' as x, '10'    as y;
select 'category-b' as series,  '2023-03' as x, '15'    as y;
select 'category-b' as series,  '2023-04' as x, '20'    as y;
select 'category-b' as series,  '2023-05' as x, '25'    as y;
select 'category-b' as series,  '2023-06' as x, '30'    as y;
select 'category-b' as series,  '2023-07' as x, '35'    as y;
select 'category-b' as series,  '2023-08' as x, '40'    as y;
select 'category-b' as series,  '2023-09' as x, '45'    as y;
select 'category-b' as series,  '2023-10' as x, '50'    as y;
select 'category-b' as series,  '2023-11' as x, '55'    as y;
select 'category-b' as series,  '2023-12' as x, '60'    as y;
select 'category-c' as series,  '2023-06' as x, '10'    as y;
select 'category-c' as series,  '2023-07' as x, '25'    as y;
select 'category-c' as series,  '2023-08' as x, '35'    as y;
select 'category-c' as series,  '2023-09' as x, '30'    as y;
select 'category-c' as series,  '2023-10' as x, '40'    as y;
select 'category-c' as series,  '2023-11' as x, '46'    as y;
select 'category-c' as series,  '2023-12' as x, '48'    as y;
select 'category-d' as series,  '2023-10' as x, '50'    as y;
select 'category-d' as series,  '2023-11' as x, '20'    as y;
select 'category-d' as series,  '2023-12' as x, '60'    as y;

[lovasoa]

Hello ! Yes, you are right, the rendering was incorrect. This should be fixed in the latest development version. You can try it already on docker: lovasoa/sqlpage:main.

[lovasoa]

[accforgithubtest]

confirmed that its working fine on the latest "main" version. Thanks you !