alvises
Realtime JS chart in LiveView with hooks - what do you think?
I’ve started experimenting with JS charts in LiveView and update the chart with realtime data using LV hooks. I’m able to add new datapoints to the chart without having to redraw it everytime. It seems to work well, BUT I’m not convinced if in this way, in case of really fast updates. the chart can suffer of data loss.
I’m using Highstock
app.html.eex
<!DOCTYPE html>
<html lang="en">
<body>
...
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</body>
</html>
chart_live.ex
defmodule ChartWeb.ChartLive do
use Phoenix.LiveView
def mount(_session, socket) do
:timer.send_interval(1_000, self(), :next_price)
socket =
socket
|> assign(:prices, historical())
{:ok, socket}
end
def render(assigns) do
~L"""
<div phx-hook="Chart" data-prices="<%= @prices %>"></div>
<div phx-update="ignore">
<div id="chart" style="width:100%; height:400px;" ></div>
</div>
<pre><%= @prices %></pre>
""" |> IO.inspect()
end
def handle_info(:next_price, socket) do
now_unix = DateTime.utc_now |> DateTime.to_unix(:second)
{:noreply, assign(socket, :prices, Jason.encode!(random_data(now_unix)))}
end
# creates last 10 minutes of random data
def historical() do
now_unix = DateTime.utc_now |> DateTime.to_unix(:second)
hour_ago_unix = now_unix - 60*10
hour_ago_unix..now_unix
|> Enum.map(&random_data(&1))
|> Jason.encode!()
end
def random_data(unix_seconds) do
[unix_seconds * 1_000, Enum.random(100..200)]
end
end
app.js
Hooks.Chart = {
lastprice() { return JSON.parse(this.el.dataset.prices)},
createChart(data) {
return Highcharts.stockChart('chart', {
title: {
text: 'Random prices with Phoenix LiveView'
},
series: [{
name: 'A stock',
data: data
}]
});
},
addPointToChart(chart, price) {
chart.series[0].addPoint(price, true, false)
},
mounted() {
console.log("Chart LiveView mounted");
//using data-historical (last hour of random data)
let historical = JSON.parse(this.el.dataset.prices);
this.chart = this.createChart(historical);
},
updated() {
let price = this.lastprice();
console.log(price)
this.addPointToChart(this.chart, price)
}
}
mount and initialization
The ChartLive module initially renders all the historical prices into data-prices attribute (`socket.connected? case to be handled, to avoid to send the whole historical data two times)
When the view is mounted, the mounted function in the JS hooks is called, it reads the data from the data-prices attribute and it creates the chart with that historical data.
Updates
Then for each new price sent from LV, the data-prices is patched and for each update Hooks.Chart.updated() function is called. It takes the new prices from the data-prices attribute and it adds it to the chart.
Considerations
I think that this approach reduces the data hold, rendered and transmitted to the minimum (without taking a huge list of prices into memory and redrawing the whole chart every time) …
BUT, I honestly don’t know how it works in case of rapid updates: is it possible that the JS LiveView on the client side patches the DOM with new data, before update() is able to grab and add the last price to the chart?
Most Liked
chrismccord
Confirm this is exactly what we do on the LiveDashboard and it’s a great approach. Provided your chart update code is synchronous, then it guaranteed to not have any races as everything will happen in the same event loop.
alvises
Sorry, the image’s link has expired. Here’s the result,
And here with a point every 50ms
I’m still investigating if there could be a race condition in updated()… 
alvises
Looking at the new Phoenix 1.5-rc0, the LiveDashboard seems to use a similar method
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"