Programatically push event to LiveView server

I am using FusionCharts to render a line chart. I need to trigger a live view event when someone clicks on a datapoint on the chart. Since I’m using a charting library, I am unable to add phx-click directives to each of the points on the chart.

How can I programatically push an event to the server when someone clicks on the chart? I have a hunch it has to do with the new live view js hooks, but I can’t quiet get it working. I’ve tried using this.pushEvent in the hook callback, but pushEvent only seems to be in scope when I call it in my ‘app.js’ file, and not when I call it from the page that I am rendering the chart on.

Any help would be greatly appreciated.

I figured out the reason pushEvent was not in scope. I was doing this:

hooks.chart = {
  mounted: () => { ... }
}

When I needed to be doing this:

hooks.chart = {
  mounted() {...}
}

Unfortunately, pushEvent still doesn’t seem to work if I try passing that function to another callback for later use.

You’ll need to capture the context of this will you pass along your callback, ie:

mounted(){
  let chart = Chart(....)

  Chart.onWhatever(data => this.pushEvent({...., data: data}))
}
1 Like