Focal Point
[SOLVED] Chart overflows its container

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/8417086586

February 28, 2017, 03:27 PM
Francis Mariani
[SOLVED] Chart overflows its container
I have a chart that overflows its container. The labels for the bars with the minimum and maximum values are placed outside the chart frame. below is a self-contained example. For illustrative purposes, I have background colours on the chart frame and I guess what is called the chart container. The issue occurs in JS Chart or regular versions. I ant to fix it in the JS Chart version. I tried setting the scale based on the minimum and maximum values in the chart, which will work, but if the measure amounts change, the labels may overflow again.

All ideas will be appreciated. Thanking you.

-SET &ECHO=ALL;

FILEDEF MASTER DISK hrollup2.mas
-RUN

-WRITE MASTER FILENAME=HROLLUP2, SUFFIX=FIX     , IOTYPE=STREAM, $
-WRITE MASTER   SEGMENT=HROLLUP2, SEGTYPE=S2, $
-WRITE MASTER     FIELDNAME=SORT_SEQ, ALIAS=E01, USAGE=I1, ACTUAL=A01, $
-WRITE MASTER     FIELDNAME=SHORT_NAME, ALIAS=E02, USAGE=A12, ACTUAL=A12, $
-WRITE MASTER     FIELDNAME=WEIGHT, ALIAS=E03, USAGE=D10.2, ACTUAL=A10, $

FILEDEF HROLLUP2 DISK HROLLUP2
-RUN

-WRITE HROLLUP2 1APPLES            5.08
-WRITE HROLLUP2 2BANANAS          75.99
-WRITE HROLLUP2 3CANTALOUPES       8.50
-WRITE HROLLUP2 4DATES             4.35
-WRITE HROLLUP2 5ELDERBERRIES      7.83
-WRITE HROLLUP2 6FIGS             21.88
-WRITE HROLLUP2 7GRAPES          -12.77

-* determine minimum and maximum values to ensure chart fits properly
TABLE FILE HROLLUP2
SUM
MIN.WEIGHT AS 'MIN_WEIGHT'
MAX.WEIGHT AS 'MAX_WEIGHT'

ON TABLE SET ASNAMES ON
ON TABLE HOLD AS HMINMAX
END
-RUN

-READFILE HMINMAX

-SET &MIN_WEIGHT = &MIN_WEIGHT - 10;
-SET &MAX_WEIGHT = &MAX_WEIGHT + 10;

-* create chart

ENGINE INT CACHE SET ON
-SET &WF_STYLE_UNITS='PIXELS';
-SET &WF_STYLE_HEIGHT='220.0';
-SET &WF_STYLE_WIDTH='470.0';

GRAPH FILE HROLLUP2
-* Originally created by Info Assist for Graph
SUM
WEIGHT AS 'Weight'
BY SORT_SEQ NOPRINT
BY SHORT_NAME AS 'Fruit'

-*ON GRAPH HOLD AS HOLD_CHART FORMAT HTMTABLE
ON GRAPH HOLD AS HOLD_CHART 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 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 2
ON GRAPH SET LOOKGRAPH HBAR
-*ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setScaleMin(getY1Axis(), &MIN_WEIGHT );
setScaleMax(getY1Axis(), &MAX_WEIGHT );
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT='Exposure Mix Distribution', $
*GRAPH_SCRIPT
setToolTipDisplay(false);
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getO1Title(),false);
setDisplay(getDataText(0), true);
setDisplay(getY1Title(),false);
setTextFormatPreset(getDataText(),30);
setDisplay(getDataText(),true);
setUseNegativeDataTextColor(true);
setColorMode(2);
setDisplay(getY1Label(),false);
setFontName(getO1Label(),"CALIBRI");
setFontSizeAbsolute(getO1Label(), true);
setFontSizeInPoints(getO1Label(), 10);
setPlaceResize(getO1Label(), 0);
setFontSizeAbsolute(getDataText(),true);
setAutofit(getDataText(),false);
setFontSizeInPoints(getDataText(),10);
setPlaceResize(getDataText(),0);
setFontName(getDataText(),"CALIBRI");
setTransparentFillColor(getFrame(),true);
setFrameAutoShade(false);
setTransparentFillColor(getFrameSide(),true);
setTransparentBorderColor(getFrameSide(),true);
setTransparentFillColor(getFrameBottom(),true);
setTransparentBorderColor(getFrameBottom(),true);
setDisplay(getY1MajorGrid(),false);
setPieTilt(0);
setPieDepth(0);
setDepthRadius(0);
setDepthAngle(0);
setFillColor(getFrame(),new Color(225,225,231));
setDisplay(getO1MajorGrid(),false);
setDataTextPosition(1);

*GRAPH_JS
fill: {color: 'silver' },
chartFrame: { fill: { color: 'yellow' } },
"mouseOverIndicator": {
  "enabled": true,
  "color": "rgba(255,255,255,0.3)",
  "marker": {"size": 0}
  },
  "riserBevel": "none"
,"yaxis": {
  "baseLineStyle": {"width": 2, "color": "rgb(120, 120, 120)"},
  "bodyLineStyle": {"width": 0, "color": "white"}
  }
,"xaxisOrdinal": {
  "bodyLineStyle": {"width": 0, "color": "white"}
  }
*END

ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
<title></title>
</head>
<body>
!IBI.FIL.HOLD_CHART;
</body>
</html>
-HTMLFORM END


Image to follow, the Amazon cloud is falling apart...

This message has been edited. Last edited by: Francis Mariani,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
February 28, 2017, 04:11 PM
MartinY
And what if you use something such as this:
-SET &ECHO=ALL;

FILEDEF MASTER DISK hrollup2.mas
-RUN

-WRITE MASTER FILENAME=HROLLUP2, SUFFIX=FIX     , IOTYPE=STREAM, $
-WRITE MASTER   SEGMENT=HROLLUP2, SEGTYPE=S2, $
-WRITE MASTER     FIELDNAME=SORT_SEQ, ALIAS=E01, USAGE=I1, ACTUAL=A01, $
-WRITE MASTER     FIELDNAME=SHORT_NAME, ALIAS=E02, USAGE=A12, ACTUAL=A12, $
-WRITE MASTER     FIELDNAME=WEIGHT, ALIAS=E03, USAGE=D10.2, ACTUAL=A10, $

FILEDEF HROLLUP2 DISK HROLLUP2
-RUN

-WRITE HROLLUP2 1APPLES            5.08
-WRITE HROLLUP2 2BANANAS          75.99
-WRITE HROLLUP2 3CANTALOUPES       8.50
-WRITE HROLLUP2 4DATES             4.35
-WRITE HROLLUP2 5ELDERBERRIES      7.83
-WRITE HROLLUP2 6FIGS             21.88
-WRITE HROLLUP2 7GRAPES          -12.77

-* determine minimum and maximum values to ensure chart fits properly
-DEFAULTH &MIN_WEIGHT = 0
-DEFAULTH &MAX_WEIGHT = 0
TABLE FILE HROLLUP2
SUM
MIN.WEIGHT/D10.2 AS 'MIN_WEIGHT'
MAX.WEIGHT/D10.2 AS 'MAX_WEIGHT'
ON TABLE SET ASNAMES ON
ON TABLE HOLD AS HMINMAX
END
-RUN

-READFILE HMINMAX

-SET &MINL = LENV(TRIMV('B', &MIN_WEIGHT, 12, ' ', 1, 'A12V'), 'I2');
-SET &MAXL = LENV(TRIMV('B', &MAX_WEIGHT, 12, ' ', 1, 'A12V'), 'I2');
-TYPE &MINL
-TYPE &MAXL

-SET &MIN_WEIGHT = &MIN_WEIGHT - 10 - &MINL;
-SET &MAX_WEIGHT = &MAX_WEIGHT + 10 + &MAXL;

-TYPE &MIN_WEIGHT
-TYPE &MAX_WEIGHT
-TYPE &MINL
-TYPE &MAXL

-* create chart
ENGINE INT CACHE SET ON
-SET &WF_STYLE_UNITS='PIXELS';
-SET &WF_STYLE_HEIGHT='220.0';
-SET &WF_STYLE_WIDTH='470.0';

GRAPH FILE HROLLUP2
-* Originally created by Info Assist for Graph
SUM
WEIGHT AS 'Weight'
BY SORT_SEQ NOPRINT
BY SHORT_NAME AS 'Fruit'

