https://kotlinlang.org logo
#compose-web
Title
# compose-web
y

Yogeshvu

10/01/2023, 12:22 PM
Would like to start exploring and building portals for data visualization.Are there any working examples of using charts/visualizations dashboards in compose web (html)? Thanks
h

handstandsam

10/01/2023, 12:49 PM
HTML or WASM?
y

Yogeshvu

10/01/2023, 1:06 PM
Html
h

handstandsam

10/01/2023, 1:07 PM
If that's it, then you can use any JavaScript charting library. You'll just need to call native JavaScript to do it. Because you're rendering HTML, it doesn't really matter if the charting library is in compose.
y

Yogeshvu

10/01/2023, 1:09 PM
Thanks! Please let me know if one comes across any working example of visualization in the compose-html example to refer to…
h
I don't have any other concrete examples, but if you look at the console logging example in that article you can see how you call the JavaScript method from compose over a bridge. Using that export piece.
y

Yogeshvu

10/01/2023, 1:14 PM
Thanks, just to clarify this not specifically for wasm(due to the url naming) correct?
h

handstandsam

10/01/2023, 1:15 PM
It is not just WASM. I got it working last week on both
I would separately in a random HTML file. Just get a JavaScript charting library working and then figure out what data you need to pass over
y

Yogeshvu

10/01/2023, 1:17 PM
Thanks
d

David Herman

10/01/2023, 5:51 PM
Not a charting library, but if the JS API is easy, it can be pretty easy to integrate in your own site. For example, in my blog site, I use a JS library called highlight.js, and it was trivial to trigger on my pages. You first have to include a script tag in your page's <head> block (examples from their README). (My project uses the Kobweb framework, so I'm doing this in my build.gradle.kts file instead of an index.html file directly, but you can see me doing that here, which is generally the same idea)
👍 1
It gets a little trickier if you want to add Kotlin bindings that wrap the library, and/or if it's an npm dependency.
👍 1
h

hfhbd

10/03/2023, 3:36 PM
Here is a sample for chartjs: https://github.com/hfhbd/chartJS-compose
y

Yogeshvu

10/03/2023, 9:06 PM
@hfhbd thanks! will checkout!
5 Views