Hey all,

So, I've spent more time than I would of liked to trying to figure out how I can conditionally format the color of the data labels for each series/group intersection on a calendar-like heatmap for a given metric. I'm not sure if there is a specific GRAPH_JS JSON object setup that I could use to do this, or if simply adding something like

TYPE=DATA, COLUMN=N3, COLOR='WHITE', BACKCOLOR='RED', WHEN=N3 LT 1900, $

should work (which it doesn't).

Anyone have any ideas as to why the above doesn't work, or how I would go about getting the data labels that show up to be colored conditionally based on their value?

I've searched the docs and the forums. I've found things that are close, but not quite what I'm looking for for my scenario (GRMULTIGRAPH 1).

Any help is much appreciated!

Here is my code thus far:

-SET &FY = '2016';
-SET &MO = 9;
-SET &DSACCTNO = '10982';

-*IA_GRAPH_BEGIN
-*Do not delete or modify the comments below
-* Took this out for readability.
-*Do not delete or modify the comments above
ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
DEFINE FILE bi_factscashierqtrhour_vw
WEEKOFYEAR1/A11 = EDIT(WEEKOFYEAR);
WKOFYR/A2 = EDIT(WEEKOFYEAR1, '$$$$$$$$$99');
END
GRAPH FILE bi_factscashierqtrhour_vw
SUM BI_FACTSCASHIERQTRHOUR_VW.BI_FACTSCASHIERQTRHOUR_VW.FCQMEMBERTRANSACTIONS
BY BI_FACTSCASHIERQTRHOUR_VW.DIMDATE.MONTHNAME NOPRINT
BY WKOFYR
ACROSS BI_FACTSCASHIERQTRHOUR_VW.DIMDATE.WEEKDAYNAME COLUMNS 'Sunday' AND 'Monday' AND 'Tuesday' AND 'Wednesday' AND 'Thursday' AND 'Friday' AND 'Saturday'
WHERE BI_FACTSCASHIERQTRHOUR_VW.DIMDATE.MO EQ '&MO.EVAL';
WHERE BI_FACTSCASHIERQTRHOUR_VW.DIMDATE.FISCALYEAR EQ '&FY.EVAL';
WHERE BI_FACTSCASHIERQTRHOUR_VW.DIMSTORE.DSACCTNO EQ '&DSACCTNO.EVAL';
HEADING
"Member Transactions for <BI_FACTSCASHIERQTRHOUR_VW.DIMDATE.MONTHNAME"
"for <BI_FACTSCASHIERQTRHOUR_VW.DIMSTORE.DSNAME"
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 1
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 2
ON GRAPH SET LOOKGRAPH SPECTRAL
-*ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setDataTextPosition(4);
setTitleString("");
setDisplay(getO1Title(),false);
setTextRotation(getO1Label(),0);
setTextRotation(getY1Label(),0);
setDisplay(getY1Label(),true);
setDisplay(getO1Label(),true);
setDisplay(getO2Label(),false);
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),true);
setLegendPosition(2);
setDataTextDisplay(true);
setDisplay(getO1MajorGrid(),true);
setDisplay(getY1MajorGrid(),true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=HEADING, JUSTIFY=CENTER, FONT='Trebuchet MS', SIZE=10, COLOR=RGB(66 70 73), STYLE=BOLD, $
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $

-* Doesn't want to work with this type of graph for some reason:
-*TYPE=DATA, COLUMN=N3, COLOR='WHITE', BACKCOLOR='RED', WHEN=N3 LT 1900, $

DEFMACRO=Condition_1, MACTYPE=RULE, WHEN=N3 GE 1900, $
DEFMACRO=Condition_2, MACTYPE=RULE, WHEN=N3 LT 10, $

TYPE=DATA, ACROSSCOLUMN=N1,
-*     MACRO=Condition_1,
	 TARGET='_blank',
     DRILLMENUITEM='Weekly',
	 FOCEXEC=IBFS:/WFC/Repository/folderPath/test_heatmap_wkly.fex(WF_STYLE_WIDTH=&WF_STYLE_WIDTH.EVAL WF_STYLE_HEIGHT=&WF_STYLE_HEIGHT.EVAL L_COLOR='#A1CBE6' D_COLOR='#498BB6' FY=&FY.EVAL MO=&MO.EVAL WKOFYR=N2 DSACCTNO=&DSACCTNO.EVAL),
	 DRILLMENUITEM='Google',
     URL=http://www.google.com,
$
TYPE=DATA, ACROSSCOLUMN=N1,
     MACRO=Condition_2,
	 TARGET='_blank',
-* Setting COLOR and BACKCOLOR doesn't work for some reason:
-*	 COLOR=RGB(77 196 136),
-*	 BACKCOLOR=RGB(145 53 230),
     URL=http://www.google.com?(METRIC=FCQMEMBERTRANSACTIONS),
$

*GRAPH_JS
yaxis: {mode: 'color', colorScale: {colors: ['#B7DAB9', '#5AA05F'] }},
"mouseOverIndicator": {"enabled": true, "color": "#DCDCDC", "marker":{"size": 0}},
series: [{series: 'reset', tooltip: function(d, s, g) {
                       
                       return 'Cal. Week: ' + this.getSeries(s).label + '<br>' + 'Member Transactions: ' + d;}}],
-*					   + '<br>'
-*					   + 'Series: ' + s + '<br>'
-*                     + 'Group: ' + g;}}],
htmlToolTip: { snap: false, fill: '#F0E68C', border: {color: '#FFD700'}}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

