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

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

im still trying and this is result

the code

the app look

im trying to make value -8 to -6 as yellow
and value of -8 to -10 as red but fail

the code that i tried

may i know what is the proper way to code it .

this look like the image that i shared,cool!! i will have a look also...

i did try your chartmakerplus extension but i did not code well i guess ,,mind have alook at it?

this is it

Code yellowFrom:-8, yellowTo: -6, and redFrom -10, redTo: -8
do NOT use '-8' ... you need to use an integer, not a string and I think you need to go from a smaller integer to a higher integer value.

Does that work?