Advanced View: Custom charts

[wfg-admin]

How it works

The Custom charts feature lets you create customized charts with your data grid using JavaScript. You can create a chart with any chart library.

Note: To use this feature, custom chart editing must be enabled on the Portal tab in the Configuration panel in the Administration Module.

In Advanced view, click View chart, and choose Custom.

Data and objects

Enter your JavaScript code using the following variables:

• chartContainer: Draw your chart onto this div object.

• grid.getGroups(): This function returns a JSON containing a simplified version of the grid data. The JSON is sorted by group name and contains the following values:

  • count: This value indicates the number of rows contained in the group filter.

• aggregates: If a footer function is present, this array collection will contain the aggregate values of the group.

• subgroups: If defined, this object will contain a collection of JSON objects that represent the subgroups of the current group. The JSON objects will have identical objects to their parent.

grid.getGroups(true): This function returns the JSON containing all of the grid data. The JSON is sorted by group name and can contain the following values:

• subrows: This object returns an Array containing all the rows in the corresponding group. The row object is a JSON with values sorted by the column ID.

• subgroups: If defined, this object will contain a collection of JSON objects that represent the subgroups of the current group. The JSON objects will have identical objects to their parent.

grid.getRows(): This function returns an Array containing all of the rows in the grid from top to bottom.

Default column IDs

You can use these standard column IDs in your JavaScript code:

• Requester: requester

• Time limit: timeLimit

• Participant: participant

• Action: action

• Request #: requestNumber

• Created date: created

• Closed date: closed

Timetable chart example

The following is an example of code for a timetable chart made using the created date and the closed date of a request. This chart uses the Google Charts library.

$.getScript( "https://www.google.com/jsapi", function() {
 
      google.load("visualization", "1", {packages:["timeline"], callback : function(){

           try {
        
              var chart = new google.visualization.Timeline(chartContainer);
              var dataTable = new google.visualization.DataTable();
              var tabData = [];
        
              dataTable.addColumn({ type: 'string', id: 'Process' });
              dataTable.addColumn({ type: 'date', id: 'Created' });
              dataTable.addColumn({ type: 'date', id: 'Closed' });

              var rows = grid.getRows();

              for(var i = 0; i < rows.length; i++) {
                   tabData.push([rows[i].process + " #" + rows[i].requestNumber, rows[i].created, rows[i].closed]);
              }

              dataTable.addRows(tabData);

              chart.draw(dataTable);

           } catch(e) {
              alert(e);
           }

      }});

});

Gauge example

The gauge is made by first searching for open actions of a helpdesk process and filtering by Level 1 support type:

The following is an example of code for a gauge made using the percentage of open actions that are late. This gauge uses the Google Charts library.

$.getScript( "https://www.google.com/jsapi", function() {
    google.load("visualization", "1", {packages:["gauge"], callback : function(){
        try {
            // Set chart options
            var chart = new google.visualization.Gauge(chartContainer);
            var tabData = [];
            var options = {
            width: 400, height: 400,
            redFrom: 40, redTo: 100,
            yellowFrom:15, yellowTo: 40,
            minorTicks: 5
            };
 
            // Building data
            var rows = grid.getGroups(true)["2-Level 1 support handles the request"].subrows;
            var totalRows = 0;
            var totalRowsLate = 0;
            var today = new Date();
                    
            for(var i = 0; i < rows.length; i++) {
                totalRows++;
                if(typeof rows[i].timeLimit !== "undefined") {
                    if(rows[i].timeLimit < today) {
                        totalRowsLate++;
                    }
                }
            }
                    
            // Calculating the percentage
            var percentLate = (totalRowsLate/totalRows)*100;
            tabData.push(['Label', 'Value']);
            tabData.push(['%', percentLate.toFixed(2)/1]);
 
            // Drawing the chart
            var data = google.visualization.arrayToDataTable(tabData);
            chart.draw(data, options);
        } catch(e) {
            alert(e);
        }
    }});
});

JavaScript data and objects API reference

chartContainer

// This example writes a text string on the div

chartContainer.innerHTML = "Test!";

grid.getGroups()

// This example returns the count of the selected group

var simpleApprovalGroup = grid.getGroups()["SIMPLE_APPROVAL"];
var numOfRows = simpleApprovalGroup.count;

// If there is an aggregate, this example returns the aggregate value

var simpleApprovalGroup = grid.getGroups()["SIMPLE_APPROVAL"];
var sumValue = simpleApprovalGroup.aggregate[0];

// If there are subrows, this example returns the subrow object

var simpleApprovalGroup = grid.getGroups()["SIMPLE_APPROVAL"];
var numOfSubrows = simpleApprovalGroup.subgroups["APRIL"].count;

grid.getGroups(true)

// This example returns the request id of the first row in the group

var simpleApprovalGroupAdv = grid.getGroups(true)["SIMPLE_APPROVAL"];
var requestNumber = simpleApprovalGroupAdv.subrows[0].requestNumber;

grid.getRows()

// This example returns the created date in the 6th row

var createdDate = grid.getRows()[5].created;