precision-sustainable-ag/tech-dashboard

Chart data overloading

Closed this issue · 1 comments

When there are too many points in the charts they take ages to render, and users think the application is broken.

Fixes:

  1. Filter the data based on the API call. After splitting the data into treatments and depths, choose every Nth data point and discard the rest: if length > 10000, every 10th data point; if length > 2000, every 4th data point.
  2. Implement some other kind of active loading indicator. The spinner shows when the API call is happening, but then there are multiple seconds between that spinner going away and the charts painting to the page. How can we alert the user that it's not broken?

Dream next steps that may not be technically possible:
A. After 1. above, have a listener for the on-drag event to intercept the zooming behavior. Store the new desired zoom coordinates (not sure how highcharts returns those, if at all), and then use the original unfiltered API data if the new region is less than the length thresholds.
B. After implementing A., pass the stored zoom to all the other charts on a page, so they always have synced X and Y axis regions.

I don't think the logic is quite right, or maybe this is an untenable problem. It did load much faster, but the results aren't as expected. See AYR:

original filtered
image image

Notice the orange line now has a big gap between July 11 and July 25? Generally the gaps in this don't seem regularized, they're clumpy and random.