Hi All,

I have a tree map (i.e taking Car file) having group on country and car , when i do tool tip on car section it shows correct numbers but on Country (Header Group) it sum all the % values ,

 ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM COMPUTE Compute_1/D12.2=100 * ( ( CAR.BODY.RETAIL_COST - CAR.BODY.DEALER_COST )/CAR.BODY.DEALER_COST ) ; AS 'var %'
BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH TREEMAP
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setDataTextDisplay(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=detail, $
TYPE=DATA, COLUMN=N2, BUCKET=detail, $
TYPE=DATA, COLUMN=N3, BUCKET=size, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"agnosticSettings": {
    "chartTypeFullName": "Treemap"
}
*END
ENDSTYLE
END
-RUN 

I.e . For England Tree map shows 58.4 but we needed 19.72

This message has been edited. Last edited by: FP Mod Chuck,

Chaudhary

When I run this I don't see any values for anything pop up but I don't have your stylesheet... I changed it to a TABLE request and added ON COUNTRY RECOMPUTE and the value for ENGLAND displayed the value you were hoping for so you might add that line to your code..

@Chuck
You don't need the style sheet to have the graph to work. Just remove it.

RECOMPUTE is not applicable to a gragh. It has no effect. At least not for a treemap graph.



I think that it is not possible to have access to upper group total (COUNTRY) from a treemap.
I have not been able to find anything in doc.

quote:

RECOMPUTE is not applicable to a gragh. It has no effect. At least not for a treemap graph.



I think that it is not possible to have access to upper group total (COUNTRY) from a treemap.
I have not been able to find anything in doc.

Hi Martin,

I also did not get anything in doc to handle this. even I also tried recompute in graph(ideally dose not support) that also does not work.

I haven't done a lot with tree maps but I don't see any values when I hover over the different objects so I don't understand where you are seeing 58.4 vs 19.72 for England.

@ of you will run this sample code you will get a main header group for country and than having cars in it.. so please do hover over on main group than you will get that 58.** value.

Chaudhary

Since RECOMPUTE doesn't work for charts I'm not sure how to get the right value in there, maybe you need to open a case for this.

TreeMaps display hierarchial (tree-structured) data as a set of rectangles.

Each branch of the tree is given a rectangle, which then tiled with smaller rectangles representing the branches.

A rectangle has an area in proportion to a specified dimension.

So, even if you could override the internal calculation result within the rectangle headers, I'm not sure you would want to.

For things like 'giving a visualization of the variance between two numbers within Country and Car' a TreeMap might be a good fit.

For this we usually display two measures, variance (rectangle area) and variance % (rectangle color).

For example:

-*
-* Data extract/preparation.
-*
TABLE FILE CAR
SUM
 COMPUTE VARIANCE/D12.2C       = (RETAIL_COST - DEALER_COST ) ;
 COMPUTE VARIANCEPERCENT/D12.2 = 100 * ((RETAIL_COST - DEALER_COST ) / DEALER_COST );
BY COUNTRY
BY CAR
ON TABLE HOLD AS HLDVARCE
END
-RUN
-*
-* Create HTML5 Chart for User.
-*
GRAPH FILE HLDVARCE
SUM
  VARIANCE AS 'Variance'
  VARIANCEPERCENT AS 'Variance %'
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 *
 INCLUDE = myTreeMapStyle, $
ENDSTYLE
END 

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

When using a tree map chart, I prefer to use Google Charts. It is really nice as you can left click on a section and drill into it or right click and drill out, not to mention the ability to customize your tooltip to whatever you would like.

Below is an example using the car file with an additional MODEL field to better demonstrate the ability to drill in.

  
DEFINE FILE CAR
ROW_BEGIN/A1='[';
COMMA/A2=', ';
QUOT/A1 = '''';
ROW_END/A2='],';
END

-* LEVEL1: GLOBAL
TABLE FILE CAR
SUM
	ROW_BEGIN
	COMPUTE LEVEL/A8 = QUOT || 'GLOBAL' || QUOT ;
	COMMA
	COMPUTE PARENT/A4 = 'null';
	COMMA
	COMPUTE VARIANCE/D12.2C = (RETAIL_COST - DEALER_COST ) ; 
	COMMA
	COMPUTE VARIANCEPERCENT/D12.2 = 100 * ((RETAIL_COST - DEALER_COST ) / DEALER_COST ); 
	ROW_END
ON TABLE HOLD AS HOLD_LEVEL1 FORMAT ALPHA
END
-RUN

-* LEVEL2: COUNTRY
TABLE FILE CAR
SUM
	ROW_BEGIN
	COMPUTE LEVEL/A12 = QUOT || CAR.ORIGIN.COUNTRY || QUOT;
	COMMA
	COMPUTE PARENT/A8 = QUOT || 'GLOBAL' || QUOT;
	COMMA
	COMPUTE VARIANCE/D12.2C = (RETAIL_COST - DEALER_COST ) ; 
	COMMA
	COMPUTE VARIANCEPERCENT/D12.2 = 100 * ((RETAIL_COST - DEALER_COST ) / DEALER_COST ); 
	ROW_END
BY CAR.ORIGIN.COUNTRY NOPRINT
ON TABLE HOLD AS HOLD_LEVEL2 FORMAT ALPHA

END
-RUN

-* LEVEL3: CAR
TABLE FILE CAR
SUM
	ROW_BEGIN
	COMPUTE LEVEL/A18 = QUOT || CAR.COMP.CAR || QUOT;
	COMMA
	COMPUTE PARENT/A12 = QUOT || CAR.ORIGIN.COUNTRY || QUOT;
	COMMA
	COMPUTE VARIANCE/D12.2C = (RETAIL_COST - DEALER_COST ) ; 
	COMMA
	COMPUTE VARIANCEPERCENT/D12.2 = 100 * ((RETAIL_COST - DEALER_COST ) / DEALER_COST ); 
	ROW_END
BY CAR.ORIGIN.COUNTRY NOPRINT
BY CAR.COMP.CAR NOPRINT
ON TABLE HOLD AS HOLD_LEVEL3 FORMAT ALPHA

END
-RUN

-* LEVEL4: MODEL
TABLE FILE CAR
SUM
	ROW_BEGIN
	COMPUTE LEVEL/A26 = QUOT || CAR.CARREC.MODEL || QUOT;
	COMMA
	COMPUTE PARENT/A18 = QUOT || CAR.COMP.CAR || QUOT;
	COMMA
	COMPUTE VARIANCE/D12.2C = (RETAIL_COST - DEALER_COST ) ; 
	COMMA
	COMPUTE VARIANCEPERCENT/D12.2 = 100 * ((RETAIL_COST - DEALER_COST ) / DEALER_COST ); 
	ROW_END
BY CAR.ORIGIN.COUNTRY NOPRINT
BY CAR.COMP.CAR NOPRINT
BY CAR.CARREC.MODEL NOPRINT
ON TABLE HOLD AS HOLD_LEVEL4 FORMAT ALPHA

END
-RUN
 
-HTMLFORM BEGIN NOEVAL
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
                'packages': ['treemap']
            }
        );

        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Location', 'Parent', 'Variance (dollars)', 'Variance (percent)'], 
                !IBI.FIL.HOLD_LEVEL1;
                !IBI.FIL.HOLD_LEVEL2;
                !IBI.FIL.HOLD_LEVEL3;
                !IBI.FIL.HOLD_LEVEL4;
            ]);

            tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

            var options = {
                minColor: '#eff3ff',
                midColor: '#6baed6',
                maxColor: '#08519c',
                maxDepth: 2,
                headerHeight: 20,
                fontColor: 'black',
                showScale: true,
                generateTooltip: showFullTooltip
            };

            tree.draw(data, options);

            function showFullTooltip(row, size, value) {
                return '<div style="background:#fd9; padding:10px; border-style:solid">' 
                     + '<span style="font-family:Courier">[b]' + data.getValue(row, 0) + ':[/b]' 
                     + '<br> Variance Dollars: $' + data.getValue(row, 2) 
                     + '<br> Variance Percent: ' + data.getValue(row, 3) + '%' 
                     + '</span></div>'
            }
        }
    </script>
</head>

<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>