jeffatstepup/00-README.txt

## 00-README.txt
This app uses RGraph library to build Android-compatible pie charts using Titanium Mobile.

Brief screencast to demo functionality:
http://youtu.be/itTEwQmvNfY?hd=1

This was for a work prototype/mockup, so excuse the esoteric text labels and fake activity indicator.

I borrowed heavily from prior art.

Aaron Saunder's "Titanium Appcelerator Quickie: Google Charts and Appcelerator"
http://blog.clearlyinnovative.com/post/4044172191/titanium-appcelerator-quickie-google-charts-and

Tim Poulson's "RSS Reader" CommonJS example:
https://github.com/skypanther/TitaniumIntro/tree/master/RSSReader

There's almost certainly a way to replicate Aaron's dynamic chart update feature in RGraph, but I haven't figured it out yet.

I renamed the RGraph library includes with a ".lib" extension to pre-empt any JSLint parse errors, maybe not required.

## app.js
var rr = {}; // create our namespace

// require the module file
rr.ui = require('ui');

// open the app's UI
rr.tabGroup = rr.ui.createAppTabs();
rr.tabGroup.open();

## chart.html
<html >
<head >
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 10.0" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<!--Load the AJAX API-->
<script type = "text/javascript" src = "RGraph.common.core.js.lib" > </script>
<script type = "text/javascript" src = "RGraph.pie.js.lib" > </script>
<script type="text/javascript">
        window.onload = function drawChart()
    {
        // The data to be shown on the Pie chart
        var data = [464,55,399,511,222];

        // Create the Pie chart. The arguments are the canvas ID and the data to be shown.
        var pie = new RGraph.Pie('myPie', data);

        // Configure the chart to look as you want.
        pie.Set('chart.labels', ['US '+data[0], 'Italy '+data[1], 'Germany '+data[2], 'Poland '+data[3], 'France '+data[4]]);
        pie.Set('chart.linewidth', 2);
        pie.Set('chart.colors', ['blue','green','red','orange','brown']);
        pie.Set('chart.stroke', 'black');
        pie.Set('chart.title', 'Event Attendance (by Nation)');
        pie.Set('chart.gutter.top', 40);
        pie.Set('chart.adjustable','true');

        // Call the .Draw() chart to draw the Pie chart.
        pie.Draw();
    }
</script>
<title>Training Event Stats</title>
</head>

  <body>
    <!--Div that will hold the pie chart-->
    <canvas id="myPie" width="300" height="200">[No canvas support]</canvas>
  </body>
</html>

## inproc_chart.html
<html >
<head >
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 10.0" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<!--Load the AJAX API-->
<script type = "text/javascript" src = "RGraph.common.core.js.lib" > </script>
<script type = "text/javascript" src = "RGraph.pie.js.lib" > </script>
<title>TE 13-01 Stats</title>
</head>

  <body>
    <!--Div that will hold the pie chart-->
    <canvas id="pie1" width="300" height="200">[No canvas support]</canvas>
    <canvas id="pie2" width="300" height="200">[No canvas support]</canvas>

        <script type="text/javascript ">

    window.onload = function ()
    {
        // The data to be shown on the Pie chart
        var data = [302,75,23];

        // Create the Pie chart. The arguments are the canvas ID and the data to be shown.
        var pie = new RGraph.Pie('pie1', data);

        // Configure the chart to look as you want.
        pie.Set('chart.labels', ['Complete '+data[0], 'Arrived '+data[1], 'Not arrived '+data[2]]);
        pie.Set('chart.linewidth', 2);
        pie.Set('chart.colors', ['green','orange','red']);
        pie.Set('chart.stroke', 'black');
        pie.Set('chart.title', 'Event Inprocessing (TA)');
        pie.Set('chart.gutter.top', 40)

        // Call the .Draw() chart to draw the Pie chart.
        pie.Draw();

        // The data to be shown on the Pie chart
        var data2 = [102,15,33];

        // Create the Pie chart. The arguments are the canvas ID and the data to be shown.
        var pie2 = new RGraph.Pie('pie2', data2);

        // Configure the chart to look as you want.
        pie2.Set('chart.labels', ['Complete '+data2[0], 'Arrived '+data2[1], 'Not arrived '+data2[2]]);
        pie2.Set('chart.linewidth', 2);
        pie2.Set('chart.colors', ['green','orange','red']);
        pie2.Set('chart.stroke', 'black');
        pie2.Set('chart.title', 'Event Inprocessing (EXCON)');
        pie2.Set('chart.gutter.top', 40)

        // Call the .Draw() chart to draw the Pie chart.
        pie2.Draw();
    }
    </script>

  </body>
