Hi All,

I'm trying to format a heading using GRAPH FILE. The one line heading has three TEXT items. First one should be left justified, second centered and third right justified. What do I need to do? (This works with TABLE FILE).

Here's a CAR file example ...

GRAPH FILE CAR
HEADING
"LEFT<+0>CENTER<+0>RIGHT"
SUM DEALER_COST AS 'Dealer Cost'
COMPUTE MY_SERIES/A10 = COUNTRY;
COMPUTE MY_VALUE/A10  = FPRINT(DEALER_COST, 'D7', 'A10');
COMPUTE MY_PCT/A10    = '(' | (LJUST(8,FPRINT(PCT.DEALER_COST, 'P6.2%', 'A8'), 'A8') || ')');
BY COUNTRY AS 'Country'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET EMBEDHEADING ON
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=HEADING, LINE=1, OBJECT=TEXT, ITEM=1, WIDTH=2.250, JUSTIFY=LEFT,   BACKCOLOR=GREY, $
TYPE=HEADING, LINE=1, OBJECT=TEXT, ITEM=2, WIDTH=4.250, JUSTIFY=CENTER, BACKCOLOR=ORANGE, $
TYPE=HEADING, LINE=1, OBJECT=TEXT, ITEM=3, WIDTH=3.250, JUSTIFY=RIGHT,  BACKCOLOR=BLUE, $
TYPE=DATA, COLUMN=N1, BUCKET=color, $
TYPE=DATA, COLUMN=N2, BUCKET=measure, $
TYPE=DATA, COLUMN=N3, BUCKET=tooltip, $
TYPE=DATA, COLUMN=N4, BUCKET=tooltip, $
TYPE=DATA, COLUMN=N5, BUCKET=tooltip, $
*GRAPH_JS_FINAL
"series": [
	{"series": 'reset',
		"tooltip": '[b]{{tooltip1}}[/b]<br>{{tooltip2}} {{tooltip3}}'
	}
],
htmlToolTip: {
style: 'seriesFill',
snap: true,
}
*END

This message has been edited. Last edited by: FP Mod Chuck,

Hi jfr99

how did you create this fex? Did you use the text editor and copy the styling information in or did you use the GUI?

I used a text editor. No GUI was involved.

Another situation where understanding what can be achieved against what is created in the resulting HTML.

The EMBEDHEADING ON setting will mean that the heading does not interfere with the resultant height of the JSCHART within the browser window (and thereby cause scrollbars! ) This is good in many ways and is what folk generally want.

If you study the JSCHART manual, I doubt you will find anythng that allows you to seperate out the "title" (for that is what it is) using the GUI oor even hand coding it.

If you use developer tools to interrogate the output, you will see that the "Heading" is contained within a DIV and 3 SPAN tags. The DIV has a class of "title" and you could introduce some CSS of your own to affect the style of each of the SPAN tags using something like the following.

Note that I have not played too much with the central part of the "Heading" - I ought to leave you something to play with other than just the percentage widths of the span tags. The question is, can you understand why it achieves what it does? If not then perhaps a self study course on CSS/CSS3 might be a suggestion? If you trawl through posts on the forum looking for where CSS has been used to affect HTML output styles, you will see how useful that knowledge would be!

-* Place this at the top of your procedure
-HTMLFORM BEGIN
<style>
.title {width: 99%;}
div.title > span:first-child {width: 30%; float: left; text-align: left;}
div.title > span:last-child {width: 30%; float: right; text-align: right;}
div.title > span {width: 40%; text-align: center;}
</style>
-HTMLFORM END

T

This message has been edited. Last edited by: Tony A,

Hi Tony,

Thanks for your help!!!

I'm trying to duplicate graphs that were created using Highcharts with "out-of-the-box" webfocus functionality. I'm fairly new to the JSCHART format and while it's simple to create graphs ... It's sometimes challenging/frustrating to get the exact look/formatting that is desired.

Anyway ... Thanks again.

You're most welcome.

T