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

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

[putera_melaka]

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 .

[putera_melaka]

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?

@putera_melaka

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.

this is it

[SteveJG]

@putera_melaka

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

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?

[putera_melaka]

It only execute one line not both line command

code:

result:

i tried to make one line code ,but it doesnt not work either

[SteveJG]

I now do not know what you want to color. It seems you got part of it.

Did you know there is an interactive tool at https://developers.google.com/chart/interactive/docs/gallery/gauge

You can use the Code it your self on JSFiddle button and then change values on the page that displays (in the black field ..right on the screen. Then use the Run button at the top of the form next to the blue cloud to see the results displayed.

You might try minorTicks: 5,

and for the colors, I am not sure. Do you want different color zones on the x,y and z accelerations? In that case, you may need a different html file for each acceleration showing the ranges you desire and a separate url for each WebViewer.

or use different colors like I did here adding green.

[putera_melaka]

alright then, thanks for helping out

i will have a look at it