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,

Starting page 203 of following document may have your answer
Creating HTML5 Charts With WebFOCUS

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.

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,

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.

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

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.

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

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

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

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

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

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.


But, can we do that using InfoAssist? I have users who need to use IA.

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

Thanks Toby , Always great info.

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

Here's my final(?) result.



Thanks for all your input and the additional reading material.

Here's my final version! This is just a sample of my production version.

America!

This message has been edited. Last edited by: 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.