Hello,

I have a request for a tree map chart that is to be conditionally colored based on whether or not one field is greater than or less than a certain static amount. Constructing the chart in InfoAssist and in App studio's chart builder, I see an option to color the chart based on the value of a field. The boxes on the tree map then color in a gradient from one color representing a lower value, to another color representing a higher value. What I'm looking for is that instead of the coloring being based on an additional field, have the boxes be one of two colors depending on whether or not the field used for size meet certain criteria. For instance, if gross sales is the field being used to determine the size of each box, if gross sales is greater than 0 for that grouping, color it green. Else color it red. Something like that. The person requesting wants to find a way to do this using the 8.2 App Studio GUI if possible. If not, I'd like to see a solution in code. I know it probably has to do something with one of those GRAPH_JS commands, but I haven't found the one that would give me what I'm looking for here. I tried using the "traffic light conditions" option in the UI, which I have gotten to work for conditional formatting for other chart types. It did not for the tree map, however.

Thanks,

Ben

This message has been edited. Last edited by: bkoehn,

Have you consider the WHEN statement in your style sheet?

...WHEN ThisValue GT ThatValue, COLOR=GREEN...
...WHEN ThisValue LE ThatValue, COLOR=RED...

Or something like that.

Thanks for the reply, Doug

When I add the WHEN= conditions to the stylesheet, it still doesn't override the color supplied by the colorScale property of the tree map. Referring to the 8.1 documentation at WebFOCUS Release 8.1 Version 05M > Charting > Creating HTML5 Charts With WebFOCUS Language > Special Topics > Defining a Color Scale (colorScale)

I want the boxes in the chart to be colored one color if one of the fields is greater than a certain amount, and I want them to be colored another if the value is less than that amount. If I don't use any field for the color bucket in the stylesheet, such as: TYPE=DATA, COLUMN=N2, BUCKET=color, $ the chart won't color at all, regardless of what color values I assign each series in the stylesheet. If I do, it takes a color gradient based on that field rather than separating it into 2 distinct colors.

This is the code for the stylesheet of my tree map:

ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setDataTextDisplay(true);
*END
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ARGRAPHENGINE=JSCHART, $
TYPE=DATA, COLUMN=N1, BUCKET=detail, $
TYPE=DATA, COLUMN=N3, BUCKET=size, $
TYPE=DATA, COLUMN=N3, WHEN=N3 GT 0, COLOR=RGB(255 0 0), HYPERLINK-COLOR=RGB(255 0 0), $
TYPE=DATA, COLUMN=N3, WHEN=N3 GT 0, COLOR=RGB(0 255 64), HYPERLINK-COLOR=RGB(0 255 64), $
TYPE=DATA, COLUMN=N2, WHEN=N3 GT 0, COLOR=RGB(255 0 0), HYPERLINK-COLOR=RGB(255 0 0), $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDataTextPosition(1);
setDisplay(getDataText(),true);
setDataTextDisplay(true);
setFillType(getSeries(*),1);
setTransparentFillColor(getSeries(*), true);
setTransparentBorderColor(getSeries(*), true);
setFillType(getSeries(0),1);
setFillType(getLegendArea(),1);
setTransparentFillColor(getSeries(0), true);
setTransparentFillColor(getLegendArea(),true);
setDisplay(getLegendArea(),true);
setBorderColor(getLegendArea(),new Color(0,0,0));
setTransparentBorderColor(getSeries(0), true);
*GRAPH_JS_FINAL
"legend": {
"visible": true
},
"pieProperties": {
"holeSize": "0%"
},
"agnosticSettings": {
"chartTypeFullName": "Treemap"
}

*END
ENDSTYLE

quote:

request for a tree map chart that is to be conditionally colored based on whether or not one field is greater than or less than a certain static amount.

-*
-* Data extract/preparation.
-*
SET PAGE = OFF
TABLE FILE CAR
SUM
 COMPUTE VARIANCE/D12.2C = (RETAIL_COST - DEALER_COST ) ;
 COMPUTE SALESFLAG/I1    = IF SALES GT 0 THEN 1 ELSE 0;
BY COUNTRY
BY CAR
ON TABLE HOLD AS HLDVARCE
END
-RUN
-*
-* Create visualization for user.  
-*
-*SET HAXIS=1500,VAXIS=640
GRAPH FILE HLDVARCE
SUM
  VARIANCE AS 'Variance'
  SALESFLAG AS '<!--'
BY COUNTRY
BY CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET LOOKGRAPH TREEMAP
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_JS
yaxis: {mode: 'color', colorScale: {colors: ["#e31a1c", "#33a02c"] }},
treemapProperties: {
  scaleCellFonts: true,
  header: {
   height: 35,
   fill: 'rgb(255, 255, 255)',
   border: {width: 1,color: 'black'},
   label: {visible: true, font: 'bold 12pt ARIAL',color: 'black'}
   }
},
legend: {
  visible: false
},
footnote: {
text: 
'<div><span style="background-color:#33a02c">&|nbsp; &|nbsp; &|nbsp;</span><span style="font-size:16px;">&|nbsp;Sales</span></div> \
<div><span style="background-color:#e31a1c">&|nbsp; &|nbsp; &|nbsp;</span><span style="font-size:16px;">&|nbsp;No Sales</span></div>',
visible: true,
align: 'center'
},
*END
ENDSTYLE
END
-RUN 

This message has been edited. Last edited by: David Briars,

Thanks for the help, David! This was exactly what I needed.