SQLpage
SQLpage copied to clipboard
Charts are getting cutoff at the right end
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 -
After manually adding an empty row for an extra month, to create extra space on the right side -
If it helps - Viewing this on a standard 27" 1140p monitor, maximized window as well.
Thanks for reporting this ! Can you please provide a small sql file that reproduces this ?
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;
(the problem appears on the left)
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
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" !
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}
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)