How to use a javascript library in a webview

How-to Discussions
1

I’m trying to use ChartJS, to make graphs in Fuse. The way I’m trying to do this is by using a WebView, but I have no web experience so it’s a bit difficult.

Their Getting Started guide looks very straight forward, but I’m trying to figure out how to store and use the ChartJS library from within the WebView.

I’m not really looking for a full implementation example, or anything like that, just a brief explanation of how I’m supposed to import the ChartJS library and layout the UX and where the HTML should go.

Thanks

2

Hola!

I’m going to try making an example of this exact thing, because it’s quite a good use case. I’ll get back to you once I’ve given this a try: Ideally this sort of scenario should be simple and I’ve a feeling it might not be so simple right now.

3

I put up an example of this on my personal github account, you can peek at it here:

https://github.com/Sunjammer/FuseChartExample

4

Can’t you just manipulate the DOM through EvaluateJS??

<EvaluateJS>
    var script = document.createElement('script');
    script.onload = function(evt) {
        // do stuff when loaded
    }
    script.src = 'librarySource.js';
</EvaluateJS>
5

Where would it access librarySource.js from?

6

librarySource.js being a web library like [https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js)

Not a library from Fuse, isn’t that what the above did? Or are you trying to get js from fuse to run in the webview?

7

Your approach would only work if you had a web library. In the example i pasted it is trying to use a bundled one :slight_smile: Making apps that wholly depend on internet access is gonna bite you in the butt, especially if all you want is to use a webview like a component.

If you depend on web access anyway your approach is pretty elegant.

8

That’s what I was confused about, if it was a bundled library or one from the web. But very interesting, I assume this will be easier in the future

9

Hi Andreas,

I wanted to run your FuseChartExample using Fuse 1.1.1 but it gives the following error and I couldn’t figure out why.

E8001: 'var' is not a valid UX operator (not found), at end of '{var'

If it won’t be an inconvenience, can you check it out?

Thanks in advance