C'mon CG, you should know that people are more likely to jump in when you give an example using one of the sample files! It means we don't have to second guess your data!

T

To give you something to try and expand upon -

dataLabels: {
	visible: true,
	position: 'center',  
	font: '9pt Arial',
	formatCallback: function(d) {
      if (d.value < 1900) {
        return 'red: '+d.value;
      } else {
        return 'blue: '+d.value;
      }
    }
},

I've used the older, longhand version of the IF statement for ease of understanding by all.


T

Tony A,

Thank you for your replies and sample code. I am sorry I didn't utilize the sample CAR file or others to replicate my scenario and issue. I will try to get that created here shortly and post it if that would help everyone.

As for your code sample, I tried it and it doesn't do anything. All the data labels stay the same/just display the data (d) only without the red or blue text additions. That is what is so frustrating. No matter if I use an official method to get this done or not, nothing applies or changes. Is my syntax off any?:

*GRAPH_JS
yaxis: {mode: 'color', colorScale: {colors: ['#B7DAB9', '#5AA05F'] }},
"mouseOverIndicator": {"enabled": true, "color": "#DCDCDC", "marker":{"size": 0}},
series: [{series: 'reset', tooltip: function(d, s, g) { return 'Cal. Week: ' + this.getSeries(s).label + '<br>' + 'Member Transactions: ' + d;}}],
dataLabels: {
	visible: true,
	position: 'center',
	font: '9pt Arial',
	formatCallback: function(d) {
      if (d.value < 1900) {
        return 'red: '+d.value;
      } else {
        return 'blue: '+d.value;
      }
    }
},
htmlToolTip: { snap: false, fill: '#F0E68C', border: {color: '#FFD700'}}
*END

Closest I could get to what I think your data may look like -

-SET &FY = '1996';
-SET &MO = '09';
-SET &DSACCTNO = '10982';
 
ENGINE INT CACHE SET ON
-DEFAULTH &WF_TITLE='WebFOCUS Report';
 
DEFINE FILE ggsales
MONTHNAME/Mt = DATE;
WEEKOFYEAR/W = DATE;
MO_M/M = DATE;
MO/A2 = FPRINT(MO_M,'I2L','A2');
WEEKDAYNAME/A10 = LCWORD(10,DOWKL(DATE,'A10'),'A10');
FISCALYEAR/YY = DATE;
WKOFYR/A2 = FPRINT(WEEKOFYEAR, 'W', 'A2');
END
 
GRAPH FILE ggsales
SUM COMPUTE FCQMEMBERTRANSACTIONS/D12 = INT(DOLLARS/1000);
BY WKOFYR
ACROSS WEEKDAYNAME COLUMNS 'Sunday' AND 'Monday' AND 'Tuesday' AND 'Wednesday' AND 'Thursday' AND 'Friday' AND 'Saturday'
WHERE FISCALYEAR EQ '&FY.EVAL';
HEADING
"Member Transactions for <MONTHNAME"
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 1
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SPECTRAL
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setDataTextPosition(4);
setTitleString("");
setDisplay(getO1Title(),false);
setTextRotation(getO1Label(),0);
setTextRotation(getY1Label(),0);
setDisplay(getY1Label(),true);
setDisplay(getO1Label(),true);
setDisplay(getO2Label(),false);
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),true);
setLegendPosition(2);
setDataTextDisplay(true);
setDisplay(getO1MajorGrid(),true);
setDisplay(getY1MajorGrid(),true);
*END
-*INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=HEADING, JUSTIFY=CENTER, FONT='Trebuchet MS', SIZE=10, COLOR=RGB(66 70 73), STYLE=BOLD, $
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_JS
yaxis: {mode: 'color', colorScale: {colors: ['#B7DAB9', '#5AA05F'] }},
"mouseOverIndicator": {"enabled": true, "color": "#DCDCDC", "marker":{"size": 0}},
series: [{series: 'reset', tooltip: function(d, s, g) {
                       
                       return 'Cal. Week: ' + this.getSeries(s).label + '<br>' + 'Member Transactions: ' + d;}}],
-*					   + '<br>'
-*					   + 'Series: ' + s + '<br>'
-*                     + 'Group: ' + g;}}],
dataLabels: {
	visible: true,
	displayMode: 'z',  
	position: 'center',  
	font: '9pt Arial',
	formatCallback: function(d) {
      if (d.value < 1900) {
        return '<font color=red>'+d.value+'</font>';
      } else {
        return '<font color=blue>'+d.value+'</font>';
      }
    }
},
htmlToolTip: { snap: false, fill: '#F0E68C', border: {color: '#FFD700'}}
*END
ENDSTYLE
END
-RUN

T

Comes out like this -


T

Tony, you're the best.

Thank you for you working code sample.

I tried reworking my existing code to your sample code that works and for some reason I get the following error in HTML:

ERROR
----------
TypeError: Cannot read property 'value' of undefined

Not sure what it refers to. I'm guessing the value of d? I checked the source and am getting no errors anywhere. I will try to dig into replicating my need against your working code, see where things bust along the way, and then let you and others know if I find anything new.

Thanks again for your help with this and patience with me as I figure this out.