I will start building charts heavy dashboard. (Something similar to Grafana ). Idea is to use JS based charting library - Chart.js or Highcharts.js.
Data will be coming into the system in real time. I already did a pilot. Once data comes in I store it in TimescaleDB and at the same time I pushed it to Phoenix pub/sub. Then I use it in Liveview where I subscribe to pubsub in mount function.
1.) Using so many js hooks on a page - would that be an issue? Would you suggest other approach?
2.) One of the critical things which I havenât yet figured it out is - imagine I have like 10 timeseries charts on the screen. How could I create a vertical line (where my mouse cursor is) ⊠and based on that time on chart all the charts on the screen should have a vertical line at that time. I assume this is a JS area, but connecting all this over so many components (JS Hooks, JS, Phoenix sockets, Liveview)⊠not sure how to approach this.
So what I would like to ask is if anybody write your own opinion on this. Any suggestions? Is there any other library that you would suggest instead of two mentioned above and why?
not too sure but Iâve definitely hit the limit of updating large charts too quickly, which largely depends on your charting lib.
should be a matter of sending an event from your hook thatâs got the mouse over it to let the other hooks know what time is hovered. Could be done with js event handlers but if you need the backend or non-js phoenix components to know about it you can push events from hooks back to the backend with pushEvent. Thatâs going to be slower though.
I am using Chart.js currently. Thanks for pointing out uPlot. On their website there is a comparison chart/table and Chart.js isnât that bad. It is right behind uPlot. But based on the fact that there is way more documentation and other resource, migration at this point doesnât seem reasonable.
How are these updates becoming problematic, I would imagine that it should be possible to create something close to 24fps server side rendered charts.
Iâve gone back and forth a lot with where to place state when building DBVisor, and always end up with keeping it on the server and controlling the frequency of updates.
@tomazbracic looking forward to see this coming to life, when I initially read this I hoped that it was SSR charts and not a JS library. Any thoughts on doing it clients side?
We are using client-side charting library Chart.js. This decision comes with a bit of a legacy. We had another project where the front end was at the time developed with React.js. We didnât want to use a dedicated charting library for elixir projects and then another one for React-based. Each takes a bit of a âhow toâ learning and adopting. So we wanted to minimize this.
My idea was to get more feedback on this approach from others if hands-on experience is even better.
Theyâre pretty feature-rich charts with custom graphics, mark points, mark lines and mark areas. Echarts was taking a bit of time to merge a new config. I had to cap it at 8x playback speed and debounce updates. I donât think youâd have the same problem if youâre just adding new data.
). Idea is to use JS based charting library - Chart.js or Highcharts.js.