</html>

## ui.js
// local functions
// function to fake network call
var spinner = function() {
	var actInd = Ti.UI.createActivityIndicator({
		bottom:40,
		height:50,
		width:20,
		style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
	});
	actInd.message="Loading sample data...";
	actInd.show();
	setTimeout(function() {
		actInd.hide();
		Ti.API.info('timeout function');
	},2000)};

var createAboutWindow = function() {
	// create the About window
	var aboutWindow = Titanium.UI.createWindow({
	    title:'About',
	    barColor:'#18223c',
	});

	var aboutTable = Ti.UI.createTableView({top:'50%', separatorColor: 'black',});
	var titleRowLabel = Ti.UI.createLabel({text:'Category',color:'white',font: {fontSize:24,fontWeight:'bold'},left:5,width:'50%'});

	var data = [], row = null;

	var rowTitles = ["DVs","Training Audience","EXCON","SMEs","Visitors"];
	var rowRequested = [5,523,203,42,19];
	var rowActual = [4,497,158,25,15];
	var titleRow = Ti.UI.createTableViewRow({
			backgroundColor: 'blue',
			//color: 'black',
		});
	titleRow.add(titleRowLabel);
	var titleLabel1 = Ti.UI.createLabel({text:'Actual', textAlign:'center',font: {fontSize:20,fontWeight: 'normal'}, color:'white', height: '90%', width:100, right:10});
	var titleLabel2 = Ti.UI.createLabel({text:'Requested', textAlign:'center', font: {fontSize:20,fontWeight: 'normal'}, color:'white', height: '90%', width:100, right:120});
	titleRow.add(titleLabel1);
	titleRow.add(titleLabel2);

	data.push(titleRow);
	for(var i=0;i<rowTitles.length;i++) {
		var label1 = Ti.UI.createLabel({text:rowActual[i].toString(), color:'black', textAlign:'center', backgroundColor:'#F0FFFF', height: '100%', width:100, right:10});
		var label2 = Ti.UI.createLabel({text:rowRequested[i].toString(), color:'black', textAlign:'center', backgroundColor:'#CCCCFF', height: '100%', width:100, right:120});
		var titleLabel = Ti.UI.createLabel({text:rowTitles[i],color:'black',font: {fontSize:24,fontWeight: 'bold'},left:5,width:'50%'});
		row = Ti.UI.createTableViewRow({
			title: rowTitles[i],
			backgroundColor: 'white',
			//color: 'black',
		});
		row.add(titleLabel);
		row.add(label1);
		row.add(label2);
		data.push(row);
		row = Ti.UI.createTableViewRow({
			height:2,
			backgroundColor: 'black',
			//color: 'black',
		});
		data.push(row);
	};
	aboutTable.data = data;

	var aboutWebView = Titanium.UI.createWebView({
		top: 0,
		url: 'chart.html',
		width: '100%',
		height: '60%',
	});

	aboutWebView.addEventListener('beforeload', spinner);

	aboutWindow.add(aboutWebView);
	aboutWindow.add(aboutTable);
	return aboutWindow;
}; // end createAboutWindow();

var createInprocWindow = function() {
	// create the About window
	var aboutWindow = Titanium.UI.createWindow({
	    title:'Inproc',
	    barColor:'#18223c',
	});

	// create the webview
	var aboutWebView = Titanium.UI.createWebView({
		top: 0,
		url: 'inproc_chart.html',
		width: '100%',
	});

	aboutWebView.addEventListener('beforeload', spinner);

	var button5 = Titanium.UI.createButton({
		title:'About this App',
		height:50,
		width:200,
		bottom:10,
	});
	button5.addEventListener('click', function(){
		Ti.UI.createAlertDialog({title:'About',buttonNames:['OK'],message:'This prototype mobile app uses sample data to build dynamic charts. A finished version would pull real-world data from over the network.'}).show();
		Ti.API.info('done');
	});

	aboutWindow.add(aboutWebView);
	aboutWindow.add(button5);
	return aboutWindow;
}; // end createInprocWindow();

