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.
1 Like
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
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.
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
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.
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
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