Using LivieView with chart.js whats it like to feed data to a js lib?

Phoenix Forum Chat / Discussions
, , , ,
1

I wanted to start a convo around how to render templates that define js data feeding data into a lib like chart.js via LiveView. When reviewing chart.js docs on how it want’s its data Data structures | Chart.js I realize I have a disconnect

Have any of you tried this yet? What’s your experience been?
Getting alpine to work in liveview was easy enough but how do define the datasets via the LiveView templates has me scratching my head.

2

We do this with Phoenix.LiveView — Phoenix LiveView v0.15.7. The chart is defined in a hook, and then we use push_event to push data to the hook. Works great, and makes it easy to support chart.js or any number of other chart libraries.

2 Likes
3

Whats your intial vs update hook look like?

I normally get my dataset at handle_params, but I’m not see my handler fire when calling push_event from my handle_params handler. So I’m not sure what it looks like to initialize the data.

  def handle_params(%{"id" => id}, _, socket) do
    thing = Things.get_thing!(id)

    {:noreply,
     socket
     |> assign(:page_title, page_title(socket.assigns.live_action))
     |> assign(:thing, thing)
     |> push_event("push_data", %{new_data: %{foo: :bar}})}
  end

And my hooks.

let Hooks = {
  Chart: {
    mounted() {
      import('chart.js').then(({ Chart, registerables }) => {
        Chart.register(...registerables)
        let ctx = 'myChart';
        let myChart = new Chart(ctx, {
          
          data: {
            labels: [],
            datasets: [{
              label: 'Things',
              data: [],
            }]
          }
        })
        this.handleEvent("push_data", ({ new_data }) => {
          // Never happens
          console.debug(new_data) 
        })
      })
    }
  }
}

Per my comment, I never see %{foo: :bar}

I assume this is the issue.

Note: In case a LiveView pushes events and renders content, handleEvent callbacks are invoked after the page is updated.
Therefore, if the LiveView redirects at the same time it pushes events, callbacks won’t be invoked.

4

Move this.handleEvent outside of the import context. I suspect you’re losing the context of this inside the import call.

Or, do this:

mounted() {
  const self = this;
  ...
  self.handleEvent
5

No, the handleEvent works beyond, the initial call. Like I can boot up IEX and manually broadcast and the handle_info console. debugs out. It’s just that the initial call from the handle_params never triggers the handleEvent.

Edit: Also still gave it a try but didn’t work.

6

The issue is that you have a race condition. handle_params is run before the javascript on the page has fully rendered. Instead of pushing it in handle_params, instead have the hook JS, on mount, push a “get me the data” event to the live view, which you do in a handle_event clause. Then in that, you send the data.

1 Like
7

If you want to give some data to initialize the chart, you can assign it:

def mount(_params, _session, socket) do
  {
    :ok,
    assign(socket,
      temp_chart_data: %{
        labels: ["foo", "bar"],
        values: [21, 12]
      }
    )
  }
end

Then pass it to your chart as data-whatever-you-like in the render/html.leex

<canvas id="temp-chart-canvas"
        phx-hook="TempChart"
        data-chart-data="<%= Jason.encode!(@temp_chart_data) %>">

and then you can use dataset.whateverYouLike in your hook to initialize the chart:

Hooks.TempChart = {
  mounted() {
    const { labels, values } = JSON.parse(this.el.dataset.chartData)
    this.chart = new TempChart(this.el, labels, values)
    ...
    handleEvent...
2 Likes