Pizza Party remixed, using cloudDB and Google Visualization Tables

927 views
Skip to first unread message

TimAI2

unread,
Mar 18, 2018, 4:34:06 PM3/18/18
to mitappinv...@googlegroups.com
Features:

Uses cloudDB for data storage
Uses a google visualization table to display the list of orders
Uses my conversion blocks that take an AI2 list and create a javascript array
which is then passed through via the webViewString to the html
Javascript is used to convert the webViewString into a working array for the google table
Column headers are set in the html, which is all held in a text block
List is sorted by last order first
Example resets everything when app is opened / refreshed

Here is the gallery link:


A screenshot:

The blocks:



and the html:

<html>
<head>
<style>
.google-visualization-table-td {text-align: center !important}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var str = window.AppInventor.getWebViewString();
var arr = eval("[" + str + "]");
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Item');
data.addColumn('string', 'Time/Date');
data.addColumn('string', 'Name');
data.addColumn('string', 'Pizza');
data.addColumn('string', 'Drink');
data.addColumn('string', 'Pudding');
data.addColumn('string', 'Comments');
data.addRows(arr);
data.sort({column: 0, desc: true});
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {allowHtml: true, width: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>

I added pudding, because I like pudding :)

Abraham Getzler

unread,
Jul 15, 2018, 5:05:29 PM7/15/18
to MIT App Inventor Forum
Reply all
Reply to author
Forward
0 new messages