search

OSU-Sustainability-Office / energy-dashboard

Oregon State University's energy dashboard.
https://dashboard.sustainability.oregonstate.edu
GNU General Public License v3.0
11 stars 0 forks source link

X-Axis Ticks Not Spaced Correctly on Charts with Missing Data #323

Open s-egge opened 2 months ago

s-egge commented 2 months ago

The x-axis tick labels are too close together, see this chart for example: https://dashboard.sustainability.oregonstate.edu/#/building/79/2

image

The spacing issue happens when the page gets wide enough to transition from angled labels to non-angled labels. Needs more testing, but it seems like it's only happening to charts that have missing days of data. This is possibly due to Chart.js calculating how much space the labels need based on how many ticks are actually showing up, not how many should be showing up, and expecting them to be more spaced out than they are.

For example, the following chart has no missing data and making it any smaller transitions it to angled labels without any overlap before-hand: image

Potential fix

I haven't tested this, but a potential fix might be adding a callback function here to see if there are missing labels and calculating the autoskippadding based on that to force it to transition to angled labels sooner: https://github.com/OSU-Sustainability-Office/energy-dashboard/blob/master/src/components/charts/linechart.js#L141 See Chart.js documentation for more info on how the autoSkipPadding and general axis options work: https://www.chartjs.org/docs/latest/axes/cartesian/

solderq35 commented 2 months ago

Another approach (for accumulated_real points, Memorial Union shown below)

Mark gaps in data as just "zero" datapoints (so technically no gaps). Doesn't seems supported on energy_change for the moment, not sure why.

image

solderq35 commented 2 months ago

For "x axis labels at regular intervals regardless of if there is data there", see chartJS documentation maybe?

https://www.chartjs.org/docs/latest/charts/line.html

s-egge commented 1 day ago

After speaking with Brandon and Lety about this, they're not too concerned about fixing it since we now look for missing data and upload it. I'm leaving it open as it could still happen with other data and also with historical data that's missing, but lowering the priority. It could be a good issue to solve while getting familiar with the front-end/chart.js.