# Using Javascript in webviewer? **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** javascript\ **Created:** [April 10, 2019, 1:19pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358 "2019-04-10T13:19:02Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ANAND\_VELANDY](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@ANAND\_VELANDY](https://community.thunkable.com/u/ANAND_VELANDY)\ **Post date:** [April 10, 2019, 1:19pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/1 "2019-04-10T13:19:02Z")
can you tell me if this is possible in webview of Thunkable x ? javascript inject [https://puravidaapps.com/inject.php](https://puravidaapps.com/inject.php) ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [April 10, 2019, 2:06pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/2 "2019-04-10T14:06:21Z")
This is not something I’m familiar with, but @actech would know more about this I think. Did you try using the data URL property `data:text/html`? Can you tell us a bit more about the app you are trying to build @ANAND_VELANDY and which site you are sending data to? Would the WebAPI component be a viable alternative, by any chance? ---
**Author:** ![ANAND\_VELANDY](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@ANAND\_VELANDY](https://community.thunkable.com/u/ANAND_VELANDY)\ **Post date:** [April 10, 2019, 2:11pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/3 "2019-04-10T14:11:40Z")
I will have to check data:text/html. Basically I have a website where normally user have to login with ID and Password. I wish to make a webview App, with Save ID and Password Feature. So once logged in, next time website login could be done automatically with javascript and stored ID+Password. eg website: [https://puravidaapps.com/webviewertest.html](https://puravidaapps.com/webviewertest.html) ---
**Author:** ![ANAND\_VELANDY](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@ANAND\_VELANDY](https://community.thunkable.com/u/ANAND_VELANDY)\ **Post date:** [April 9, 2019, 10:15pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/4 "2019-04-09T22:15:32Z")
How to fill out a form of a webpage and click a button using some JavaScript. This was possible in classic. wherein webviewer1.goToUrl: javascript:(function() {…} worked. Can this be done in Thunkable X Webviewer? So that I can auto Login to my website, from App? ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [April 12, 2019, 6:36am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/5 "2019-04-12T06:36:29Z")
Hi, See the Canvas and HTML screens in this project. [https://x.thunkable.com/projects/5c8e64dfe1aad2f778a4c5ad/project/properties/designer/](https://x.thunkable.com/projects/5c8e64dfe1aad2f778a4c5ad/project/properties/designer/) If you need two-way data exchange between the app and WebViewer, then use FireBase and FireBase JavaScript for this. ---
**Author:** ![franco\_amato](https://avatars.discourse-cdn.com/v4/letter/f/ee59a6/32.png) [@franco\_amato](https://community.thunkable.com/u/franco_amato)\ **Post date:** [July 7, 2019, 5:36pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/6 "2019-07-07T17:36:18Z")
Good morning, I have the same problem with you. Have you solved it? ---
**Author:** ![justin.thanh84v20](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/justin.thanh84v20/32/67711_2.png) [@justin.thanh84v20](https://community.thunkable.com/u/justin.thanh84v20)\ **Post date:** [April 4, 2020, 11:24am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/7 "2020-04-04T11:24:04Z")
hi @ANAND_VELANDY, Did you resolve your issue? I need the app to auto fill user/pass into my webview too. anyone have solution? ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 4, 2020, 6:00pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/8 "2020-04-04T18:00:26Z")
You should be able to accomplish this soon! I hired a developer on [fiverr.com](http://fiverr.com) to do something like this for me. It cost 7$ in total. ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 4, 2020, 10:21pm UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/9 "2020-04-04T22:21:23Z")
Assuming you own the website, you can write javascript to get a message from Thunkable that contains the username and password, and use that to fill in the webview. You’ll need to include thunkableWebviewerExtension.js on the webpage. There is a simple example linked on the page below > **[thunkable/webviewer-extension](https://github.com/thunkable/webviewer-extension)** > > Communicate between the Thunkable Web Viewer and a website - thunkable/webviewer-extension ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 5, 2020, 12:14am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/10 "2020-04-05T00:14:42Z")
You’ll this be used to inject other types of data @paulmw. I’m thinking stuff like hosting a page with a google chart. Could I send the chart data and let my server render the image? ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 5, 2020, 2:54am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/11 "2020-04-05T02:54:13Z")
You can definitely have a chart in a webpage and pass data using these block (it’s one of the reasons I’ve implemented this). So you should **only send strings** as messages. What I’d do is create a list or object in Thunkable that has the data you want, then use the “generateJSONFromObject” block to make a JSON string. Use the post message block with that string, and then in your website’s javascript use JSON.parse(message), and then you’ll have an object with all of your data. ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 5, 2020, 4:06am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/12 "2020-04-05T04:06:41Z")
Just made a graph example for you: [https://x.thunkable.com/copy/60e6376165b009edfcd66bedaa7813c8](https://x.thunkable.com/copy/60e6376165b009edfcd66bedaa7813c8) The code for the html is here: [https://github.com/thunkable/webviewer-extension/blob/master/examples/graph.html](https://github.com/thunkable/webviewer-extension/blob/master/examples/graph.html) Both are linked from the github page: [https://github.com/thunkable/webviewer-extension/](https://github.com/thunkable/webviewer-extension/) I like C3.js so I used that, but the concept is the same for other graphing libraries. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 5, 2020, 4:09am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/13 "2020-04-05T04:09:08Z")
@paulmw WOWWWW, 🙇‍♂️ Thanks!! I need to look into this more. I like this a lot! Is it safe to assume we can only pass along 1 piece of info or could more be passed along in an object? For example, i am using [quickchart.io](http://quickchart.io) for my graphs currently, and i pass along in an API POST, custom tick marks for both X and Y axis, and coordinates for a trendline. ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 5, 2020, 4:16am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/14 "2020-04-05T04:16:06Z")
Yes you can use an object. The key is that the **post message block only takes in strings**. But as long as you use the generateJSONFromObject block (like in my example), you can convert a list or object into a string. In my example I converted the shuffled list into a string, then used JSON.parse(message) to get the list back so I could use it in the graph. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 5, 2020, 4:30am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/15 "2020-04-05T04:30:55Z")
Thanks @paulmw, I will have to study this. I see how you got the first item (i think), you when you bindto “#chart” ![Screen Shot 2020-04-05 at 12.11.35 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/492fd0e38423dcaecabaa08418ed7b84b31fc127.png) that takes what was in the JSON string and concatenates the string to the correct place in [‘data’], ![Screen Shot 2020-04-05 at 12.12.50 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/2/32f7446a2ae60006ce7318a2e0ee1bd23306e953.png) and then this code overwrites(?) the original code where the **bindto** method is. If that’s close, I thank [codeacademy.com](http://codeacademy.com) and the couple hours of javascript i have under my belt. If not, I drop my head in shame and i’ll go study some more. lol Thanks for all of your help!! ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 5, 2020, 4:42am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/16 "2020-04-05T04:42:42Z")
Yeah, you got it mostly correct. The code is essentially copied from the c3 documentation: [https://c3js.org/gettingstarted.html](https://c3js.org/gettingstarted.html) “bindto” basically finds the element with id “chart” and now the library knows where it should generate the graph. `columns:[['data1'] ]` sets the initial data of the data1 series, which is empty to start. If I wrote `columns:[['data1', 5,6, 7] ]`, then there would be 3 data points on the graph, (0,5), (1, 6), and (2, 7). Running `chart.load()` overwrites the previous column data (which was empty when the graph was initialized). If my message was [7,8,9], then the value of columns is `[['data1, 7, 8, 9]]`, and my graph would have point (0,7), (1,8), and (2, 9). ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 5, 2020, 4:47am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/17 "2020-04-05T04:47:42Z")
> [@paulmw](#): > > initial data of the data1 series, which is empty to start. If I wrote `columns:[['data1', 5,6, 7] ]` , then there would be 3 @Kartik14 @inspiringtec1wvk @manyone @cttricks, you may be interested in this thread! Yes! I was just reading that in their docs! so if i understand then, i could create the entire JSON on my end in the app, and send it to the file. instead of `['data1']concat.(messageList)` , i would use `chart.Load(messageList);` the first just concatenate the 2 arrays, so i could just replace the entire JSON body i think. is that correct? if so, I’ll take a crack at a built up example! ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 5, 2020, 4:56am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/18 "2020-04-05T04:56:53Z")
There are lots of ways of handling this, that’s one of them. Try it out, and post if you have questions. I can post another more complicated example with more options if people need it. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [April 5, 2020, 5:01am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/19 "2020-04-05T05:01:38Z")
I’m stoked! Thanks so much #teamThunkable and @paulmw for all the great features. Man, this is really exciting for me. I really am a graph lover, it’s part of my profession. My app users see between 1-5 graphs every day they use their app. If i size things correctly, I will be able to have much nicer AND interactive graphs! My most complicated graph JSON looks like this from [quickchart.io](http://quickchart.io) (which uses chart.js libraries). ``` { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { label: 'Corrects', data: [10, 60, 70, 180, 190], borderWidth:1,pointBackground:'green', fill: false, borderColor:'green'}, { label: 'Incorrects', data: [.10, 20, 30, 40, 50], fill: false, borderColor: 'red', pointStyle:'star', pointRadius:4, borderWidth:1 }] }, options: { title: { display: true, text: 'BEHAVIORNAMEGOESHERE', fontColor: 'Black', fontSize: 32, }, legend: { position: 'bottom', }, scales: { yAxes: [{ type: 'logarithmic', ticks: { autoSkip: false, min:.001, max: 1000,callback: function (value, index, values) {if( value==.001 || value==.01 || value==.1 || value==1 || value==10 || value==100 || value==1000){return value + ' per minute';}},}}],},},} ``` ---
**Author:** ![paulmw](https://avatars.discourse-cdn.com/v4/letter/p/22d042/32.png) [@paulmw](https://community.thunkable.com/u/paulmw)\ **Post date:** [April 5, 2020, 5:09am UTC](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/20 "2020-04-05T05:09:17Z")
Random unsolicited advice for how to approach this: I’m guessing some information displayed in your graph comes from your app. I would only send the information generated from the app to the webpage using postMessage. Then read the message in your webpage and use it to generate the JSON you’ll use for [quickchart.io](http://quickchart.io). Don’t try making this entire JSON object in Thunkable. For maintainability, you’ll want to use the fewest blocks possible to make this work. [Next page](https://community.thunkable.com/t/using-javascript-in-webviewer/74358.md?page=2)