albertosh
I have a Live view that renders a
and injects a script file for that page. The script contains a function that renders a chart on the div based on the data provided to the div via a data attribute. It all works great the first time, but when I change one filter, the live view gets re-rendered and now the chart is all white (no chart rendered). I’m pretty new to Phoenix so I might be doing something wrong, but just in case, I’ll leave some code here.
/views/cash_flow_view.ex
defmodule Proj.CashflowView do
use ProjWeb, :view
def date_group_filters() do
[
"By Month": :by_month,
"By Quarter": :by_quarter,
"By Year": :by_year
]
end
def render("scripts.html", _assigns) do
~E(<script src="./js/charts.js"></script>)
end
end
live/cashflow_live_view.ex
defmodule ProjWeb.CashflowLiveView do
use Phoenix.LiveView
alias Poison
alias ProjWeb.CashflowView
alias Proj.Cashflow
def render(assigns) do
IO.inspect "RENDERING AGAIN"
IO.inspect assigns.cashflow
~L"""
<h3>Cash flow</h3>
<%= CashflowView.render("filters.html", assigns: assigns) %>
<div id="chart" data-cashflow="<%= Poison.encode!(assigns.cashflow) %>"></div>
<%= CashflowView.render("scripts.html", assigns: assigns); %>
"""
end
def mount(session, socket) do
{:ok, assign(socket, session)}
end
def handle_event("update_filters", %{"filters" => filters}, socket) do
cashflow = case Map.get(filters, "date_group") do
"by_month" ->
Cashflow.cashflow_by_month(socket.assigns.user_id)
"by_quarter" ->
Cashflow.cashflow_by_quarter(socket.assigns.user_id)
"by_year" ->
Cashflow.cashflow_by_year(socket.assigns.user_id)
end
{:noreply, assign(socket, cashflow: cashflow)}
end
end
/scr/chart.js
import Taucharts from "taucharts";
import tooltip from "taucharts/dist/plugins/tooltip"
export var Chart = {
render: function() {
const chartDiv = document.querySelector('#chart');
const data = JSON.parse(chartDiv.dataset.cashflow);
const chart = new Taucharts.Chart({
data: data,
type: 'line',
x: 'date',
y: 'amount',
color: 'type',
guide: {
x: {label: {text: 'Month', padding: 35}, padding: 20},
y: {label: 'Cashflow', padding: 20},
padding: {b: 70, l: 70, t: 10, r: 10},
showGridLines: 'y'
},
plugins: [
tooltip()
]
});
chart.renderTo('#chart');
}
}
setTimeout(() => Chart.render(), 1000)
My 2 questions would be:
- Is there a way to avoid having to use that setTimeout? If I don’t use it then the chart probably never gets rendered.
- How can I make sure that inside the live view I can get access to chart? and call it’s methods from there?
Thanks!
Trending in Questions
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
Hello,
I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
So my question is quite simple and i have found no conclusive answer on forum, google or AI.
Should we use :erlang.float for Integer to ...
New
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
Documentation
While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
Other Trending Topics
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
Hi there! We created Gust: A task orchestrator inspired by Airflow.
For those who have never heard about Aiflow, it’s a Python-based wor...
New
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
Aludel - LLM Evaluation Workbench
Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming










Showing Posts 1 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
rhcarvalho
Very late to the party, but since this got many views already, I’ll leave a reference for those landing here in the future – myself included.
I used to embed some arbitrary JS code like the OP into a LiveView, also with some side effects. Works apparently okay on the first render, but doesn’t work if live navigating back to the page.
I think the solution is as @LostKobrakai said in Re-render JS on a Live view update - how to? - #2 by LostKobrakai, either using JS events or hooks:
JS.dispatch/1andwindow.addEventListenerphx-hook