Skip to content

Instantly share code, notes, and snippets.

@jeffatstepup

jeffatstepup/00-README.txt

Forked from bob-sims/00-README.txt
Created February 3, 2012 14:31
Show Gist options
  • Save jeffatstepup/1730424 to your computer and use it in GitHub Desktop.
Save jeffatstepup/1730424 to your computer and use it in GitHub Desktop.
Download ZIP
Demo of charts display using simulated web service data. Charts are rendered in WebViews using the RGraph JS library within Titanium Mobile, which works nicely on Android.
Raw
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.
Raw
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();
Raw
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>
Raw
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>
Raw
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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment