is there recommended way to update a chart when the data changes
jwaldner opened this issue · comments
the charts i have all use the same component; and I want to update a given chart when the parameters change on the address bar. I have it working so that the data is updated when the parameters change; I have fields and other widgets updating on the page but am unsure how to update a chart when the data changes.
Not so much expecting a detailed answer or tutorial, just maybe a nudge in the right direction...
this is my existing component [just for reference]
`attr(:id, :string, required: true)
attr(:spec, :string, required: true)
attr(:width, :string, required: false, default: "100")
attr(:height, :string, required: false, default: "100")
def chart(assigns) do
~H"""
<div class={
"h-[#{@height}] w-[#{@width}] m-4 rounded-lg border-4 border-dashed border-gray-100"
}>
"""
end`
Not much to do on the LiveView side. You have to push the data and write JS to update it. Btw, try the ElixirForum as well, maybe people have already done this. It is the best place for questions. :)
@jwaldner if you render the chart on mount() based on data-chart, then you can also do it on updated() with the new value of data-chart. An alternative way would be a LiveComponent and sending the spec via push_event only when it changes, this way we wouldn't put it in data- attribute that requires escaping.