Carrier Dashboard

Setting CGG Chart values with postFetch ..

We're nearly there ..!

Another interactive feature we can add to the dashboard is the ability to Export the charts & tables.

So we're going to revisit exporting charts & tables as CGG output.

Dashboard vs. Export Visualization:

You can create different versions of chart visualizations for dashboard display versus export by using conditional code blocks in the postFetch function. The code checks for the presence of the CGG object to determine the context - if CGG is undefined, the code runs in the dashboard, otherwise it runs during export.

if ( typeof cgg == 'undefined' ){
  
// ... This block only runs in the dashboard ... 

 } else {
  
// ... This block only runs in CGG (export) ... 

}

// ... This block runs everywhere ... 

Handling Parameters in Exports:

Since CGG export scripts can't directly access CDE parameters or CDF functions like Dashboards.getParameterValue, you can pass these values through query parameters. This allows you to maintain rendering options based on parameter values during export. To implement this, add the parameter to the component parameters by either setting the 'arg' and 'value' properties directly, or by configuring them in the preExecution function.

For example, to append a date parameter value to a chart title, you would set:

arg: '_date' value: 'dateParam'

in the component Parameters property, or by doing the same but in preExecution function, using the following code:

var objParams = Dashboards.propertiesArrayToObject( this.parameters );

objParams['_date'] = 'dateParam';

this.parameters = Dashboards.objectToPropertiesArray( objParams ); 

Note we used the syntax _date (with an underscore prefix) to denote a query parameter that will not actually be used by the query, but that's just a personal preference.

After that we need to change the title in postFetch using the parameter value:

var titleDate = ( typeof cgg == 'undefined' ) ?
Dashboards.getParameterValue('dateParam') : params.get('_date');

this.chartDefinition.title = "Chart rendered on " + titleDate; 

Its obvious, the date value rendered in the export will be the one stored as a parameter when the component was executed and will not reflect any changes made to dateParam in the meantime.

lineChart

Let's give this a go ..

So .. we're going to add a postFetch script to lineChart when exported. The Chart definitions ensure the Chart correctly renders:

• width

• title

• legend alignment

• padding

Export lineChart

1. Edit: /Public/CTools Dashboard/Carrier-Dashboard-Expand/Layout ( providing you've completed all the workshops..!)

2. In the Components pane, click to expand the Charts group, and then click to select the lineChart.

3. Click Advanced Properties.

4. Specify the postFetch function

• Click the ellipsis icon to the right of the postFetch property.

1. Copy & paste the following:

function f(data){

    // This block only runs in CGG (export)
    if ( typeof cgg != 'undefined' ){
        
        // Change or set some chart properties to look differently from what we see on the dashboard       
        this.chartDefinition.width = 700;
        this.chartDefinition.title = "Number of Calls vs Number of Users";
        this.chartDefinition.titlePaddings = "10";
        
        this.chartDefinition.legendAlign = "center";
        this.chartDefinition.legendPosition = "bottom";
        this.chartDefinition.legendPaddings = "15 5";
        this.chartDefinition.legendItemPadding = "10";
        
        this.chartDefinition.baseAxisOverlappedLabelsMode = "leave";
        
    }
  
}

1. Save the dashboard.

2. Check the visualization differences between the lineChart component displayed in the dashboard and the exported chart image:

• Click on the Number of Calls vs Number of Users Export link.

• Click on the Export PNG popup option.

• Check the preview of the lineChart export

Notice the layout differences:

− there is a title on the top

− the legend is now bottom & centred

− the baseAxis labels are visible.

Export Chart

Second Tab