CT2000 Copy/Paste Content for Guided Demos and Exercises

Module 4

continentParam

["[Geo].[Africa]", "[Geo].[Asia]", "[Geo].[Australia]", "[Geo].[Europe]", "[Geo].[North

scatterChart Pre Execution

function f() {

// Show Chart

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() != "Capacity Factor" ){

return false;

barChart Pre Execution

function f() {

// Show Chart

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() == "Capacity Factor" ){

return false;

kpiTable Pre Execution

//Define message empty table

var component = this.chartDefinition;

component.oLanguage = {

"sEmptyTable": "No data available."

};

//set trendArrow Addin to include value

this.setAddInOptions("colType","trendArrow",function(state){

return {

includeValue: true

};

});

// Format KPi to decimal or percentage

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() == "Capacity Factor" ){

this.chartDefinition.colFormats = ["%.2f%", "%.2f%"];

}else{

this.chartDefinition.colFormats = ["%.2f", "%.2f%"];

}
 this.chartDefinition.colHeaders = undefined;

top3CountriesTable Pre Execution

function f(){

//Define message empty table

var component = this.chartDefinition;

component.oLanguage = {

"sEmptyTable": "No data available."

};

//set trendArrow Addin to include value

this.setAddInOptions("colType","trendArrow",function(state){

return {

includeValue: true

};

});

// Format KPi to decimal or percentage

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() == "Capacity Factor" ){

this.chartDefinition.colFormats = ["%s", "%.2f%", "%.2f%"];

}else{
 this.chartDefinition.colFormats = ["%s", "%.2f", "%.2f%"];

this.chartDefinition.colHeaders = undefined;

customize scatterChart Pre Execution

//Chart definition

$.extend(true,

this.chartDefinition,

dashboardJS.configurations.charts,

dashboardJS.configurations.charts.scatterPlot);

//Define Custom Tooltip

pvc.ext.detTooltip().plotMappings({

"scatter": {

series: "series",

measures: ["x", "y", "color", "size"]

}).install(this.chartDefinition);

postInit function

dashboard.postInit = function() {

//Resize charts

var chartsTypeToUpdate = ['CccMetricDotChartComponent', 'CccBarChartComponent'];

var chartsToUpdate = _.filter(dashboard.components, function(elem, index) {

});

var resizeChart = function() {

_.each(chartsToUpdate, function(elem, index) {

elem.chart.options.width = elem.placeholder().width();

elem.chart.render(true, true, false);

});

};

var throttle = _.throttle(resizeChart, 100, {

leading: false

});

$(document).ready(function() {

$(window).resize(throttle);

});

};

mapTitleText component

function f() {

//Set Map Title

var indicator = this.dashboard.getParameterValue("indicatorParam");

return indicator + " by Country";

}
technologyParam

["[Technology].[Total renewable energy].[Bioenergy]","[Technology].[Total renewable

yearParam

["[Year].[2014]"]

customize barChart Pre Execution

$.extend(true,

this.chartDefinition,

dashboardJS.configurations.charts,

dashboardJS.configurations.charts.barChart);

pvc.ext.detTooltip().install(this.chartDefinition);

//Set ortho Title, title changes according with indicator

if ( indicatorParam.toString() == "Generation Capacity (MW)" ){

this.chartDefinition.orthoAxisTitle = "Generation Capacity (MW)";

}else{

this.chartDefinition.orthoAxisTitle = "Electricity Generated (GWh)";

mapLegendText component

function f() {

var indicator = this.dashboard.getParameterValue("indicatorParam");

var legend = [];

if (indicator == "Capacity Factor"){

legend = ["1-20%", "21-50%", "51-100%"];

}else if (indicator == "Generation Capacity"){

legend = ["0-700", "701-2,000", "2,001-Max"];

}else{

legend = ["0-1,000", "1,001-3,000", "3,001-Max"];

return '<div class="sectionLegendWrapper pull-right clearfix">'+

'<div class="sectionLegendIntensity low pull-left">'+legend[0]+'</div>'+

'<div class="sectionLegendIntensity medium pull-left">'+legend[1]+'</div>'+

'<div class="sectionLegendIntensity high pull-left">'+legend[2]+'</div>'+

'</div>';

charTitleText

function f() {

//Set Chart Title and show or hide scatter legend

var indicator = this.dashboard.getParameterValue("indicatorParam");

if (indicator == "Capacity Factor"){

$('.chartLegend').show();

return "Generation Capacity vs Electricity Generated";

$('.chartLegend').hide();

return "Country Rank by " + indicator;

countryName

function f() {

//Set Country on Popup chart

var country = this.dashboard.getParameterValue("countryParam");

if(_.isUndefined(country)) return "";

country = country.split(".")[country.split(".").length-1].replace("]","").replace("[","");

return country + ' - Breakdown by Sub-Technology';

technologyBreakdownTitleText

function f() {

//Set Cards Title

var indicator = this.dashboard.getParameterValue("indicatorParam");

return indicator + " by Sub-Technology";

chartTitleText

function f() {

//Set Chart Title and show or hide scatter legend

if (indicator == "Capacity Factor"){

$('.chartLegend').show();

return "Generation Capacity vs Electricity Generated";

}else{

$('.chartLegend').hide();

return "Country Rank by " + indicator;

Module 5

scatterChart clickAction (1)

function f(event){

var helloMessage = "Hello";

alert(helloMessage);

scatterChart clickAction (2)

function f(event){

debugger;

var helloMessage = "Hello";

alert(helloMessage);

scatterChart clickAction (3)

// Render chart Popup

var country = event.atoms.series.value;

country = "[Geo].[Country].["+country+"]";

dashboard.fireChange("countryParam",country);

var chartElem = $("#attachPopUpCountry");

render_popUpByCountry.popup($(chartElem));

Module 6

top3CountriesTable Pre Execution for Flag Addin

//Define Addin Flag path

this.setAddInOptions("colType","flagAddin",function(state){

return {

imagesPath:
"/pentaho/api/repos${solution:../../../files/images/flags}/IMAGENAME.png/content"

};

});

Module 7

map Pre Execution for Color

function f(){

//Fill colour come in column 4, ID come incolumn 3 check query

this.visualRoles = {

id: 3,
 fill: 4

};

//Mapping the colour according the value come from query

this.attributeMapping.fill = function(context, seriesRoot, mapping, row) {

var colorBase = {

"A": "#F2C249",

"G": "#00845B",

"R": "#B71C1C"

};

var colour = row[mapping.fill];

return colorBase[colour];

};

map Additional Pre Execution for Markers// Map style definition

this.styleMap = {

markers: {

r: 5,

hover: {

'fill-opacity': 0.7,

'stroke-width': 1,
 'stroke': 'rgba(0,0,0,.2)',

'z-index': 2

},

normal:{

'fill-opacity': 0.7,

'stroke-width': 1,

'stroke': 'rgba(0,0,0,.2)'

},

};

map Additional Pre Execution for Zoom Level

//Define default zoom level

this.defaultZoomLevel = 2;

map Post Execution for Zoom Range

function f(){

/*Define max and min Zoom*/

this.mapEngine.map.isValidZoomLevel = function(z){

return z >= 2 && z <= 7;

};

Module 8

kpiCards Template
function() {

var template = '' +

'<div class="row cards">' +

'{{#items}}' +

'<div class="templateCard col-xs-3">' +

' <div>Tech: {{0}}</div>' +

' <div>SubTech: {{1}}</div>' +

' <div>Value: {{2}}</div>' +

' <div>Prev Year: {{3}}</div>' +

'</div>' +

'{{/items}}' +

'</div>';

return template;

Module 9

helloUserText

function f(){

//Set username on top of dashboard.

var myUser = this.dashboard.context.user;