Creating a scheduling chart using RGraph

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:

Creating a scheduling chart using RGraph

Getting ready

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:

Getting ready

How to do it…

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')
};

Creating a UI for the recipe

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());

Creating schedules and assigning tasks

This section of the recipe demonstrates how to create schedules, and assign tasks to individuals on your project.

  1. 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'),
  2. Next, the createTask method 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 createTask method 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
  3. 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);

Tip

You can add additional individuals by following the pattern detailed here.

Launching the example

Perform the following steps to launch the example we created in the previous section:

  1. The first step is to add the goButton button to the Ti.UI.Window window 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);
  2. The click event of the goButton button launches the chart example by using the openDialog method on the chartLauncher module. The openDialog method uses the my.team object created previously to generate a Gantt chart containing a team schedule.
        goButton.addEventListener('click',function(e){

    Calling the openDialog method is demonstrated in the following snippet:

          my.chartDisplay.openDialog(my.team);
        });

How it works…

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});
  };

See also

  • 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.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.14.129.59