# Advanced View: Custom charts

**URL:** <https://discuss.workflowgen.com/t/advanced-view-custom-charts/443>\
**Category:** Workflow Portal\
**Created:** [April 23, 2015, 8:50pm UTC](https://discuss.workflowgen.com/t/advanced-view-custom-charts/443 "2015-04-23T20:50:50Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![wfg-admin](https://yyz2.discourse-cdn.com/flex030/user_avatar/discuss.workflowgen.com/wfg-admin/32/714_2.png) [@wfg-admin](https://discuss.workflowgen.com/u/wfg-admin)\
**Post date:** [April 23, 2015, 8:50pm UTC](https://discuss.workflowgen.com/t/advanced-view-custom-charts/443/1 "2015-04-23T20:50:50Z")

</div>

### 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:

- `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&nbsp;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&nbsp;containing all of the grid data. The JSON&nbsp;is sorted by group name and can contain the following values:

- `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

 ![Timeline_grid](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/860444bf8a76fae1ddfd91bb44a9edf24e978f13.png)

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.

```auto
$.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

![custom-charts-2](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/9e3094e479c18e6f77e007689cdfee6fd46e5d05.png)

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

 ![gauge_grid](https://canada1.discourse-cdn.com/flex030/uploads/workflowgen/original/1X/cb6d674cd250700132e5ccaa2fcbb7a66aa2236b.png)

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.

```auto
$.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**

```auto
// This example writes a text string on the div

chartContainer.innerHTML = "Test!";

```

**grid.getGroups()**

```auto
// 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)**

```auto
// 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()**

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

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

```