Looking for resources/tutorials to integrate Kino or VegaLite into any LiveView

Are there any readily-available resources or could you point me to specific code that I can use as a base for how to integrate Kino and VegaLite into my own projects?

I want to render live charts on my user’s dashboards in the most Phoenix way possible.

1 Like

LiveBook source code would be the best bet.

1 Like

I figured as much but was hoping for something with more like a step-by-step tutorial.

I suppose I’ll start with this part of the docs and take it from there Kino.JS.Live — Kino v0.5.2

1 Like

Kino is explicitly meant to integrate with livebook (“Client-driven interactive widgets for Livebook.”), but :vega_lite should be fine to use in liveview with a bit of glue.


True, I’ll start by crawling before trying to run. Thanks!

1 Like

I am a fan of ContEx Charts . Check out if this fits your usecase.

1 Like

Unfortunately not for these reasons, but will keep an eye on it.

  • It’s early days, so the API is going to change and that might break any code that relies on it.
  • Interacting with the graphics (for example, brushing) isn’t possible without a lot of JS. If you need highly interactive graphics, use a JS charting library

I’ll also evaluate the other options listed there, like chartkick-ex

Thanks for the suggestion!

1 Like

It’s fairly trivial to integrate a JS chart library. I generally create a component with a single element and a hook with a few dozens lines of code.

Uplot is/was used in Phoenix LiveDashboard of you want to see one way to do it.

I’m aware of the easy interop to existing libraries and appreciate the suggestion, but the question was specifically about Kino and VegaLite, or at least live charting in the most Phoenix way possible.