Here is a sample of code that I am trying to work with. GRAP...

[Sung Yu]

Here is a sample of code that I am trying to work with.

GRAPH FILE retail8205/WF_RETAIL_LITE

SUM COGS_US REVENUE_US

BY PRODUCT_CATEGORY

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET STYLE *

type=report, chart-series-layout=stacked,$

type=data, column=n1, bucket=x-axis,$

type=data, column=n2, bucket=y-axis,$

type=data, column=n3, bucket=y-axis,$

*GRAPH_JS

series: [

{series: 0, color: green,

tooltip: function(d,s,g){var c = this.getSeries(s).color;

var lbl = this.getSeries(s).label;

return '<span style=color: + c + '>value: + d + 'series: +

s + group: + g + series name: + lbl +; }

},

{series: 1, color: blue,

tooltip: function(d,s,g){var c = this.getSeries(s).color;

var lbl = this.getSeries(s).label;

var total = this.data[0][g][0] + this.data[1][g][0];

return <span style=color: + c + '>value: + d + out of +

total + series name: + lbl +;}}],

htmlToolTip: {snap: true, fill: #DDDDFF, border: {color: blue}}

ENDSTYLE

END

This javascript is for the tooltip for series 1 that finds the total. I am trying to use similar javascript to find the percentage of a series and use it as the data label instead of a tooltip. I do know that there is a macro auto_percentage or group_percentage but they are not working for me.

[David Beagan]

On page 112 of Creating HTML5 Charts With WebFOCUS Language there is a list of the template macros which shows both group_percent and series_percent. On page 117 is an example which I used to create this:

GRAPH FILE ibisamp/ggsales

SUM UNITS DOLLARS

BY CATEGORY

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET STYLE *

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$

TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $

TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $

*GRAPH_JS_FINAL

"dataLabels": {"visible":true,"formatCallback": null, "displayMode": null},

"series":[{"series": "reset",

"dataLabels":{"content":"{{value | formatNumber('$#,###')}} n({{series_percent}})"}}

],

*END

ENDSTYLE

END

 

Notice the use of n to make a new line in the label.

 

image.png1096725 28.7 KB

 

Or if you want the percentages to be calculated within each group then replace series_percent with group_percent:

 

image.png1102735 28.8 KB

[Sung Yu]

I found the example you mentioned in the document as well, but group_percent macro did not work.

When I use group_percent, the result comes out to be the value itself instead of the percentage of the value out of the group. For example, the data label will show 11000 as the value and 11000% as the percentage when group_percent is used. series_percent is working, but that is not the statistic that I need to show on the graph.

I would like to know how to use the javascript in my original post to do custom calculations for data labels if possible. I am also working on a donut pie chart where I would like to customize the total number in the middle of the donut pie vs. the data label.

[David Beagan]

Javascript custom calculations on datalabels seems to be more restricted than javascript with tooltips. The this.data[0][g][0] etc. do not provide values. The template macros, group_count, group_percent, etc. do not seem to be available to the javascript. Perhaps if you put in a case with the help desk they could tell you more. The following example has everything I could find for javascript datalabels.

GRAPH FILE ibisamp/ggsales

SUM UNITS

DOLLARS

BY REGION

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$

type=data, column=UNITS, bucket=y-axis,$

type=data, column=DOLLARS, bucket=y-axis,$

type=data, column=n1, bucket=x-axis,$

*GRAPH_JS

"series": [ { "series": "reset",

"dataLabels": {

"visible": true,

"position": "top",

"font": ".9em Sans-Serif",

"content": function(d, s, g, n) {

var col = this.getSeries(s).color;

var lbl = this.getSeries(s).label;

var ttl = this.data[0][g][0] + this.data[1][g][0];

return '<span style="color:' + col + '">' +

'<br>value: ' + d.y +

'<br>series: ' + s +

'<br>group: ' + g +

'<br>series name: ' + lbl +

'<br>no. of groups: ' + n.length +

'<br>total: ' + ttl + ' (doesn't work)' +

'</span>';

}

}

}

]

*END

ENDSTYLE

END