Question: Is there any Kotlin lib that I can use for creating a graph for a web-page?

# javascript

[halirutan]

Question: Is there any Kotlin lib that I can use for creating a graph for a web-page?

[gaetan]

See https://play.data2viz.io/pierre/sketches/GjLeKJ/edit/

You can ask questions on #data2viz .

[Robert Jaros]

KVision has support for Chart.js. See example:
https://rjaros.github.io/kvision-examples/showcase/#!/charts

[halirutan]

Thank both of you! I was aware of kvision, but didn't know if I can simply use it inside the kotlin-react code. data2viz is most surprising to me, because it seems to be related to charts.kt which has a nice website, but not much further information.

[halirutan]

Let me look into this! Thanks again.

[Robert Jaros]

You probably can't use kvision with react.

[halirutan]

@Robert Jaros This is why I've seen, but not directly tried it. It looked like two complementary frameworks to me. But it's still nice to know it's around.

[gaetan]

@halirutan data2viz is the low-level library that contains many algorithms ported from d3js. On top of it, we are working on charts.kt. This idea of charts.kt is to provide an easy and fast way to create charts in Kotlin, for all platforms.

[halirutan]

@gaetan Low-level is OK for the moment. I haven't found a way to install it with npm

[gaetan]

It’s a kotlin library, you should install it using gradle. See https://github.com/data2viz/data2viz-docs/blob/master/tutorials/kotlinJS-bar-chart/kotlinjs-bar-chart.md

[halirutan]

I can install data2viz (https://www.npmjs.com/package/@data2viz/data2viz) but that doesn't give me the kotlin bindings it seems.

[halirutan]

Yep, I'm aware that it can be installed via gradle, but kotlin-react is basically configuration-less aka it doesn't use gradle and dependencies can only be installed via npm.

[gaetan]

I must dig into CRKA to see how we can make it work.

[halirutan]

Please be careful with what I say. I'm a newbie when it comes to web-dev and never used react before. The goal of this experiment was to see if I can quickly hack a log-file visualizer that works in the web so that no one in my institute has to fire up Matlab (let alone Excel) to check the motions in the log-file (these are motion data from so-called prospective motion correction for an MRI).

[gaetan]

No problem. It is interesting for me to explore the different types of integration.

[halirutan]

Thanks for looking into it. React.kt has been a nice experience so far and you see results quickly. One of my problems at the beginning was that I didn't even know which web-framework to use for Kotlin (and I most definitely will not start to write JS).

[gaetan]

I’m going to work on it. You can track the state here:
https://github.com/data2viz/data2viz/issues/163

[gaetan]

It will work:

[gaetan]

image.png

[halirutan]

@gaetan That is nice. Can you give me a head-start, what you did to include a working data2viz into a react project and maybe a small hacked sample?

[gaetan]

There is a problem with the content of the distribution on npm. package.json and kjsm files are missing.

[gaetan]

image.png

[gaetan]

I’m working on the gradle build to fix this.

[halirutan]

@gaetan Thanks!

[gaetan]

It should work now.

Using the tutorial, I just added these dependencies:

"dependencies": {
    "@data2viz/d2v-core-js": "^0.8.0-RC3",
    "@data2viz/d2v-color-js": "^0.8.0-RC3",
    "@data2viz/d2v-timer-js": "^0.8.0-RC3",
    "@data2viz/d2v-viz-js": "^0.8.0-RC3",
    "kotlinx-coroutines-core": "^1.3.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },

Ran yarn gen-idea-libs

Then added in the main (with imports):

val viz = viz {
        size = size(500.0, 500.0)
        rect {
            size = size(50.0, 50.0)
            fill = Colors.Web.red
        }
    }
    viz.bindRendererOnNewCanvas()

and it worked.

[halirutan]

@gaetan Nice! This works now.

[gaetan]

Great! I still have an issue with timeFormat module that I must rename in time-format. I will release soon a 0.8.0-RC4 version.

[halirutan]

I will first try to incorporate this into the react workflow. But it seems I can bind a graph to an existing canvas and then I don’t see immediate problems. At least I have something to play with now.

[halirutan]

Thank you very much for taking care.

[gaetan]

Version 0.8.0-RC4 is available. Now, you should be able to use all the modules.