All I really want is to make the width of the horizontal bar wider to fill in the iFrame.

You can see, via the below links, what I'm talking about here. I have six stacked bars and one 4 row / wide report on my KPI page in the portal, So, the real estate is tight, as seen below. I am currently overlapping the bars as to maximize the real estate. But that's just a pain to maintain.

1) As seen in AppStudio: 
   * The iFrame is the only thing in this HTML/Document, 1000 wide by 100 tall.
   * I want the chart to fill the entire iFrame (orange area).
2) As seen in IE:
   * The chart should fill the yellow and orange areas wide the gray lines removed.

Images: As seen in AppStudio with addition of some colors, As seen in IE with addition of some colors, and The Portal Page.

Here's the code for the fex (Chart), created 100% in the GUI:

 -* File: IBFS:/Dev/WFC/Repository/Vendor/Doug/Chart1.fex Created by WebFOCUS AppStudio
-*IA_GRAPH_BEGIN
-*Do not delete or modify the comments below
*-INTERNAL_COMMENT *** I deleted this section for the sake of space in this post
-*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';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST AS ''
CAR.BODY.RETAIL_COST AS ''
CAR.BODY.DEALER_COST AS ''
CAR.BODY.RETAIL_COST AS ''
BY LOWEST 1 CAR.ORIGIN.COUNTRY AS '' NOPRINT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET EMBEDHEADING ON
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 BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(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=row, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N4, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N5, BUCKET=y-axis, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),false);
setDisplay(getO1Label(),false);
setDisplay(getY1Label(),false);
setDisplay(getY1AxisLine(),false);
setDisplay(getY1ZeroLine(),false);
setScaleMinAuto(getY1Axis(),false);
setScaleMaxAuto(getY1Axis(),false);
setScaleMax(getY1Axis(),166344.0);
setGridStepAuto(getY1MajorGrid(),false);
setScaleMustIncludeZero(getY1Axis(),false);
setDisplay(getDataText(),true);
setStackedDataValueSum(false);
setZeroValueDataTextStackedTotalOnTopDisplay(false);
setDataTextDisplay(true);
setPieFeelerTextDisplay(1);
setDataTextPosition(4);
setTransparentFillColor(getFrameSide(),true);
setTransparentBorderColor(getFrameSide(),true);
setTransparentFillColor(getFrameBottom(),true);
setTransparentBorderColor(getFrameBottom(),true);
setDepthAngle(0);
setDisplay(getO1AxisLine(),false);
setConnectLineMarkers(true);
setGridStep(getY1MajorGrid(),166344.0);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"blaProperties": {
    "seriesLayout": "stacked",
    "orientation": "horizontal"
},
"agnosticSettings": {
    "chartTypeFullName": "Bar_Stacked_Horizontal"
}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

Thanks in advance, Doug

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

Doug

Will you be using the portal to deploy this? If so the chart should adapt to the size of the panel inside the portal.

Doug,

The width of a bar in a JSCHART bar graph is largely governed by the barGroupGapWidth value. In the case of your procedure, adding a line in the *GRAPH_JS "blaProperties" section setting this value to 0:

"blaProperties": {
"seriesLayout": "stacked",
"orientation": "horizontal",
"barGroupGapWidth": 0
},

This should allow the bar to take up more of the space in the frame, and might get you closer to where you want to be.

Don Terrell
Information Builders Technical Support

Hi Doug,

I doubt that you will ever fill the orange area using a chart because of the axis requirements.

However, you could use the method from my presentation that I showed you at Summit in Dallas this year.

T

Thanks to all for your replies[/I].

Chuck, Yes this is used in a portal. The entire HTML page is one item with the bars in it. I can't use AutoSize in that I need to set "setScaleMax(getY1Axis(),166344.0);", where '166344' is the sum total to all bar segments.

Donal, I added that line of code and I get nothing but a blank screen. Would you try it with my original code and let us know if it works for you? It may be a system setting. Let us know if you change anything else to make it work.

Tony, Forgive me for not going there (using your proven techniques). After all, we know that We Can Do That In WebFOCUS!. I'll post the new code after I get it to work ( unless you beat me to it )

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

quote:

I added that line of code and I get nothing but a blank screen.

You probably forgot to end the previous line with a comma!

T

The code I tested with was the following:

-* File: IBFS:/Dev/WFC/Repository/Vendor/Doug/Chart1.fex Created by WebFOCUS AppStudio
-*IA_GRAPH_BEGIN
-*Do not delete or modify the comments below
*-INTERNAL_COMMENT *** I deleted this section for the sake of space in this post
-*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';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST AS ''
CAR.BODY.RETAIL_COST AS ''
CAR.BODY.DEALER_COST AS ''
CAR.BODY.RETAIL_COST AS ''
BY LOWEST 1 CAR.ORIGIN.COUNTRY AS '' NOPRINT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET EMBEDHEADING ON
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 BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(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=row, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N4, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N5, BUCKET=y-axis, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),false);
setDisplay(getO1Label(),false);
setDisplay(getY1Label(),false);
setDisplay(getY1AxisLine(),false);
setDisplay(getY1ZeroLine(),false);
setScaleMinAuto(getY1Axis(),false);
setScaleMaxAuto(getY1Axis(),false);
setScaleMax(getY1Axis(),166344.0);
setGridStepAuto(getY1MajorGrid(),false);
setScaleMustIncludeZero(getY1Axis(),false);
setDisplay(getDataText(),true);
setStackedDataValueSum(false);
setZeroValueDataTextStackedTotalOnTopDisplay(false);
setDataTextDisplay(true);
setPieFeelerTextDisplay(1);
setDataTextPosition(4);
setTransparentFillColor(getFrameSide(),true);
setTransparentBorderColor(getFrameSide(),true);
setTransparentFillColor(getFrameBottom(),true);
setTransparentBorderColor(getFrameBottom(),true);
setDepthAngle(0);
setDisplay(getO1AxisLine(),false);
setConnectLineMarkers(true);
setGridStep(getY1MajorGrid(),166344.0);
*GRAPH_JS_FINAL
"pieProperties": {
"holeSize": "0%"
},
"blaProperties": {
"seriesLayout": "stacked",
"orientation": "horizontal",
"barGroupGapWidth": 0
},
"agnosticSettings": {
"chartTypeFullName": "Bar_Stacked_Horizontal"
}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

This causes the bar to fill to the yellow area of your image. As Tony mentions, getting the graph into the orange is a bit of a different beast.

- Don

Thanks Guys...

quote:

You probably forgot to end the previous line with a comma!

Yeah... It's been a ruff week... [SOLVED]

How Are You Functioning With Inline Visualization?

Many reporting requirements can call for inline visualization to be applied on a row, but out-of-the-box visualization solutions may not suit the purpose. In this session, you'll find out how to harness Functions and JavaScript to meet that requirement now that HTML standards have progressed.

Download presentation

Thanks Tony, This is Great!