Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Graph Heading Question

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Graph Heading Question
 Login/Join
 
Platinum Member
posted
Hello

Below is sample code with CAR file. I am stuck at heading. I want the red backcolor of heading stretch from one end to other of the graph rather than just being behind the heading text. Is there a way to do it? Please suggest.
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.RETAIL_COST
BY CAR.ORIGIN.COUNTRY
HEADING
"Cost by Country"
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 700
ON GRAPH SET VAXIS 400
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=HEADING, JUSTIFY=CENTER, $
TYPE=HEADING, LINE=1, BACKCOLOR=RGB(255 0 0), $
TYPE=HEADING, LINE=1, ITEM=1, OBJECT=TEXT, FONT='COURIER', SIZE=12, COLOR=WHITE, STYLE=BOLD+ITALIC, $
ENDSTYLE
END


Thank you.

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


WebFOCUS 8206
All formats
 
Posts: 95 | Registered: September 13, 2017Report This Post
Virtuoso
posted Hide Post
WebFocus_Dev

It appears that the background color is only as wide as the actual text and not the entire line


Thank you for using Focal Point!

Chuck Wolff - Focal Point Moderator
WebFOCUS 7x and 8x, Windows, Linux All output Formats
 
Posts: 2127 | Location: Customer Support | Registered: April 12, 2005Report This Post
Expert
posted Hide Post
Check this out:
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.RETAIL_COST
BY CAR.ORIGIN.COUNTRY
-*HEADING
-*"Cost by Country"
-*ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH HOLD AS MYCHART FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 700
ON GRAPH SET VAXIS 400
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=HEADING, JUSTIFY=CENTER, $
TYPE=HEADING, LINE=1, BACKCOLOR=RGB(255 0 0), $
TYPE=HEADING, LINE=1, ITEM=1, OBJECT=TEXT, FONT='COURIER', SIZE=12, COLOR=WHITE, STYLE=BOLD+ITALIC, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<TABLE>
<TR><TD bgcolor=red align=center><b>Cost by Country</b></TD></TR>
<TR><TD>!IBI.FIL.MYCHART;</TD></TR>
</TABLE>




   In FOCUS Since 1983 ~ from FOCUS to WebFOCUS.
   Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Platinum Member
posted Hide Post
quote:
Originally posted by Doug:
Check this out:
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.RETAIL_COST
BY CAR.ORIGIN.COUNTRY
-*HEADING
-*"Cost by Country"
-*ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH HOLD AS MYCHART FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 700
ON GRAPH SET VAXIS 400
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=HEADING, JUSTIFY=CENTER, $
TYPE=HEADING, LINE=1, BACKCOLOR=RGB(255 0 0), $
TYPE=HEADING, LINE=1, ITEM=1, OBJECT=TEXT, FONT='COURIER', SIZE=12, COLOR=WHITE, STYLE=BOLD+ITALIC, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<TABLE>
<TR><TD bgcolor=red align=center>[b]Cost by Country[/b]</TD></TR>
<TR><TD>!IBI.FIL.MYCHART;</TD></TR>
</TABLE>


Thanks Doug. I customized this for my code and it works fine. I am having one issue which I am not able to fix.
If I run the code without HTMLFORM like in my 1st post, graph fits in the iframe with no scrolls. But when I use HTML form, scrolls are coming up. I tried giving width to TABLE and TD but it did not fix. Any suggestion would help. Thank you.


WebFOCUS 8206
All formats
 
Posts: 95 | Registered: September 13, 2017Report This Post
Virtuoso
posted Hide Post
I think you are in between a rock and a hard place. Before you switched to using html you probably had the option to embed the header in the chart which prevents the scrolling now you have overridden that with the html. Not sure how to solve the scrolling.


Thank you for using Focal Point!

Chuck Wolff - Focal Point Moderator
WebFOCUS 7x and 8x, Windows, Linux All output Formats
 
