Plotly JS file to display real time data

808 views
Skip to first unread message

Giriraj Pawar

unread,
May 17, 2019, 1:39:28 PM5/17/19
to MIT App Inventor Forum
How can we use plotly.js to display real-time data in the canvas? 

Has anyone tried plotly?

Can we use it like chart.js?

Please let me know. 

https://plot.ly/settings#/

TimAI2

unread,
May 17, 2019, 2:45:18 PM5/17/19
to MIT App Inventor Forum
Probably too high brow (html5/CSS etc) for the AI2 webviewer - can't see how you would display in the canvas ?

SteveJG

unread,
May 17, 2019, 7:13:08 PM5/17/19
to mitappinv...@googlegroups.com
Why do you want to export a plotly.js  graph to a Canvas?   The plotly.js graph is displayed as an image in a WebViewer or a browser.  The grapht contains no data that can be exported or displayed simultaneously with generation of the graph data to Canvas coordinates. You want to plot data in real time.  Why not plot directly to the Canvas coordinates?

Tim's comments are very appropriate   If you can use plotly.js to real time graph, you should do it in the WebViewer.   Is that possible?   What have you tried?



Here are some examples of using native Blocks to plot directly to the Canvas:



ECG circuit(analog data)-Hc06- Arduino-Chart  ... scaled line graph / multiple data plots



Monitor this thread.  Someone might know something we are not aware of to use plotly.js in conjunction with the Canvas.

You might also consider using the ChartMaker extension.  The Chart extension  no longer works with App Inventor on some versions of Android  ChartMaker works on my 7.0 and 8.1 but does not work on my 4.2.2 Tablet.

Regards,
Steve




Message has been deleted
Message has been deleted

Giriraj Pawar

unread,
May 19, 2019, 4:30:24 AM5/19/19
to mitappinv...@googlegroups.com
I tried using plotly.js, I got a little bit of success, but not sure, where the screenshots captured are getting saved, if you launch an application top right corner there is the button to take the screenshot. 
LineGraphDisplay.html
Screenshot_2019-05-19-09-53-42-519_edu.mit.appinventor.aicompanion3.png
p169D_javascript__graficos (1).aia

SteveJG

unread,
May 19, 2019, 8:00:36 AM5/19/19
to MIT App Inventor Forum
Glad you basically got the real time data to plot using plotly.js Giriaj.   When you take a screen capture using most Android devices (if not all), the image is saved to the Gallery on the device.  You should 
find the screen capture using your device's Gallery app.    Is that where it is.

You should also be able to use an extension to take a screen shot.  See Taifun's extension https://puravidaapps.com/screenshot.php  and it will be stored in the directory indicated in his tutorial.

-- Steve


ABG

unread,
May 19, 2019, 2:13:06 PM5/19/19
to MIT App Inventor Forum
Reply all
Reply to author
Forward
0 new messages