-*ON GRAPH HOLD AS HOLD_CHART FORMAT HTMTABLE
ON GRAPH HOLD AS HOLD_CHART 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 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 2
ON GRAPH SET LOOKGRAPH HBAR
-*ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setScaleMin(getY1Axis(), &MIN_WEIGHT );
setScaleMax(getY1Axis(), &MAX_WEIGHT );
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT='Exposure Mix Distribution', $
*GRAPH_SCRIPT
setToolTipDisplay(false);
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getO1Title(),false);
setDisplay(getDataText(0), true);
setDisplay(getY1Title(),false);
setTextFormatPreset(getDataText(),30);
setDisplay(getDataText(),true);
setUseNegativeDataTextColor(true);
setColorMode(2);
setDisplay(getY1Label(),false);
setFontName(getO1Label(),"CALIBRI");
setFontSizeAbsolute(getO1Label(), true);
setFontSizeInPoints(getO1Label(), 10);
setPlaceResize(getO1Label(), 0);
setFontSizeAbsolute(getDataText(),true);
setAutofit(getDataText(),false);
setFontSizeInPoints(getDataText(),10);
setPlaceResize(getDataText(),0);
setFontName(getDataText(),"CALIBRI");
setTransparentFillColor(getFrame(),true);
setFrameAutoShade(false);
setTransparentFillColor(getFrameSide(),true);
setTransparentBorderColor(getFrameSide(),true);
setTransparentFillColor(getFrameBottom(),true);
setTransparentBorderColor(getFrameBottom(),true);
setDisplay(getY1MajorGrid(),false);
setPieTilt(0);
setPieDepth(0);
setDepthRadius(0);
setDepthAngle(0);
setFillColor(getFrame(),new Color(225,225,231));
setDisplay(getO1MajorGrid(),false);
setDataTextPosition(1);

*GRAPH_JS
fill: {color: 'silver' },
chartFrame: { fill: { color: 'yellow' } },
"mouseOverIndicator": {
  "enabled": true,
  "color": "rgba(255,255,255,0.3)",
  "marker": {"size": 0}
  },
  "riserBevel": "none"
,"yaxis": {
  "baseLineStyle": {"width": 2, "color": "rgb(120, 120, 120)"},
  "bodyLineStyle": {"width": 0, "color": "white"}
  }
,"xaxisOrdinal": {
  "bodyLineStyle": {"width": 0, "color": "white"}
  }
*END

ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
<title></title>
</head>
<body>
!IBI.FIL.HOLD_CHART;
</body>
</html>
-HTMLFORM END

Similar to yours except that I also increased (decreased) the weight using the value length.


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
February 28, 2017, 04:31 PM
Francis Mariani
Merci Martin. Nice idea, but if I change the amounts, it doesn't work.

-WRITE HROLLUP2 1APPLES           10.56
-WRITE HROLLUP2 2BANANAS          70.86
-WRITE HROLLUP2 3CANTALOUPES     175.40
-WRITE HROLLUP2 4DATES             5.26
-WRITE HROLLUP2 5ELDERBERRIES      0.17
-WRITE HROLLUP2 6FIGS             20.26
-WRITE HROLLUP2 7GRAPES           -5.00


This seems to happen when the difference between the min and max is large, so maybe some other calculation for the extreme values will work...

This message has been edited. Last edited by: Francis Mariani,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
February 28, 2017, 05:19 PM
Francis Mariani
I seem to have found a solution, though I don't know why it works.

Perhaps it's new math, that I'm not exposed to.

-SET &MM_BUFFER = ( ABS(&MIN_WEIGHT) + ABS(&MAX_WEIGHT) ) / 4;
-SET &MIN_WEIGHT = &MIN_WEIGHT - &MM_BUFFER;
-SET &MAX_WEIGHT = &MAX_WEIGHT + &MM_BUFFER;



Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
February 28, 2017, 05:25 PM
Francis Mariani




Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
February 28, 2017, 11:53 PM
tomatosauce
Woah!!!! That background made my eyes go blind... JK


Tharun Katanguru
SBOX- 8205 DEV/TEST/PROD : 8105 8205
Linux, All Outputs
March 01, 2017, 11:27 AM
Francis Mariani
The background colours are for illustrative purposes - to identify the chart container and the chart frame.

Next time, wear sunglasses.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server