[SOLVED] Overlapping Bars in a Chart and Background Colors!
How do we overlap the bars, similar to what is shown in the below image which was done in Excel? Ignore the circled percentages for now. I'm sure We can do that in WebFOCUS, right? Of course we can! With a little help from our friends .
Mock-up
Final Result
This message has been edited. Last edited by: Doug,
In FOCUS Since 1983 ~ from FOCUS to WebFOCUS. Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206
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
August 24, 2018, 04:06 PM
Doug
Thanks MartinY,
That should work, Now I need to add in the Percentages, to their specs, that I said to ignore for now. I just used the standard side-by-side bars for the amounts (series 0 and 1) with a line chart, with hidden lines, for the percentages as Axis 2 (series 2). The only thing needed is to set the background color of the series 2 to a light color, silver?, so the values don't get lost in the bars, similar to the above sample.
August 25, 2018, 12:39 AM
Doug
Here's my progress. Not sure how much better the overlapping bars would than this, standard cylinders.
Just need to set the background colors for the percentages.This message has been edited. Last edited by: Doug,
August 27, 2018, 08:15 AM
MartinY
Hi Doug,
I do suppose that you use the Data Text Labels for the % ?
I don't see any option to change the background color of the data text labels.
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
August 27, 2018, 08:35 AM
Doug
quote:
I do suppose that you use the Data Text Labels for the % ?
The % comes from the format of the field: COMPUTE YOY_PCT/I3%S=
quote:
I don't see any option to change the background color of the data text labels.
There's gotta be something for the background color. I'm hoping for it being in either the "*GRAPH_SCRIPT" or "*GRAPH_JS_FINAL" sections.
Thanks, Doug
August 27, 2018, 01:32 PM
MartinY
quote:
quote:I do suppose that you use the Data Text Labels for the % ? The % comes from the format of the field: COMPUTE YOY_PCT/I3%S=
What I wanted to say is that you hide the line but you display the data text labels to have the % show. Isn't it ?
As far as I can see in the HTML5 Graph doc (the one that I refer you previously) the backgroundColor option is not available as a property for the data text labels.
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
August 27, 2018, 05:34 PM
Doug
Yes, I 'hide' the lines so that only the data labels would show, as per my specs (image in my initial post)
So, not all I need it what's not yet available: the backgroundColor option as a property for the data text labels.
I sell a NFR on the way...
August 28, 2018, 05:01 AM
Tony A
Doug,
This can be achieved already using entries within *GRAPH_JS by setting specific values for a series marker.
All you have to do is RTFM wfjschart manual (around page 290 in version 8.0 release 09 which is the latest I have downloaded).
T
In FOCUS since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
WebFOCUS App Studio 8.2.06 standalone on Windows 10
August 28, 2018, 07:58 AM
Tony A
This can be achieved with this code -
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
DEFINE FILE GGSALES
YEAR/YY = DATE;
MNTH/Mt = DATE;
Y1_DOLLARS/D20.2=IF YEAR EQ 1996 THEN DOLLARS ELSE 0;
Y2_DOLLARS/D20.2=IF YEAR EQ 1997 AND MNTH LE 9 THEN DOLLARS ELSE 0;
END
GRAPH FILE ggsales
SUM GGSALES.SALES01.Y1_DOLLARS AS '1996'
GGSALES.SALES01.Y2_DOLLARS AS '1997'
COMPUTE PCENT/D6.2S MISSING ON=IF Y1_DOLLARS NE 0 AND Y2_DOLLARS NE 0 THEN ((Y2_DOLLARS-Y1_DOLLARS)/Y2_DOLLARS) ELSE MISSING; AS '% Diff'
BY GGSALES.SALES01.MNTH AS 'Month'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT ON
ON GRAPH SET GRWIDTH 1
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis(1), $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis(1), $
TYPE=DATA, COLUMN=N4, BUCKET=y-axis(2), $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setUseNegativeDataTextColor(true);
*END
*GRAPH_JS
blaProperties: {
barGroupGapWidth: 0.2
},
dataLabels: {
position: 'middle'
},
y2axis: {
title: {visible: false, text: '', color: 'white'},
labels: {visible: false},
numberFormat: {mode: 'percent', decimalPlaces: 1},
min: -1.2,
max: 1.2,
bodyLineStyle: {width: 0},
baseLineStyle: {width: 0},
majorGrid: {visible: false, ticks: {visible: false}}
},
series: [
{series: 2,
color: 'rgba(255,255,255,0)',
showDataValues: true,
dataLabels: {
numberFormat: {mode: 'percent', decimalPlaces: 1},
},
yAxisAssignment: 2,
riserShape: 'line',
marker: {
visible: true,
color: 'black',
position: 'middle',
size: 35,
shape: 'circle',
fillMode: 'seriesWhite',
-* border: {width: 2, color:'black'}
}}
]
*END
*GRAPH_JS_FINAL
"agnosticSettings": {
"dual": true,
"chartTypeFullName": "Bar_Clustered_Dual_Axis"
}
*END
ENDSTYLE
END
-RUN
T
In FOCUS since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
WebFOCUS App Studio 8.2.06 standalone on Windows 10
August 28, 2018, 11:18 AM
TobyMills
Wow Tony - thats impressive!
Doug - I still don't have my blackpond.com site set up for image so I'll just have to give a reference for changing the background color of the chart - I think this is what you need:
Formatting the Chart Frame Page 229 and 230 (notice the 'fill' color):
Example: Formatting the Chart Frame
The following request generates a chart frame whose fill color is antique white and whose border is a blue dashed line. It also generates a border that is a red dashed line with two different dash sizes that alternate around the border:
GRAPH FILE WF_RETAIL_LITE SUM COGS_US GROSS_PROFIT_US REVENUE_US DISCOUNT_US ACROSS PRODUCT_CATEGORY ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET LOOKGRAPH VBAR ON GRAPH SET STYLE * INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$ *GRAPH_JS title: {visible:true, text:"Blue Frame and Red Border", color:'green', font:'bold 14pt Sans-Serif'}, chartFrame: { fill: { color: 'antiquewhite' }, border: { width: 2, color: 'blue', dash: '2 2' } },
But, can we do that using InfoAssist? I have users who need to use IA.This message has been edited. Last edited by: Doug,
August 28, 2018, 11:59 AM
Doug
Thanks Toby , Always great info.This message has been edited. Last edited by: Doug,
August 28, 2018, 04:17 PM
Doug
Here's my final(?) result.
Thanks for all your input and the additional reading material.
October 05, 2018, 09:49 AM
Doug
Here's my final version! This is just a sample of my production version.
America!
This message has been edited. Last edited by: Doug,
October 05, 2018, 05:21 PM
Doug
While that last image looks really good, imho, there is an issue in the real world as seen below:
Note that the yellow bars are mostly hidden behind the orange bars when the orange value exceeds the yellow values. The gray bar is a sum of the orange and yellow bars, so they will never exceed that gray value (in my case.
So, let's say that the 'internal bars' are 5% narrower than the bars behind them, I need that to be 20% instead of 5%... and what needs to be done to make that happen.
PS: This needs to be maintainable using InfoAssist. But, I have already added code in the "*GRAPH_JS_FINAL" section and it sill opens in IA. So, I'm open to more of that type of reply / code.