A picture can be worth a thousand words, and in today's fast-paced business environments, using graphics to display information can be a competitive advantage. This recipe demonstrates how you can use the popular RGraph JavaScript library to create a chart reflecting project scheduling. The following screenshots illustrate what this recipe will look like when completed:
This recipe uses RGraph and several non-native components to display the chart. These components can be downloaded from the source code provided by the book, or individually through the links provided in the See also section at the end of this recipe.
The first step in setting up this recipe is to copy the web folder (highlighted in the following screenshot) into the Resources folder of your project folder. After copying the web folder, you will need to then copy the teamBuilder.js, chartLauncher.js, sampleUI.js, and scheduleBuilder.js files into the Resources folder of your Titanium project, as shown in the following screenshot:
After adding the web folder and CommonJS modules, as discussed earlier, you will need to create your application namespaces in the app.js file and use require to import the module into your code, as the following snippet demonstrates:
//Create our application namespace
var my = {
schedule : require('scheduleBuilder'),team : require('teamBuilder'),chartDisplay : require('chartLauncher'),sampleUI : require('sampleUI')
};The next step in this recipe is to create the main Ti.UI.Window window. This Ti.UI.Window will be used to launch the recipe's functionality.
var win = Ti.UI.createWindow({
backgroundColor: '#fff', title: 'RGraph Sample'
});After the Ti.UI.Window window is created, the fetchDemoView method is called on our sampleUI module. This displays the recipe's instructions to the user:
win.add(my.sampleUI.fetchDemoView());
This section of the recipe demonstrates how to create schedules, and assign tasks to individuals on your project.
- The first step is to create a schedule for a team member. This is done by creating a new schedule object and providing the individual's name. The following line demonstrates how to create a schedule for Richard:
var richard = new my.schedule('Richard'), - Next, the
createTaskmethod is used to create a task for the individual.richard.addTask({ taskName:'Website',startDay:15, duration:28,percentageComplete:67, comment:'Work on website' }); richard.addTask({ taskName:'Fix Web Servers',startDay:40, duration:15,percentageComplete:50, comment:'Work with vendor' });The
createTaskmethod has the following parameters:- Task name: A string containing the name of the task
- Start on day: This is the position (day) the task is to start
- Duration: The number of days the task will take
- Percentage complete: The percentage completion of the task
- Comment: The comment for the task
- Finally, the team member's schedule is added to the team:
my.team.add(richard);
The next snippet demonstrates how to perform the steps discussed earlier, for another team member:
var rachel = new my.schedule('Rachel'),
rachel.addTask({
taskName:'Mock-up',startDay:0,
duration:28, percentageComplete:50,
comment:'Create initial product mock-ups'
});
rachel.addTask({
taskName:'Mobile Images',startDay:40,
duration:25, percentageComplete:74,
comment:'Create mobile assets'
});
my.team.add(rachel);Perform the following steps to launch the example we created in the previous section:
- The first step is to add the
goButtonbutton to theTi.UI.Windowwindow to allow the user to launch the chart sample:var goButton = Ti.UI.createButton({ title:'View schedule', bottom:'40dp',left:'25dp',right:'25dp', width:Ti.UI.FILL, height:'60dp' }); win.add(goButton); - The click event of the
goButtonbutton launches the chart example by using theopenDialogmethod on thechartLaunchermodule. TheopenDialogmethod uses themy.teamobject created previously to generate a Gantt chart containing a team schedule.goButton.addEventListener('click',function(e){Calling the
openDialogmethod is demonstrated in the following snippet:my.chartDisplay.openDialog(my.team); });
The chartLauncher module (chartLauncher.js) is used to display the team's scheduled tasks. The following line demonstrates how this module uses RGraph to create a Gantt chart with the results. First, the openDialog method is added to the exports object:
exports.openDialog = function(team){The next step in this part of the recipe is to create a window to display to the user:
var win = Ti.UI.createWindow({
backgroundColor: '#fff', title: 'Sample Chart',barColor:'#000'
});After Ti.UI.Window is created, a Ti.UI.WebView object is attached. The RGraph chart information is contained in the index.html file that Ti.UI.WebView displays:
var webView = Ti.UI.createWebView({
height:Ti.UI.FILL, width:Ti.UI.FILL, url:'web/index.html'
});
win.add(webView)On the Ti.UI.Window open event, the team's schedule information is passed into the index.html file containing the RGraph methods:
win.addEventListener('open',function(e){The createSchedules and createComments methods are called on the team object. These format the schedule and comment information so that RGraph can display the details.
var schedules = JSON.stringify(team.createSchedule());
var comments = JSON.stringify(team.createComments());A load event listener is added to Ti.UI.WebView after the Ti.UI.Window window is opened. This allows for the contents of Ti.UI.WebView to be fully loaded before the information is injected.
webView.addEventListener('load',function(x){The evalJS method is used to pass the formatted team information to the addGraph method currently being displayed in Ti.UI.WebView. You can view the contents of the addGraph method by opening the index.html file supported with this recipe.
webView.evalJS('addGraph(' + schedules + ',' + comments + ')'),
});
win.open({modal:true});
};- This recipe uses the powerful RGraph HTML5/JavaScript canvas library to create the Gantt chart displayed. I encourage you to visit their website, https://rgraph.net, to learn more about RGraph and the different charting options provided.