Google gauge charts in AI2 - possible!?

[Gerard Bucas]

Hi guys,

I would like to be able to display a Google Gauge chart into my AI2 app! :)

see: https://developers.google.com/chart/interactive/docs/gallery/gauge

Is there a way to do this?

Data point for "gauge" comes from a BLE device & is already available in global variable in app.

Thanks!

Gerard

[TimAI2]

No reason why not....

Display in webviewer

You will need to create an html page (stored locally on app) and use the webviewstring to pass the data to it

App will need web/internet access for it to work

[TimAI2]

You may also wish/need to understand this:

https://groups.google.com/forum/#!starred/aipowerusers/0FNYws18hAs

[Taifun]

you might be interested in the Gauge Extension by Andres Daniel...

Taifun

---

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun. 

[Gerard Bucas]

Thanks Tim,

Will give it a shot. :)

Why would the app need internet access even if the only "url" (= html page file) being accessed is locally stored?

Is this "simply" a requirement for the web viewer to even load/work?

Curious...! 

Thanks

Gerard 

[Gerard Bucas]

Hi Taifun,

Thanks - looks VERY interesting - much appreciated!

Will definitely explore this.

Regards

Gerard

[TimAI2]

Yes, it is for the gviz google magic to work.

[Chris Ward]

...Actually, you can use Google Charts without an internet connection, you can download the javascript file and add it as an asset to your App (HTML file is also stored as an asset).

I have just re-cycled Google's example HTML file, works great with their fake values :)  Debug APK tested.

[Chris Ward]

... and you can DIY your own charts, using the Canvas for example.

See: https://www.professorcad.co.uk/appinventorsnippets#Gauge

[Gerard Bucas]

Niiiiice…!

Duly impressed... :)

[Gerard Bucas]

WOW - even more impressed..! 

Learnt a LOT from you today...! :)

Observations:

1. I had to change the path for loader.js in the GoogleChart.html. Guess you also did that & wanted to make sure I know what I am doing! ;)

2. Works like a charm although I noticed that webview still requires Internet to be available for it to work (as Tim also pointed out). No problem for me but just wanted to mention that.

Question:

Is there a way to pass parameters to that HTML file? Only way I can think of is reading file (easy) and maybe doing a "replace text" of the "chart value" (& maybe max & min for chart) with my latest data value(s). Then writing file back & refreshimg webview. 

Is there a simpler way...!? 

Thanks again!

Regards

G

[Chris Ward]

Hi Gerard

Did you not try the HTML + js files that I posted? Definitely does not need an internet connection!

It's easy to pass values to the HTML file, but if doing so, the file must be outside of the App Assets, on virtual sd. The App can move the files to it's own sd folder as a one-off on first time use.

Read the App Inventor help on passing values to an HTML page, it's a simple piece of javascript.

[Gerard Bucas]

Chris,

Of course I used those files!

But when I switch off my WiFi on phone it no longer works.

Surely yours must behave same!?

G

[Chris Ward]

That's strange Gerard - have you changed something in the HTML file?

[Gerard Bucas]

OK - here is what I landed up with.

I love it - AI2 rocks..!!! :)

Amazing stuff.....

[Chris Ward]

Hi Gerard

Great start!  There are other chart HTML + js examples on the Google site too :)

[Gerard Bucas]

Hi again Chris

I still have one issue that I am not happy about.

Please run the app (from .aia attached earlier). You will notice that the image of the chart (in the webviewer) allows the user to scroll/swipe both vertically & horizontally , which means the chart image can actually be scrolled off the screen by the user. 

How do I stop that behavior (ie: DISABLE the scrolling of the webviewer?).

Maybe the HTML file needs to be set to exactly the right dimensions (so it can't be scrolled by webviewer) but I have tried a few things but can't get that to make any difference.  

So I really want to have a static size of the chart image that cannot be MOVED by the user.

Any way to do that?

Thanks!

Gerard

[Chris Ward]

Hi Gerard

In the HTML file is this view port definition, necessary for smartphones:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=yes">

I think this little change might deliver what you need:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=no">

[Gerard Bucas]

Thanks Chris,

That took care of the vertical scroll but the horizontal scroll still has the same problem (ie: chart can be scrolled off screen).

I tried to add a height constraint as well but that didn't help1 :(

Tried these two:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=no">

and 

<meta name="viewport" content="width=1025px, heigth=308px, initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=no"> 

but the horizontal scroll stays the same no matter what I do!

Help...! :)

Thanks!

Gerard

[Gerard Bucas]

OK - figured it out!

Had to set it to this (overflow-x & overflow-y constraints).

<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.5, maximum-scale=10.0, user-scalable=no, overflow-x=hidden, overflow-y=hidden"> 

Seems OK now!!

Regards

G

[Chris Ward]

Hi Gerard

Beat me to it :)

For HTML, CSS, Javascript etc, the best place to go is: https://www.w3schools.com

[Gerard Bucas]

:)

I also looked into that whole "issue" of whether or not one can load a chart without accessing the internet. The way it works is:

1. You need to be connected to the internet initially so that the google.charts "package" is downloaded from google. If you don't have internet access at initial load time, the chart you need will NOT get loaded. So if you switch off WiFi (or whatever way you are connected to the Internet) BEFORE you load the HTML file (eg: with Set HomeURL for WebViewer as we do), you will never see your ANY charts!

2. AFTER that initial package has been loaded (by: google.charts.load('current', {'packages':['gauge']}); in the HTML file), THEN you no longer need access to the internet & chart values can be freely changed (& charts re-loaded/rendered) without access to the internet. So you can switcj OFF WiFi AFTER the first HTML file is loaded & installed the package(s) you need.

3. Here are the "terms of service" from the Google Charts website:

Our terms of service do not allow you to download the google.charts.load orgoogle.visualization code to use offline. Can I download and host the chart code locally, or on an intranet? ... However, if you don't need the interactivity of Google Charts, you can screenshot the charts and use them as you wish.Feb 23, 2017

Frequently Asked Questions | Charts | Google Developers

https://developers.google.com/chart/interactive/faq

So that's the scoop...!

[Gerard Bucas]

One last question/issue & we can finally close this..! :)

I need to know if there was NO internet connection when the HTML page is initially loaded as the chart does NOT get loaded and I need to inform user as to reason (= no internet connection!).

I can't seem to figure out how to do this with the WebViewer control.

Do you know how to do this, so I can take the appropriate action?

Thanks!

Gerard.

[Chris Ward]

Hi Gerard

I can understand Google doing that, in fact it is one of the reasons not to use their services, because they come along later and charge you for them when they were originally free.

Strange thing is, my phone was working with the files I uploaded to this Topic and it was not connected to the internet (WiFi) or even Bluetooth....... 

Never mind - I think it is actually much better to DIY your own gauge using the Canvas, an Image of a gauge that you have drawn to exactly suit your requirements, and a sprite to perform the job of the needle ("hand"). I'm going to do exactly that in the near future, using an Arduino microcontroller and a temperature sensor to keep an eye on the heat of a 3D Printer enclosure.

[Juan Antonio]

Here a gauge extension (Thunkable):

https://community.thunkable.com/t/gauge-extension-arduino-esp8266/3363

[Gerard Bucas]

Hi Juan

Thanks - but I had already tried & seen that extension last week.

It is VERY basic and despite the fact that the images on the post show a radial dial, it seems to support only a single linear dial (which is very basic).

Last week I also had a look at the developer’s (Andres Daniel) other work/libraries for gauge charts & they are VERY impressive! Unfortunately those charts do not seem to be supported in the Thunkable/AI2 extension (at least not the one included in that post).

Let me know if I missed something...!?

I would love to use the Andres Daniel charts/dials in AI2 and am now looking at maybe doing it myself (without using an extension) using a local/static HTML file and uploading it (& support libraries) as AI2 assets. Then I can use the AI2 webview. It’s probably possible but needs more experimentation.

Regards

Gerard

Gerard

[TimAI2]

Did you find this on your travels?

https://www.codewall.co.uk/creating-gauge-charts-with-the-justgage-javascript-library/

There may be others, search for "javascript gauge".

You will need to download all the libraries (js files) required to your device to work off line

[Gerard Bucas]

Thanks Tim,

I hadn’t actually seen those. Looks interesting - will check it out in more detail.

Right now I am using Google Charts & I am very happy with - except for the fact that one needs initial internet access to load the first ‘image’ (after that you can update values without further internet access).

