SQLpage icon indicating copy to clipboard operation
SQLpage copied to clipboard

Charts are getting cutoff at the right end

Open accforgithubtest opened this issue 1 year ago • 5 comments

The bars on the right most corner are cutoff (see next image for the correct number of bars) - Dec 23 data is cut off at the right side of the chart - image

After manually adding an empty row for an extra month, to create extra space on the right side - image

If it helps - Viewing this on a standard 27" 1140p monitor, maximized window as well.

accforgithubtest avatar Jan 04 '24 05:01 accforgithubtest

Thanks for reporting this ! Can you please provide a small sql file that reproduces this ?

lovasoa avatar Jan 04 '24 09:01 lovasoa

Ok, I can reproduce it with the following SQLite snippet:

select 
    'chart'    as component,
    'bar'      as type,
    TRUE       as toolbar,
    TRUE       as time;

with recursive integers(i) as (
    select 0 as i
    union all
    select i + 1
    from integers
    where i + 1 < 100
)
select 
    'S' || (i%10) as series,
    format('%d-01-01', 2010 + (i/10))     as x,
    abs(random() % 10)   as value
from integers;

image

(the problem appears on the left)

lovasoa avatar Jan 04 '24 09:01 lovasoa

I reported the issue upstream, since the bug seems to be in apexcharts, not in SQLPage itself: https://github.com/apexcharts/apexcharts.js/issues/4178

lovasoa avatar Jan 04 '24 14:01 lovasoa

I have similar problems with long series. I want series as stacked values for each classes. It's ok for 1st et 2nd and after it's horrible. Some classes are a lot of times on x axys. For the 3rd, instead of the "34" we have the "41" ! image

There is the code :

-- Différents Dispositifs en place par Classe
select 
    'chart'               as component,
    'Différents dispositifs par classe' as title,
    'bar'             as type,
        500 as height,
    TRUE as labels,
    TRUE as stacked,
    'Classes' as xtitle,
    'Nombre de dispositifs' as ytitle;
select 
    Nom_dispositif as series,
    classe as x,
    coalesce(Nombre,0) as value
    FROM stats01 WHERE etab=$id ORDER BY classe;

This is the beginning of the debug with "34" as 3rd position...

Debug output

{"component":"debug","title":"Différents dispositifs par classe","type":"bar","height":500,"labels":true,"stacked":true,"xtitle":"Classes","ytitle":"Nombre de dispositifs"}

{"series":"SEGPA","x":"31","value":5}

{"series":"UEE","x":"31","value":2}

{"series":"ULIS","x":"31","value":2}

{"series":"Mat. Pédagogique","x":"33","value":2}

{"series":"PAI","x":"33","value":1}

{"series":"PIAL","x":"33","value":2}

{"series":"PPRE","x":"33","value":2}

{"series":"SEGPA","x":"33","value":1}

{"series":"ULIS","x":"33","value":2}

{"series":"FLS","x":"34","value":3}

{"series":"Mat. Pédagogique","x":"34","value":1}

DSMejantel avatar Jan 08 '24 20:01 DSMejantel

ApexCharts just merged a fix for this issue. It will be included in SQLPage's next version :confetti_ball:

(currently just waiting for apex charts to release a new version containing the fix)

lovasoa avatar Feb 12 '24 09:02 lovasoa