Pivot chart script not working

[rahuldhomane]

Hi ,

I am trying to manipulate the pivot chart font size, color and other aesthetic elements using one the script I found on the community posts. However, the script is not working as I am also trying to replace the cell values with 'Tick marks' and 'Cross'. I am not sure how to place this scripts together to make it work. I have attached the script  and screenshot of the widget for your reference.

--------------------------------------------------------------------------

const myTarget = {
type: ['value'],
values: [
{
title:[ 'Personal Face to Face','Direct','Personal Remote','Digital Pull','Digital Push','Peer Interaction'] // put here desired column
}
]
};

widget.transformPivot(myTarget, function(metadata, cell) {
if (cell.value == 1) {
cell.content = "✔";
}
else {
cell.content = "✖";
}
});

prism.jumpToDashboard(widget, { displayDashboardsPane:false, displayFilterPane :false});

/*widget.on("ready",function(w, args) {
var headerBgColor = '#a9aa40'; //Header background
var headerFontColor = '#F7F3F2'; //Header Font Color
var footBgColor = '#44546A'; // Pivot Foot (Totals)
var footFontColor = '#F2F3F2'; // Pivot Column (dims)
var colFontColor = '#5690a2';
// Style
var $jx = $(".p-grand-total-head,.p-dim-head,.p-dim-member-head,.p-measure-head", element);
$jx.css('font-size' , '12px');
$jx.css('font-weight' , 'bold');
$jx.css('color' , headerFontColor);
$jx.css('background-color' , headerBgColor);
$jx.css('text-align' , 'center');
$jx.css('vertical-align' , 'middle');
//center values and col
$(".p-value", element).css('text-align', 'center');
$(".p-dim-head", element).css('text-align', 'left');
// row totals
var $jx= $(".p-total-row-val,.p-total-row-head", element);
$jx.css('font-size' , '12px');
$jx.css('font-weight' , 'bold');
$jx.css('color' , footFontColor);
$jx.css('background-color' , footBgColor);
$jx.css('border-top', 'none');
// col
var $jx = $(".p-dim-member", element);
$jx.css('font-size' , '10px');
$jx.css('font-weight' , 'bold');
$jx.css('color' , colFontColor);
$jx.css('text-align' , 'left');
var $jx = $(".p-value", element);
$jx.css('font-size' , '10px');
// boarders
var $jx = $("[fidx]", element);
$jx.css('border-bottom', 'thin solid ' + colFontColor);
$jx.css('border-right', 'thin solid ' + colFontColor);
})*/

[rahuldhomane]

Hi @harikm007 ,

Can you please suggest a solution on this query?

Best,

Rahul

[harikm007]

Hi @rahuldhomane ,

I think you are using Pivot2 and script to change style is for Pivot.

Try below script:

const myTarget = {
type: ['value'],
values: [
{
title:[ 'Value1'] // put here desired column
}
]
};


widget.transformPivot(myTarget, function(metadata, cell) {
	
	if (cell.value <= 10) {
		cell.content = "✔";
		cell.style.color = 'green'
	}
	else {
		cell.content = "✖";
		cell.style.color = 'red'
	}
	
	cell.style.fontWeight = 'bold'
	cell.style.textAlign = 'center'
	cell.style.fontSize = '25px'
});

-Hari

[rahuldhomane]

Thanks @harikm007 , I am still facing 2 issues with the script:

1) The red and green color of the ticks and the crosses does not get reflected on refreshing the page, I have to go into the edit mode every time and then only the colors get applied

2)The script to change the font color, style is still not working for me. Please let me know if you have any other script that works for pivot 2.0.

Thanks for the help!

[rahuldhomane]

Hi @harikm007 ,

Did you get a chance to look into this request?

Thanks,

Rahul

[harikm007 · Accepted solution]

Hi @rahuldhomane ,

Try this script to change font color:

widget.on('ready', function(ev){
	$(".table-grid__row .table-grid__cell--data", element).each(function(){
		if($(this).text() =='✔')
			$(this).css('color', 'green')
		else
			$(this).css('color', 'red')
	
	})
})

-Hari