exports.createAppTabs = function() {
	// Create our tab group and tabs
	var tabGroup = Titanium.UI.createTabGroup();

	// Create the About tab
	var aboutTab = Titanium.UI.createTab({
	    icon:Ti.Android.R.drawable.ic_menu_view,
	    title:'Overview',
	    window:createAboutWindow(),
	});
	tabGroup.addTab(aboutTab);

	var inprocTab = Titanium.UI.createTab({
	    icon:Ti.Android.R.drawable.ic_menu_agenda,
	    title:'Inprocessing',
	    window:createInprocWindow()
	});
	tabGroup.addTab(inprocTab);

	return tabGroup;
};
	This app uses RGraph library to build Android-compatible pie charts using Titanium Mobile.

	Brief screencast to demo functionality:
	http://youtu.be/itTEwQmvNfY?hd=1

	This was for a work prototype/mockup, so excuse the esoteric text labels and fake activity indicator.

	I borrowed heavily from prior art.

	Aaron Saunder's "Titanium Appcelerator Quickie: Google Charts and Appcelerator"
	http://blog.clearlyinnovative.com/post/4044172191/titanium-appcelerator-quickie-google-charts-and

	Tim Poulson's "RSS Reader" CommonJS example:
	https://github.com/skypanther/TitaniumIntro/tree/master/RSSReader

	There's almost certainly a way to replicate Aaron's dynamic chart update feature in RGraph, but I haven't figured it out yet.

	I renamed the RGraph library includes with a ".lib" extension to pre-empt any JSLint parse errors, maybe not required.
	var rr = {}; // create our namespace

	// require the module file
	rr.ui = require('ui');

	// open the app's UI
	rr.tabGroup = rr.ui.createAppTabs();
	rr.tabGroup.open();
	<html >
	<head >
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 10.0" /> <meta name="apple-mobile-web-app-capable" content="yes" />
	<!--Load the AJAX API-->
	<script type = "text/javascript" src = "RGraph.common.core.js.lib" > </script>
	<script type = "text/javascript" src = "RGraph.pie.js.lib" > </script>
	<script type="text/javascript">
	window.onload = function drawChart()
	{
	// The data to be shown on the Pie chart
	var data = [464,55,399,511,222];

	// Create the Pie chart. The arguments are the canvas ID and the data to be shown.
	var pie = new RGraph.Pie('myPie', data);

	// Configure the chart to look as you want.
	pie.Set('chart.labels', ['US '+data[0], 'Italy '+data[1], 'Germany '+data[2], 'Poland '+data[3], 'France '+data[4]]);
	pie.Set('chart.linewidth', 2);
	pie.Set('chart.colors', ['blue','green','red','orange','brown']);
	pie.Set('chart.stroke', 'black');
	pie.Set('chart.title', 'Event Attendance (by Nation)');
	pie.Set('chart.gutter.top', 40);
	pie.Set('chart.adjustable','true');

	// Call the .Draw() chart to draw the Pie chart.
	pie.Draw();
	}
	</script>
	<title>Training Event Stats</title>
	</head>

	<body>
	<!--Div that will hold the pie chart-->
	<canvas id="myPie" width="300" height="200">[No canvas support]</canvas>
	</body>
	</html>
	// local functions
	// function to fake network call
	var spinner = function() {
	var actInd = Ti.UI.createActivityIndicator({
	bottom:40,
	height:50,
	width:20,
	style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
	});
	actInd.message="Loading sample data...";
	actInd.show();
	setTimeout(function() {
	actInd.hide();
	Ti.API.info('timeout function');
	},2000)};

	var createAboutWindow = function() {
	// create the About window
	var aboutWindow = Titanium.UI.createWindow({
	title:'About',
	barColor:'#18223c',
	});

	var aboutTable = Ti.UI.createTableView({top:'50%', separatorColor: 'black',});
	var titleRowLabel = Ti.UI.createLabel({text:'Category',color:'white',font: {fontSize:24,fontWeight:'bold'},left:5,width:'50%'});

	var data = [], row = null;

	var rowTitles = ["DVs","Training Audience","EXCON","SMEs","Visitors"];
	var rowRequested = [5,523,203,42,19];
	var rowActual = [4,497,158,25,15];
	var titleRow = Ti.UI.createTableViewRow({
	backgroundColor: 'blue',
	//color: 'black',
	});
	titleRow.add(titleRowLabel);
	var titleLabel1 = Ti.UI.createLabel({text:'Actual', textAlign:'center',font: {fontSize:20,fontWeight: 'normal'}, color:'white', height: '90%', width:100, right:10});
	var titleLabel2 = Ti.UI.createLabel({text:'Requested', textAlign:'center', font: {fontSize:20,fontWeight: 'normal'}, color:'white', height: '90%', width:100, right:120});
	titleRow.add(titleLabel1);
	titleRow.add(titleLabel2);

	data.push(titleRow);
	for(var i=0;i<rowTitles.length;i++) {
	var label1 = Ti.UI.createLabel({text:rowActual[i].toString(), color:'black', textAlign:'center', backgroundColor:'#F0FFFF', height: '100%', width:100, right:10});
	var label2 = Ti.UI.createLabel({text:rowRequested[i].toString(), color:'black', textAlign:'center', backgroundColor:'#CCCCFF', height: '100%', width:100, right:120});
	var titleLabel = Ti.UI.createLabel({text:rowTitles[i],color:'black',font: {fontSize:24,fontWeight: 'bold'},left:5,width:'50%'});
	row = Ti.UI.createTableViewRow({
	title: rowTitles[i],
	backgroundColor: 'white',
	//color: 'black',
	});
	row.add(titleLabel);
	row.add(label1);
	row.add(label2);
	data.push(row);
	row = Ti.UI.createTableViewRow({
	height:2,
	backgroundColor: 'black',
	//color: 'black',
	});
	data.push(row);
	};
	aboutTable.data = data;

	var aboutWebView = Titanium.UI.createWebView({
	top: 0,
	url: 'chart.html',
	width: '100%',
	height: '60%',
	});

	aboutWebView.addEventListener('beforeload', spinner);

	aboutWindow.add(aboutWebView);
	aboutWindow.add(aboutTable);
	return aboutWindow;
	}; // end createAboutWindow();

	var createInprocWindow = function() {
	// create the About window
	var aboutWindow = Titanium.UI.createWindow({
	title:'Inproc',
	barColor:'#18223c',
	});

	// create the webview
	var aboutWebView = Titanium.UI.createWebView({
	top: 0,
	url: 'inproc_chart.html',
	width: '100%',
	});

	aboutWebView.addEventListener('beforeload', spinner);

	var button5 = Titanium.UI.createButton({
	title:'About this App',
	height:50,
	width:200,
	bottom:10,
	});
	button5.addEventListener('click', function(){
	Ti.UI.createAlertDialog({title:'About',buttonNames:['OK'],message:'This prototype mobile app uses sample data to build dynamic charts. A finished version would pull real-world data from over the network.'}).show();
	Ti.API.info('done');
	});

	aboutWindow.add(aboutWebView);
	aboutWindow.add(button5);
	return aboutWindow;
	}; // end createInprocWindow();

	exports.createAppTabs = function() {
	// Create our tab group and tabs
	var tabGroup = Titanium.UI.createTabGroup();

	// Create the About tab
	var aboutTab = Titanium.UI.createTab({
	icon:Ti.Android.R.drawable.ic_menu_view,
	title:'Overview',
	window:createAboutWindow(),
	});
	tabGroup.addTab(aboutTab);

	var inprocTab = Titanium.UI.createTab({
	icon:Ti.Android.R.drawable.ic_menu_agenda,
	title:'Inprocessing',
	window:createInprocWindow()
	});
	tabGroup.addTab(inprocTab);

	return tabGroup;
	};