Focal Point
[SOLVED] Overlapping Bars in a Chart and Background Colors!

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

August 24, 2018, 02:00 PM
Doug
[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 Smiler.


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
August 24, 2018, 02:24 PM
MartinY
Starting page 203 of following document may have your answer
Creating HTML5 Charts With WebFOCUS


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. Frowner

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 Smiler 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:

Creating HTML5 Charts With WebFOCUS Language Release 8.2 Version 01M

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'
}
},

border: {
width: 4,
color: 'red',
dash: '2 4 4 2'
},
*END
ENDSTYLE
END

I'm not very good with the charts. Hope that helps!

Toby
August 28, 2018, 11:46 AM
Tony A
quote:
thats impressive!


Thanks Toby, but it's only using what is within the manual. As always, it's just a case of locating the syntax that achieves what you need!

Anyone who looks at the manual (even the old 8.0.09 version!) should be able to acheive the same.

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:57 AM
Doug
Awesome as usual Tony ! Just RTFMD: Read The FOCUS Manual Doug...

Just saying We can do that in WebFOCUS! Just gotta know how, where to look, or who to ask.
Good One

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. Smiler
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.