Hi All,

I'm trying to rotate the data text to 90deg. It's not working. Can anyone please help me on this?

-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
CAR.BODY.RETAIL_COST
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
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);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getDataText(), true);
setTextRotation(getDataText(),1);

*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"blaProperties": {
    "seriesLayout": "percent"
},
"agnosticSettings": {
    "chartTypeFullName": "Bar_Percent"
}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

Thanks,
Dinesh

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

Is that what you're looking for ?

-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
SUM CAR.BODY.DEALER_COST
    CAR.BODY.RETAIL_COST
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
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);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getDataText(), true);
-*setTextRotation(getDataText(), 2);

-* 45 degre
-*setTextRotation(getO1Label(),3);
-* 90 degre
setTextRotation(getO1Label(),2);
-* 270 degre
-*setTextRotation(getO1Label(),1);


*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"blaProperties": {
    "seriesLayout": "percent"
},
"agnosticSettings": {
    "chartTypeFullName": "Bar_Percent"
}
*END
ENDSTYLE
END
-RUN

Not the x axis or y axis label. I'm looking for datatext rotation(numbers on the bar).

As per documentation, doesn't seems to be an option.

How to Show and Format Data Text Labels
"series":[
  {"series": s,
    "dataLabels": {
      "visible": boolean,
      "content": "string",
      "content": function(),
      "position": "string",
      "font": "string",
      "color": "string",
      "useNegativeColor": boolean,
      "negativeColor": "string",
      "numberFormat": "numformat",
      "feelerLine": {
        "visible": boolean,
        "width": number,
        "color": "string",
        "dash": "string"
      }
    }
  }
]

Thanks MartinY. Any workaround for this?

You could work around this with javascript in an -HTMLFORM block

  
-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
CAR.BODY.RETAIL_COST
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
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);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(true);
setDisplay(getDataText(), true);
setTextRotation(getDataText(),2);
setFontSizeInPoints(getDataText(),18);
setFillColor(getDataText(),new Color(255,255,255));
setDataTextPosition(4);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"blaProperties": {
    "seriesLayout": "percent"
},
"agnosticSettings": {
    "chartTypeFullName": "Bar_Percent"
}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

-HTMLFORM BEGIN NOEVAL
<head>
    <script src='https:cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
    <script>
         $(document).ready(function () {
             $(function(){
                 rotateLabels(); 
             });         
         });
         function rotateLabels(){
             var lbl = $("text[class^='dataLabels!s']");
             if (lbl == null) {
                 console.log("not loaded");
                 setTimeout("rotateLabels()", 400);
             } else {
                 $("text[class^='dataLabels!s']").css('writing-mode', 'vertical-lr');
             }
         }
    </script>
</head>
-HTMLFORM END

@Hallway the data in the bar are not rotated as requested by Dinesh, it may miss something somewhere.

My apologies. It works in Chrome and FireFox on my end... But I did forget to test using IE and Edge. Those both fail in rotating the text (go figure).

Yes, It’s not working in IE. In firefox or other browsers it’s working only on the initial load. If you resize the window(responsive) it will come back to it’s original position.

Anyway Thank you Hallway!! Appreciate your help!!

OK, I think that I have worked it out. Apparently when you use an HTMLFORM block on a chart, WebFOCUS puts the html code from that form block AFTER the closing html tag. Chrome and FF are smart enough to figure this out and still run the scripts. However this is a major hiccup for Microsoft browsers. So I changed the code to save the chart as a temp HOLD file and then put the HOLD file into a div element in the HTMLFORM block. This still caused errors in MSFT browsers because it still had duplicate head and body tags in the DOM (again Chrome and FF are smart enough to figure this out). So using jQuery, I was able to put the HOLD file into a temp div, extract out the div that contains the chart and put that into a different wrapper div and then delete out the temp div.

However, since that temp div was a complete html dom, the MSFT browsers fire off the ONLOAD event as soon as that hold file is loaded, before I could do the manipulation stated above. Chrome and FF wait until the entire page is loaded (after the manipulation stated above) before firing off the ONLOAD event. Because of this, I had to determine the browser being used and rotate the labels on the Document Ready event for MSFT browsers and rotate the labels on the window onLoad event for all other browsers.

I also added in the logic to keep the labels rotated when the window was resized.

Let me know if I missed anything.

-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
CAR.BODY.RETAIL_COST
BY CAR.COMP.CAR
-* ON GRAPH PCHOLD FORMAT JSCHART
-* Change to a hold file
ON GRAPH HOLD AS CHART FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
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);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(true);
setDisplay(getDataText(), true);
setTextRotation(getDataText(),2);
setFontSizeInPoints(getDataText(),18);
setFillColor(getDataText(),new Color(255,255,255));
setDataTextPosition(4);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"blaProperties": {
    "seriesLayout": "percent"
},
"agnosticSettings": {
    "chartTypeFullName": "Bar_Percent"
}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH


-HTMLFORM BEGIN NOEVAL
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data Label Rotation</title>
    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.18/ua-parser.min.js"></script>
</head>
<body>
    <div id="CHART_0_temp">
        !IBI.FIL.CHART;
    </div>
    <div id="CHART_0_wrapper">
    </div>
    <script>
        new UAParser();
        var browser = $.ua.browser;
        
        $.fn.rotateLabels = function() {
            $("text[class^='dataLabels!s']").attr('transform', function(i, origValue){
                return origValue + ' rotate(270)'
            });
        }

        $(document).ready(function () {
            $("#CHART_0_wrapper").prepend( $("div[id^='jschart_CHART_0']") );
            $("#CHART_0_temp").remove();
            if (browser.name == 'IE' || browser.name == 'Edge' ) {
                $.fn.rotateLabels();
            };
        });
        
        $(window).on('load', function () {
            if (browser.name !== 'IE') {
                $.fn.rotateLabels();
            } else if ( browser.name !== 'Edge' ){
                $.fn.rotateLabels();  
            };
        });

        $(window).resize(function(){
            $.fn.rotateLabels();
        });

    </script>
</body>
</html>
-HTMLFORM END

Now it's working good and very much appreciated.

Thanks again Hallway for the workaround.

I'm glad to help.