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

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

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)--!/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

Gauge with extension:

Gauge with canvas:

Search gauge:

1 Like

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

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 data (3000 data/minute) which means it will only support about 1000 minutes before reach 3M 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 :blush:


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.

1 Like
1 Like

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 :disappointed_relieved:

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.

See the How To Work With Lists article at

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

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

and you can make the fancy version

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

i did try

working great :+1:

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

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.

1 Like

I will try it :grinning:

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

modify the Altitude html that is in Media as editAltidudehtml
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. :slight_smile: Yes, you should be able to us -10,0,10 provided your min: -10 and max: 10 .

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! :relaxed:

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

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

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. :slight_smile:

You may also be interested in highcharts:

also see