Posts: 2127 | Location: Customer Support | Registered: April 12, 2005Report This Post
Expert
posted Hide Post
Solve the scrolling by using "overflow: none; within some CSS - either in an -HTMLFORM BEGIN / END or external CSS file.

If you are going toplay around with HTML then I would urge you to learn the basics and extend your knowledge by learning CSS (CSS3 ideally) and JavaScript.

By JavaScript, I mean the basics first then followed by jQuery and maybe D3.

With this knowledge you will be able to achieve so much more as well as understanding the syntax and structure of the JSCHART engine.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
quote:
SET EMBEDHEADING=ON

This environmental setting embeds the header in the chart, but using Doug's method you are essentially negating this.

Another reason for understanding what is built by WebFOCUS and having the knowledge to maybe evolve a solution using HTML/CSS/JavaScript.

Doug's solution only goes to the HTML element but in the process it works against what WebFOCUS is doing instead of working it.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
The way I would go forward is to use AUTOFIT=ON and the following CSS -

-HTMLFORM BEGIN
<style>
.title {
  background-color: red;
  width: 100%;
  text-align: center;
  left: 0px !important;
}
<style>
-HTMLFORM END


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
quote:
The way I would go forward is to use AUTOFIT=ON and the following CSS

Excellent, as always, Tony... Smiler Mine was just a quick and dirty solution, reflecting back to the old days, even as an HTML Web Master..
Doug
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Platinum Member
posted Hide Post
quote:
Originally posted by Tony A:
The way I would go forward is to use AUTOFIT=ON and the following CSS -

-HTMLFORM BEGIN
<style>
.title {
  background-color: red;
  width: 100%;
  text-align: center;
  left: 0px !important;
}
<style>
-HTMLFORM END


T


Tony, I have below code. And in HTML, I cjhanged overflow to hidden. Scrollbars are gone but bottom part of the graph is getting trimmed off and not displayed.
Can you please suggest what am I doing wrong?
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.RETAIL_COST
BY CAR.ORIGIN.COUNTRY
ON GRAPH HOLD AS MYCHART FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT ON
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 650
ON GRAPH SET VAXIS 350
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<html>
<style>
.title {
  background-color: #004e87;
  color: white;
  width: 100%;
  text-align: center;
  left: 0px;
}
</style>
<body>
<TABLE>
<TR><TD class="title"><b>GRAPH TITLE</b></TD></TR>
<TR><TD>!IBI.FIL.MYCHART;</TD></TR>
</TABLE>
</body>
</html>
-HTMLFORM END

  


WebFOCUS 8206
All formats
 
Posts: 95 | Registered: September 13, 2017Report This Post
Master
posted Hide Post
Instead of using a table, try using a div for each element and then give the title div a position of fixed with a top of 0

  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.RETAIL_COST
BY CAR.ORIGIN.COUNTRY
ON GRAPH HOLD AS MYCHART FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT ON
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 650
ON GRAPH SET VAXIS 350
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<html>
    <head>
        <style>
            .title {
                background-color: #004e87;
                color: white;
                width: 100%;
                text-align: center;
                left: 0px;
                position: fixed;
                top:0;
            }
        </style>
    </head>
    <body>
        <div class="title"><b>GRAPH TITLE</b></div>
        <div id="chart1">!IBI.FIL.MYCHART;</div>
    </body>
</html>
-HTMLFORM END


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
I tried this code. Top of the graph is getting trimmed. For example, Y-axis scale is from 0 to 70K. 70K is cutting off.
quote:
Originally posted by Hallway:
Instead of using a table, try using a div for each element and then give the title div a position of fixed with a top of 0

  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.RETAIL_COST
