Jump to content
The ibi Community has moved to a new platform: Please Sign In and choose Forgot Password to continue

I have a graph where the heading gets cut off. This happens ...


Joanne Quan 2

Recommended Posts

I have a graph where the heading gets cut off. This happens when the heading is embedded and chart attributes are used. Im only seeing this happen in Chrome. The graph heading sometimes gets cut off even when there appears to be enough space for it. When I say it gets cut off, its actually wrapping to the next line but not enough vertical space has been allocated to the header to display both lines, so the wrapped portion appears to be cut off. Has anyone encountered this before

Some things I tried so far are:

 

Use ON GRAPH SET EMBEDHEADING OFF. This fixes the problem, but I want to embed the heading to prevent the vertical scrollbar from appearing, so this solution doesnt work well for me.

Use GRAPH_JS to create the title. The heading still gets cut off

Use different web-safe fonts. Fonts like sans-serif, Helvetica, Arial, etc. all produce this problem

Use non-breaking spaces in HTML. The heading still gets cut off

Remove the chart attributes. This fixes the problem, but I want to use chart attributes to create tooltips.

 

The following code produces the problem. In this example, the Admits gets cut off.

GRAPH FILE CAR

SUM SALES

BY COUNTRY

 

HEADING

"4-Year Within-Faculty Graduation Rate: Applied Sciences Admits"

 

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET EMBEDHEADING ON

ON GRAPH SET HTMLENCODE OFF

ON GRAPH SET LOOKGRAPH LINE

ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *

 

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

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

 

ENDSTYLE

END

Link to comment
Share on other sites

You could use an annotation.

GRAPH FILE CAR

SUM SALES

BY COUNTRY

HEADING

" "

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET EMBEDHEADING ON

ON GRAPH SET HTMLENCODE OFF

ON GRAPH SET LOOKGRAPH LINE

ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *

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

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

*GRAPH_JS

"annotations": [{

"position": { "x":"280px", "y": "5%" },

"label": { "visible":true, "text": "4-Year Within-Faculty Graduation Rate: Applied Sciences Admits",

"font":"14pt arial", "color":"gray", "style":"bold" }

}]

*END

ENDSTYLE

END

 

You can express the x and y positions in terms of px or %. By default the annotation overlays whatever part of the chart it is positioned on, so a blank heading space leaves room for it.

 

image.png873273 12.7 KB

 

Documentation

Creating HTML5 Charts With TIBCO WebFOCUS Language - Annotations on Charts

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
  • Create New...