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

[Joanne Quan 2]

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

[David Beagan]

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

[Joanne Quan 2]

Hi David,

Thank you for your suggestion. Unfortunately, the header doesnt wrap when the browser size gets smaller.

The Verdana font doesnt have any of the issues I listed earlier, so Ive decided to use this font to solve my problem.

Joanne