Automatically chart async data in liveview without user interaction

Questions & Help Questions
, , ,
5

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 :slightly_smiling_face: