xresch / CoreFramework

The CoreFramework(CFW) is a web application boilerplate projects using Jetty, Bootstrap, H2 and various other cool stuff.
MIT License
3 stars 0 forks source link

Chart.js: Certain data combination not showing Bar charts #17

Open xresch opened 1 year ago

xresch commented 1 year ago

Certain Data does not render bars when using bar charts.

Following CFWQL query will create 2 waves and merges them together. When both datasets are shown in the same chart(multichart=false) the bars are invisible but hover is showing up. When the datasets are shown in separate charts(multichart=true) the bars are shown.

| meta name="A"
| source empty records=100
| set # do some math-magic to create a sinus-wave
    NAME="WAVE"
    INDEX=count()+1
    TIME= now(null, 0, 0, 0, INDEX)
    SINUS=sin(INDEX*0.3)
    VALUE=round((SINUS*100)*INDEX)
;
| meta name="B"
| source empty records=100
| set # do some math-magic to create a sinus-wave
    NAME="WAVE2"
    INDEX=count()+1
    TIME= now(null, 0, 0, 0, INDEX)
    SINUS=sin(INDEX*0.4)
    VALUE=round((SINUS*100)*INDEX)
;
| resultconcat "A", "B"
| chart # display as a chart
    by=[NAME]
    type=bar
    stacked=true
    showaxes=true
    showlegend=false
    x=TIME
    y=VALUE
    multichart=false #set to true to see the bars in separate charts
xresch commented 1 year ago

Issue is caused by time data of the to datasets not exactly matching each other. Solve the issue by making sure the datasets have both the same time data.

Following query uses a base time to use the exact same times for both datasets.

| meta name="A"
| globals basetime = now()
| source empty records=300
| set # do some math-magic to create a sinus-wave
    NAME="WAVE"
    INDEX=count()+1
    TIME= timeoffset(globals(basetime), 0, 0, 0, INDEX)
    SINUS=sin(INDEX*0.3)
    VALUE=round((SINUS*100)*INDEX)
;
| meta name="B"
| source empty records=300
| set # do some math-magic to create a sinus-wave
    NAME="WAVE2"
    INDEX=count()+1
    TIME= timeoffset(globals(basetime), 0, 0, 0, INDEX)
    SINUS=sin(INDEX*0.35)
    VALUE=round((SINUS*100)*INDEX)
;
| resultconcat "A", "B"
| chart # display as a chart
    by=[NAME]
    type=bar
    stacked=true
    showaxes=true
    showlegend=false
    x=TIME
    y=VALUE
    multichart=false