Automatically chart async data in liveview without user interaction

Questions & Help Questions
, , ,
1

Howdy,

I’m struggling with something that seems like it should be simple. I would like to fetch some data via async when the page loads, and then once loaded, graph that data with Highcharts. Everything I’ve read has indicated that you need to setup a hook that will allow you to pass the data from the server to the JS, and you use a handle_event to trigger push_event() with the data. I don’t have a user interaction to trigger the handle_event, I just want the graph to load once the data is ready. I tried adding the push_event() to handle_async , but nothing happens in the JS hook. I have added a dbg() line to verify that the data is being received in the handle_async.

What am I missing? :sweat_smile:

Some code:

def mount() do
  ...
  |> start_async(:points, fn -> Tokens.generate_chart_data() end)
  ...
end

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

  def render(assigns) do
    ~H"""
    ...
    <div class="mt-4 flex flex-row w-full">
        <div id="graph" phx-hook="Graph"></div>
    </div>
    """
  end

var Hooks = {};
Hooks.Graph = {
  mounted() {
	logToConsole('mounted');
  },
  updated() {
  	logToConsole('updated');
  	this.handleEvent("points", ({points}) => logToConsole(points);
  }
}
let logToConsole = (action) => {
	console.log('*********************', action);
}