Help: how do you display graph from web in mit app inventor?

[putera_melaka]

Hello all, i hope everyone is in a good condition and doing well

recently i have developed app that send data accelerometer data to MQTT (thanks to @Juan_Antonio),after that i have send the data to node-red to visualize the data received , so now i want to visualize the data in the application...something like shows the graph in the application.

the node-red dashboard(web)--http://127.0.0.1:1880/ui/#!/0?socketid=vK5lutCH3H7irVnvAAAA

my idea that i wanted to make in the app(the image below is only picture not real-time moving graph)

is there any method to make this possible ,please share..thank you

[Juan_Antonio]

Gauge with extension:
https://groups.google.com/g/mitappinventortest/c/VfEcXlmtwdw/m/ewUKn7elAwAJ

Gauge with canvas:
https://groups.google.com/g/mitappinventortest/c/k20NEzXSBy8

Search gauge:
https://community.appinventor.mit.edu/search?q=gauge

[putera_melaka]

Thank you, i will look at the extension and all methods

[putera_melaka]

i have been trying and the extension does not work(or maybe it just me),, i did try the sample project which i import and run on AI companion but does not produce gauge.

the imported projects(.aia)

the AI companion screen.

then i continue reading forum and do some study, i find out using line graph is more better to represent acceleration.

i find that we can use webviewer to show web page and try out

The app look

the block

the AI companion look

so i concluded that we can show pages from website ,however i guess the node-red dashboard is private connection and cannot be shown ,the error as below:

the app when url change to node-red dashboard url

so then i did read about thinkspeak but its not suitable as it has restriction of 3 million data per year...my data (3000 data/minute) which means it will only support about 1000 minutes before reach 3M data.so the option available is google chart which has no restriction( i find its extension here in forum)

thus i decided to go with line chart via chartmaker plus extension created by @TIMAI2

im thinking to create something like this

3 graph which represent acceleration of x,y and z axis

Currently the look in the App inventor:

the code-block(not working,,my code is wrong and not sure how to fix):

the intention is when click start button graph will produce real-time value from acceleration sensor for X-axis,Y-axis and Z-axis and stop when clicked on stop button.

Anyone who know how to solve this please help, thanks alot

[ABG]

You are not building up the lists properly that your graphs need as input.

If you want 3 separate graphs, make 3 separate lists, and use the add item block for each value to the appropriate list each time you get new readings.

Check with your graph provider what they need for input, if it is one dimensional versus two dimensional.

[SteveJG]

Make an Analog Gauge and use it to display something useful

Make a simple Canvas based gauge and display your altitude. A simple home made gauge: uses two png images, a Canvas and an ImageSprite and a LocationSensor/GPS to provide elevation information [Altimeter2examle] The Gauge face is an image set to the background of a Canvas. An ImageSprite is the pointer. Make the pointer with a transparent background as a png image. I am not a graphic artist; use your graphic skills to provide a more elaborate image. The GPS Altitude value is used in a…

[putera_melaka]

well i try to make 3 different list but i am kinda clueless regarding the list

the error msg is obvious indicator that i code wrongly,please give some advice or hint on how to solve this

[putera_melaka]

i did check out this, i will try to do it,,last time im stuck due to set ImageSprite ,thanks ,,i will try and post here the result/question after i retry it.

[ABG]

See the How To Work With Lists article at

FAQ Section: Lists

Introductory Making Lists (Concepts) - MIT Lists Chapter from MIT AI2 Online book Translatable copy of Lists Chapter from MIT AI2 Online book How to work with Lists - imagnity MIT AI2 List Blocks Help Page How to Display a List - MIT nb191 Advanced list blocks (filter, sort, map, reduce) Samples (See the nb191 advanced list blocks before copying older sort techniques - ABG) CSV Table to File and Back How to save Max Scores in TinyDB How to create a nested List Picker How to pick a …

[putera_melaka]

alright ,thanks ..will grasp the idea of how exactly the list work and will retry.

[SteveJG]

Use the aia called Altimeter3.aia. Altimeter3.aia and you do not need the image sprite, although that can work too.

and you can make the fancy version

by swapping the LocationSensor Event Handler with the Accelerometer. Good luck.

[putera_melaka]

i did try

working great

@SteveJG

by swapping the LocationSensor Event Handler with the Accelerometer

this is very tricky part for beginner like me but i will try.

[SteveJG]

Try and with some effort and three WebViewers you probably can do this too

First do the tutorial, make sure it the aia runs then save a copy. Then swap the LocationSensor LocationChanged with the Accelerometer.AccelerationChanged. Try some Blocks. If you get stuck you'll get some help. Be aware, parts of this are complicated but not difficult.

[putera_melaka]

I will try it

[putera_melaka]

well i give it a go,but did i need to code in google chart or something?

as suggested, i edit from the altimeter3.aia

the app look:

the code-block:

the result:

i wonder how do i edit the needle value and change the altitude to Accelerometer as shown above

[quote="SteveJG, post:13, topic:38065"]

as im thinking to put the needle to start from 0 in the middle and to left value is up to -10 and to the right up to +10

[SteveJG]

@putera_melaka

how do i edit the needle value and change the altitude to Accelerometer as shown above

modify the Altitude html that is in Media as
to Acceleration instead of Altitude

for the needle values which are now
var options = {min: 0, max:5000,
width: 1025, height: 308,
// redFrom: 4000, redTo: 5000,
// yellowFrom:75, yellowTo: 90,
minorTicks: 5,
majorTicks: ['0', '1000', '2000', '3000', '4000','5000']
};

you might try
var options = {min: -5000, max:5000,
width: 1025, height: 308,
// redFrom: 4000, redTo: 5000,
// yellowFrom:75, yellowTo: 90,
minorTicks: 5,
majorTicks: ['-5000', '-25000', '0', '2500','5000']
};

or some variation. Experiment. You are doing fine so far. Yes, you should be able to us -10,0,10 provided your min: -10 and max: 10 .

[putera_melaka]

thanks alot for the info, im not so familiar with the coding as my background does not relate,but i love learning new knowledge and will look at it and try it untill i success to make it!

[putera_melaka]

so i went to edit the file and manage to save as .html

the code as below

the app result

then i change the location with the latest file name(hopefully this step is correct)

then i try to make it as i stated.

the code

the result

i did mange to make it, but i realize that the minor tick disappear and the colour/color does not appear as red(8 to 10) or yellow (6 to 8) lastly the webview 1(first accelerometer) function not the other 2

[SteveJG]

remove the // in front of red and yellowFrom: should work.

minorTicks: 0.5, perhaps should be minorTicks: 1, Probably only integers allowed.

I am guessing because I do not remember. Continue to experiment.

[TIMAI2]

You may also be interested in highcharts:

Highcharts Demos and Examples | Highcharts

also see

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 t…