BY CAR.ORIGIN.COUNTRY
ON GRAPH HOLD AS MYCHART FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET AUTOFIT ON
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS PIXELS
ON GRAPH SET HAXIS 650
ON GRAPH SET VAXIS 350
ON GRAPH SET LOOKGRAPH LINE
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<html>
    <head>
        <style>
            .title {
                background-color: #004e87;
                color: white;
                width: 100%;
                text-align: center;
                left: 0px;
                position: fixed;
                top:0;
            }
        </style>
    </head>
    <body>
        <div class="title">[b]GRAPH TITLE[/b]</div>
        <div id="chart1">!IBI.FIL.MYCHART;</div>
    </body>
</html>
-HTMLFORM END


WebFOCUS 8206
All formats
 
Posts: 95 | Registered: September 13, 2017Report This Post
Master
posted Hide Post
Interesting. What browser are you using? I tried in IE11, Chrome, Edge, and FF and I can see the top of the scale in every browser.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
quote:
Originally posted by Hallway:
Interesting. What browser are you using? I tried in IE11, Chrome, Edge, and FF and I can see the top of the scale in every browser.

I am using IE 11. Did you make changes to iframe properties in HTML Composer?


WebFOCUS 8206
All formats
 
Posts: 95 | Registered: September 13, 2017Report This Post
Master
posted Hide Post
I aplogize. In my haste, I missed in the post that this was in an iframe using the html canvas. Try changing yout HTML FORM to include a height in the title div and add in a margin-top to the body that is equal to the title div height. Make sure that you have the !important on the margin-top of the body, otherwise the html canvas will override it.

  
-HTMLFORM BEGIN
<html>
    <head>
        <style>
            .title {
                background-color: #004e87;
                color: white;
                width: 100%;
                text-align: center;
                left: 0px;
                position: fixed;
                top:0;
                height: 20px;
            }
            body {
                margin-top: 20px !important;
            }
        </style>
    </head>
    <body>
        <div class="title"><b>GRAPH TITLE</b></div>
        <div id="chart1">!IBI.FIL.MYCHART;</div>
    </body>
</html>

-HTMLFORM END


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
Awesome. This fixed my issue. I will test more. Thank you so much.
quote:
Originally posted by Hallway:
I aplogize. In my haste, I missed in the post that this was in an iframe using the html canvas. Try changing yout HTML FORM to include a height in the title div and add in a margin-top to the body that is equal to the title div height. Make sure that you have the !important on the margin-top of the body, otherwise the html canvas will override it.

  
-HTMLFORM BEGIN
<html>
    <head>
        <style>
            .title {
                background-color: #004e87;
                color: white;
                width: 100%;
                text-align: center;
                left: 0px;
                position: fixed;
                top:0;
                height: 20px;
            }
            body {
                margin-top: 20px !important;
            }
        </style>
    </head>
    <body>
        <div class="title">[b]GRAPH TITLE[/b]</div>
        <div id="chart1">!IBI.FIL.MYCHART;</div>
    </body>
</html>

-HTMLFORM END


WebFOCUS 8206
All formats
 
Posts: 95 | Registered: September 13, 2017Report This Post
Master
posted Hide Post
Excellent. Gld to be of help.

You can play around with the css of the title. Below I made it bigger with a different font and fallback fonts, enabled flexbox to center the text vertically and horizontally and removed the <b> html tags (which are deprecated in html5) and put in in the css which gives you a lot more flexibility. See: https://developer.mozilla.org/.../Web/CSS/font-weight .

  
-HTMLFORM BEGIN
<html>
    <head>
        <style>
            .title {
                background-color: #004e87;
                color: white;
                width: 100%;
                left: 0;
                top: 0;
                position: fixed;
                height: 50px;
                font-weight: bold;
                font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                size: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            body {
                margin-top: 50px !important;
            }
        </style>
    </head>
    <body>
        <div class="title">GRAPH TITLE</div>
        <div id="chart1">!IBI.FIL.MYCHART;</div>
    </body>
</html>

-HTMLFORM END

To echo what TonyA said, learn as much as you can about HTML5, CSS3, and JavaScript. I opens an whole new world of possibilities.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Graph Heading Question

Copyright © 1996-2020 Information Builders