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

Questions / Help
, ,
1

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
2

LiveBook source code would be the best bet.

1 Like
3

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
4

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.

2 Likes
5

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

1 Like
6

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

1 Like
7

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
8

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.

9

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.

10

Any luck on finding an answer to this? I am also finding myself at this crossroads.