Help with fetching the link to a .js file that I uploaded into my MIT 2 App in order to correctly point the .HTM <src> path

I need to do the following things first:

I want to take this chart exacly as it is for the moment from here:

https://www.highcharts.com/demo/dynamic-update/dark-unica

1.Get a hold of the .js files used by the chart (done)
2.Upload the .js files into my MIT 2 App (done)
3.Obtain the link for each .js file used by the chart from MIT 2 (done)
4.Update the link(s) into the index.htm file so that the chart can work locally, unlike having to call the chart from the link provided by default by them. (done)

Currently the chart works either by adding the .js file from their hosting link which is the following one:

<script src="https://code.highcharts.com/highcharts.js"></script>

Either, according to their documentation, that .js file can somehow be obtain from somewhere and used locally, so that the chart could work without an internet connection. (offline), and that is done by updatig that line with the follwing one:

<script src="/js/highcharts.js"></script>

I need help with obtaining the correct "local" link to the highcharts.js file after I uploaded it into MIT 2 and update it accordingly so that my chart basic setup is done.

I already have the index.html file of the chart that I want to use, I just need to fetch the highcharts.js, upload it into MIT2 and modify the index.htm file link to the highcharts.js to use it and after that upload the index.htm file as well into MIT2 which then, it should work within my app and also run localy (offline) in theory.

Thank you!

Update 1:

I performed a quick search into the API and files provided by Highcharts and I mananged to find the said highcharts.js file already.
Screenshot_14

That is great news, meaning part of the problem is already solved, but I still need help with getting the link from the highcharts.js file that I uploaded into my App;

In order to update the index.htm "highcharts.js" src path with the correct one pointing to the highcharts.js that I just uploaded in my MIT 2 App:

Just upload your index.htm to the media folder (assets) after editing the script line to:
<script src="highcharts.js"></script>

and adjusting any of the other script calls accordingly

Update 2:

I tried doing the following:

  1. Updating the index.htm path to:

<script src="file:///mnt/sdcard/AppInventor/assets/highcharts.js></script>

I then uploaded the index.htm file into my MIT 2 App;

  1. Updating the Web Viewer Home Url to read the new index.htm file with this one:

file:///mnt/sdcard/AppInventor/assets/index.htm

(this one is working)

But the web viewer simply shows a white page meaning it ain't working so something wasn't set up correctly.

Thank you my dear, I think it worked but it's not showing up any data.

Do you need all of these js files as well ?

image

I have no idea, those were there by default.

I simply got the index.htm from a list of examples from Highcharts and I've left it as it is afraid not to broke something.

Normally, it would need to look like in here, but I guess it needs data first:

https://www.highcharts.com/demo/dynamic-update/dark-unica

Here are the links to the other js files

https://code.highcharts.com/highcharts.js"
https://code.highcharts.com/modules/exporting.js
https://code.highcharts.com/modules/export-data.js
https://code.highcharts.com/modules/accessibility.js

Hopefully there is a script in your index.htm containing the data

1 Like

Do I need to include and upload these files as well into my App ? If so I can also search them locally because I downloaded their API and whatnot so I guess these files should be also included in there but I need to know if I need those first.

The html page is calling them so I guess, yes you need them. I noticed a mention of jQuery, you might need the jQuery.min.js too.

If you upload your index.htm here (you may need to rename the extension to txt) we can see what else might be needed.

1 Like

Here it is my dear

index.txt (3.5 KB)

Try this once you have uploaded all the js files to your media folder (assets)

index.html.txt (3.5 KB)

Doesn't look like there is any jQuery.

You can't have sub folders in your assets, therefore all files have to be together.

1 Like

Works on my local computer server, with all js files local.

Wow, I did just what you said my dear and won't you look at this! Thank you!

It looks magical! <3

I wonder where it takes that random that from and if there is any way I can modify it to get list to list data from MIT 2 somehow.

The "random" is in the script in the html file. You can edit the script to your liking.

I am assuming that Highchart don't mind you doing this....

Yup no worries my dear I got a license for personal use from them which is how I got my hands on the API and all their other resources and examples.

Anyone willing to use it for non-commercial projects or for testing can go here to get a license as well guys: https://shop.highsoft.com/highsoft/form/noncommercialform

Added to Charts and Graphs FAQ

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.