Html file not reading array from javascript file as input - charts

Question

This is my app.js file
var earn=[' ',' ',' ',' ',' '];
var lost=['50','60','100','40','20'];
var Break=['40','30','90','90','40'];
var win = Titanium.UI.createWindow({
backgroundColor: 'white'
});
var lbl1 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
height:'5%',
width:'10%',
top:0,
left:0,
borderWidth: 2,
borderColor: 'black',
});
var lbl2 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'Earn',
height:'5%',
width:'10%',
top:'5%',
left:0,
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl2);
var lbl3 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:'Lost',
height:'5%',
width:'10%',
top:'10%',
left:0,
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl3);
var lbl4 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'Break',
height:'5%',
width:'10%',
top:'15%',
left:0,
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl4);
var lbl5 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'Jan',
height:'5%',
width:'10%',
top:0,
left:'10%',
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl5);
var textfield1 = Ti.UI.createTextField({
backgroundColor: '#CED8F6',
value:earn[0],
height:'5%',
width:'10%',
top:'5%',
left:'10%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield1);
var lbl7 = Ti.UI.createLabel({
backgroundColor: 'white',
text:lost[0],
height:'5%',
width:'10%',
top:'10%',
left:'10%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl7);
var lbl8 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:Break[0],
height:'5%',
width:'10%',
top:'15%',
left:'10%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl8);
var lbl9 = Ti.UI.createLabel({
text:'Feb',
backgroundColor: '#CED8F6',
height:'5%',
width:'10%',
left:'20%',
top:'0%',
color:'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl9);
var textfield2 = Ti.UI.createTextField({
backgroundColor: 'white',
value:earn[1],
height:'5%',
width:'10%',
top:'5%',
left:'20%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield2);
var lbl11 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:lost[1],
height:'5%',
width:'10%',
top:'10%',
left:'20%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl11);
var lbl12 = Ti.UI.createLabel({
backgroundColor: 'white',
text:Break[1],
height:'5%',
width:'10%',
top:'15%',
left:'20%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl12);
var lbl13 = Ti.UI.createLabel({
backgroundColor: 'white',
text:'March',
height:'5%',
width:'10%',
top:0,
left:'30%',
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl13);
var textfield3 = Ti.UI.createTextField({
backgroundColor: '#CED8F6',
value:earn[2],
height:'5%',
width:'10%',
top:'5%',
left:'30%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield3);
var lbl15 = Ti.UI.createLabel({
backgroundColor: 'white',
text:lost[2],
height:'5%',
width:'10%',
top:'10%',
left:'30%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl15);
var lbl16 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:Break[2],
height:'5%',
width:'10%',
top:'15%',
left:'30%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl16);
var lbl17 = Ti.UI.createLabel({
text:'Apr',
backgroundColor: '#CED8F6',
height:'5%',
width:'10%',
left:'40%',
top:'0%',
color:'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl17);
var textfield4 = Ti.UI.createTextField({
backgroundColor: 'white',
value:earn[3],
height:'5%',
width:'10%',
top:'5%',
left:'40%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield4);
var lbl19 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:lost[3],
height:'5%',
width:'10%',
top:'10%',
left:'40%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl19);
var lbl20 = Ti.UI.createLabel({
backgroundColor: 'white',
text:Break[3],
height:'5%',
width:'10%',
top:'15%',
left:'40%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl20);
var lbl21= Ti.UI.createLabel({
backgroundColor: 'white',
text:'May',
height:'5%',
width:'10%',
top:0,
left:'50%',
color: 'black',
borderWidth: 2,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl21);
var textfield5 = Ti.UI.createTextField({
backgroundColor: '#CED8F6',
value:earn[4],
height:'5%',
width:'10%',
top:'5%',
left:'50%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield5);
var lbl23 = Ti.UI.createLabel({
backgroundColor: 'white',
text:lost[4],
height:'5%',
width:'10%',
top:'10%',
left:'50%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl23);
var lbl24 = Ti.UI.createLabel({
backgroundColor: '#CED8F6',
text:Break[4],
height:'5%',
width:'10%',
top:'15%',
left:'50%',
color: 'black',
borderWidth: 1,
borderColor: 'black',
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl24);
var btn = Ti.UI.createButton({
title: 'Bar Chart',
bottom: '5%',
left: '2%',
width: '10%'
});
btn.addEventListener('click', function(e)
{
win.remove(layer);
win.add(webview);
});
//win.add(webview);
var btn1 = Ti.UI.createButton({
title: 'Pie Chart',
bottom: '12%',
left: '2%',
width: '10%'
});
btn1.addEventListener('click', function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
alert(earn[0]);
win.add(layer);
win.remove(webview);
});
var webview = Titanium.UI.createWebView({
url:'chart.html',
top: '25%',
left: '12%',
});
webview.addEventListener('beforeload',function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});
var layer = Ti.UI.createView({
top: '25%',
left: '12%',
bottom: '0%',
});
//win.add(layer);
var wbv1 = Ti.UI.createWebView({
url:'pie1.html',
top: '0%',
left: '0%',
right:'67%',
//bottom: 0,
});
wbv1.addEventListener('afterload',function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});
layer.add(wbv1);
var wbv2 = Ti.UI.createWebView({
url:'pie2.html',
top: '0%',
left: '33%',
right:'33%',
//bottom: 0,
});
layer.add(wbv2);
var wbv3 = Ti.UI.createWebView({
url:'pie3.html',
top: '0%',
left: '67%',
right:'0%',
//bottom: 0,
});
layer.add(wbv3);
win.add(btn1);
win.add(btn);
win.add(lbl1);
win.open();
and this is my pie1.html
<html>
<head>
<title> Earn </title>
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script language="javascript" src="app.js" type="text/javascript"></script>
<meta name="viewport" content="user-scalable=0">
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
document.ontouchmove = function(event){
event.preventDefault();
}
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(5);
dataTable.addColumn('number');
dataTable.setValue(0, 0, +earn[0]);
dataTable.setValue(1, 0, +earn[1]);
dataTable.setValue(2, 0, +earn[2]);
dataTable.setValue(3, 0, +earn[3]);
dataTable.setValue(4, 0, +earn[4]);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart'));
var options = {
chxs: '0,000000,11.5', //size of the pie
chxt: 'x',
chs: '360x265', //size of pie
cht: 'p',
chco: 'FF9900', //color of the pie
chd: 's:9flxY',
chdl: earn[0]+'|'+earn[1]+'|'+earn[2]+'|'+earn[3]+'|'+earn[4],
chl: 'Jan|Feb|March|Apr|May',
chma: '25',
chtt: 'Earn',
chts: '000000,14.5',
bottom: '0', //word size of the pie
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
/* document.body.addEventListener('touchmove', function(e) {
// This prevents native scrolling from happening.
we e.preventDefault();
}, false);*/
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
</script>
</body>
</html>
Im trying for my 1st pie as input data on the table and pass the array to html file so that the pie can detect the array and plot itself, but now the problem is that it is not showing the correct data i input. it will just trace the global variable as (' ') nothing instead of the one i input. Sorry for the long coding, im still new, that's the only way i know how to create a table.

Answer 1

I did not go through all your code (there is too much) but I did notice that you do this:
webview.addEventListener('beforeload',function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});
You can't call evalJS on a webview till after the load event has been fired, evalJS only works if there is a page with a DOM that has been loaded first, so this wont do anything. You need to only call evalJS on a load event.