polypush135

polypush135

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

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.

Marked As Solved

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

We do this with Phoenix.LiveView — Phoenix LiveView v1.2.5. 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.

Also Liked

APB9785

APB9785

Creator of ECSx

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...
benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

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.

Where Next?

Popular in Discussions Top

vans163
So useless benchmarks aside, Its possible to write a webserver that can serve 300k requests per second (perhaps more with optimizations)....
New
mmmrrr
Just saw that dhh announced https://hotwire.dev/ Is it just me or is this essentially live view? :smiley: Although I like the “iFrame-e...
New
cvkmohan
The upcoming Phoenix 1.6 release looks very interesting. Became a habit to watch the commits - and - what they are bringing in. phx.gen...
New
nunobernardes99
Hi there Elixir friends :vulcan_salute: In a recent task I was on, I needed to check in two dates which of them is the maximum and which...
New
AstonJ
Are there any Elixir or Erlang libraries that help with this? I’ve been thinking how streaming services like twitch have exploded recentl...
New
New
AstonJ
If a newbie asked you about Phoenix Contexts, how would you explain the basics to them? Feel free to be as concise or in-depth as you li...
New
Crowdhailer
I’ve been hearing much about the new formatter and it’s something I have been keen to try. I find examples buy far the most illuminating...
248 19204 150
New
jesse
Hi everyone, I hesitated to post this here because I don’t want you to think I’m spamming, but I’ve been working on a Platform-as-a-Serv...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New

We're in Beta

About us Mission Statement