I am also looking at canvas-gauges ( https://canvas-gauges.com/ ) which also works without any internet access (so just from local downloaded JS library/loader).

Interesting stuff !!

Regards

Gerard

[Chris Ward]

.... There is another, similar lib: Highcharts library. Looks nice but hugely expensive :(

[Gerard Bucas]

Quick update.

FYI:

I came across a Gauge Chart that does NOT require Internet and that looks & behaves EXACTLY like the Google Gauge Charts.

There seems to be no visible difference & works well! The "cost" is of course a bigger JS library that needs to be loaded (d3.min.js) - about 160KB larger that the Google loader.js BUT for that you get EVERYTHING working locally without any internet access.

 

See this link if anyone else is interested.

http://tomerdoron.blogspot.com/2011/12/google-style-gauges-using-d3js.html

Another similar solution can be found at this link:

https://travishorn.com/google-style-gauge-charts-using-d3-588a3c1677af

Regards

Gerard

[Chris Ward]

Hi Gerard!

Thanks for sharing, I know I will find D3.js useful and I'm sure a lot of others will too.

I'm still going to try to DIY charts with native App Inventor - when I have the time that is :) 

[ABG]

(added to Charts and Graphs section of FAQ)

https://groups.google.com/forum/#!msg/mitappinventortest/wqJin0qO8M0/8xUafdROAgAJ

ABG

[Gerard Bucas]

Hi again Chris,

I agree with you. There is of course a downside to rendering it in HTML/webviewer as one needs to have a timer to 'check for change in value of webstring', which effects the perceived "response time". Would LOVE to do it in native AI2. So your little gauge.aia demo inspired me!

This morning I played with D3 some more and managed to use it to render the Google Gauge Chart equivalent "face plate" and needle! So I have the two elements needed to plug into your gauge.aia demo. The only thing I can't figure out is how to set the "centre point" of the needle so that it properly rotates on its axis.

So just need your help with that & we're done!!! :)

See attached .aia file

Thanks!

Gerard  

[Chris Ward]

Hi Gerard

Running a back-up at the moment but I will take a look later tonight. Tomorrow I will not have an internet connection, the supplier is working on the cable network :(

[TimAI2]

Here is a gauge chart (replicating what I see in google sheet for a gauge chart) made from a canvas. I attach also an analog clock aia made on a canvas, which may carry a few of the calculations needed to "automate the gauge"

It may be easier just to have a line for the pointer....

[Gerard Bucas]

Hi Tim

WOW - that drawgauge.aia is awesome!!

I have no idea though how you found/calculated the X,Y values (for example where you placed the 0 and 100 labels). Can you elaborate on that a little?

Also can't figure out how to create a reliable  "point needle to X on dial"!!

For example, move point to 0 then 25 them 50 then 75 then 100.

Can you maybe explain that...?

I REALLY want to use this - shows GREAT potential (versus my current HTML/webviewer alternative).

So need you to teach/show me the basics here.

Haven't looked at the clock yet - will do so in a bit.

I can't use a simple line for a pointer/needle - not acceptable from am aesthetic point of view (your pointer in drawgauge.aia is perfect though - just need to leasrn how to move it! :) )

Regards

Gerard

[Chris Ward]

Hi Gerard

I have modified your file, see attached. The thing to remember is that all Sprites are rectangles and rotate at their centre. So, to get your needle graphic to rotate from the correct point, it actually needed it's background to be longer, such that the spindle (circle) of the needle is central to it's rectangle. Hope that makes sense. On my Samsung, your gauge is too wide and so it gets squished into an oval, hence I reduced it's size a little bit.

I think I can leave you in Tim's hands now :)

[Gerard Bucas]

WOW - Duly impressed - another "awesome" actually.

Its REALLY great that I can benefit from BOTH you AND Tim - each has a different angle (pardon the pun! :) ).

Bottom line is that I am now confident that this can be done in "AI2 native" (and I WILL do that!).

Let me digest all this great work/examples from both of you. Now that I also looked at Tim's CanvasClock.aia  example I can see I need to brush up on my basic geometry (its been a loooong time! :) ).

Regards

Gerard

[Gerard Bucas]

Chris,

OK - made some modifications & works really well now! See the attached aia file.

The only thing I can't get to work is drawing the "current gauge/pressure reading" on the faceplate (as is done in Google & D3 generated gauge charts),

So right now (in the attached aia) I show the "Pressure Reading" below the Gauge and I have disabled the "Draw Text on Canvas Block".

I need to redraw the Text Value on the canvas for each movement of needle BUT from what I can see there is no way to "Clear the previous value" and "draw" a new value, so it writes on top of the previous value and of course it becomes a mess! I am worried that there is no way to fix this unless you or Tim have some magic tricks that I don't know about...!?  :)

This is actually a problem for me - mainly for "display space/layout" reasons in my app.

Any way to fix/do this?

Thanks!

Gerard

  

[TimAI2]

To be honest, my effort was just a drawing, no programming (most of which I have forgotten to remember)

Work to do:

Coding:

Needle Position based upon value

Scale

Tickmarks

Features:

Add red/green arcs to the dial programatically

Dial motion from 0 to value on start

Value on dial