Automatically chart async data in liveview without user interaction

Firstly, you need to put this.handleEvent("points", ({points}) => logToConsole(points); in mounted.

You can set it up so that the process receives a message every x seconds, which you handle in handle_info and can trigger the start_async from there.

You can send the message every x seconds with :erlang.send_interval(Time, Destination, Message) or trigger it each time you process the message in handle_info/handle_async. That is Process.send_after(...)), called once in mount and then again in handle_info

If the data is on some publication you could subscribe to that in your liveview.

Hello! Thanks for that info. Do I need this.handleEvent in both mounted() and updated()? Or just in mounted()?

The data is static, on my local server. Basically just a bunch of numbers and timestamps that are retrieved, compiled and sent to the front end. So once the data has been retrieved, it won’t change.

Sorry, I’m new to Elixir & Phoenix, where in the liveview would I setup the :erlang.send_interval()?

:erlang.send_interval would go in mount

this.handleEvent adds an event handler, so you only need to it in mounted().

If the data is quick to retrieve, you can do the work in handle_info and not worry about the async retrieval.

Update: I got it working without hooks! It was as straight forward as it seemed like it should be, I just didn’t know what I didn’t know. The final working product:
live view:

  def mount(params, _session, socket) do
    ...
    socket =
      socket
      ...
      |> start_async(:points, fn -> Tokens.generate_chart_data() end)
    {:ok, socket}
  end

  def handle_async(:points, {:ok, points}, socket) do
    {:noreply, push_event(socket, "graph", %{points: points})}
  end

  def render(assigns) do
    ~H"""
      ...
          <div id="graph"></div>
    """
  end

app.js:

window.addEventListener(
  "phx:graph",
  e => {
  	if (e.detail?.points) {
  		Highcharts.chart('graph', { ... });
  	}
  }
)

That’s it

I’d still go with a hook as often you want to dispose of the chart in destroyed and/or modify it in update and push the event to the specific chart.

So sorry for the timer stuff, I had realtime chart on the brain from a post on the discord and conflated the two.

Ok, that makes more sense w/the timer stuff. I was wondering, but figured I’d give it a try just to see if I could get ANYTHING to work
I’m still unclear as to how I would implement this with hooks as there’s no user interaction

To do the initial one, you push an event in mount if it is a liveview or in update if it is a live component.

For example:

defmodule MyWeb.Components.Charts.EchartComponent do
  use MyWeb, :surface_live_component

  @doc "E-Charts `option` configuration map"
  prop option, :map, required: true

  @doc "Merge the option with the existing one (`true`), or replace it (`false`)?"
  prop merge, :boolean, default: true

  prop class, :css_class, default: "flex h-full w-full"

  def push_loading_event(socket, chart_id) when is_binary(chart_id) do
    push_event(socket, "echarts:#{chart_id}:loading", %{})
  end

  def push_update_event(socket, chart_id, %{"option" => _} = params) when is_binary(chart_id) do
    params = Map.put_new(params, "merge", true)
    push_event(socket, "echarts:#{chart_id}:update", params)
  end

  def push_init_event(socket, chart_id, %{"option" => _} = params) when is_binary(chart_id) do
    params = Map.put_new(params, "merge", true)
    push_event(socket, "echarts:#{chart_id}:init", params)
  end

  def update(%{id: id, option: option, merge: merge} = assigns, socket) do
    {:ok,
     socket
     |> assign(assigns)
     |> push_init_event(id, %{"option" => option, "merge" => merge})}
  end

  @impl true
  def render(assigns) do
    ~F"""
    <div phx-hook="Echarts" id={"echarts-#{@id}"} phx-update="ignore" class={@class} data-id={@id} />
    """
  end
end

In a liveview that uses this, I push “loading” on mount and when params are changed, I push “loading” again and call start_async to fetch the new data async. When it lands, I push an “update” event with the new data. Echarts has a built in show/hide loading indicator function which I’m using. You could a similar thing with the <.async_result> component.