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     [SHARING] Format JSCHART events

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SHARING] Format JSCHART events
 Login/Join
 
Waz
Expert
posted
If you were not aware, there are events available on jscharts.

There is a small technique to turn them on.

The code between *GRAPH_JS and *END adds an event to an object on the chart. I haven't investigated all the objects, and some are difficult to track down, but the main ones are there.

We have have implemented this for some of our jscharts to add extra functionality.

Hope someone finds this useful.

A simple example is below that highlights the events and what is available. There is much more if you check the js objects passed into the functions.

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-*SET JSURL = '{jsfile}'

-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
	<head>
		<title>Chart Events</title>
		<script type="text/javascript">
			<!--
				function chartEvent(chtObj) {
					if (validName(chtObj.chartObjName))  return ;

					var clickText = chtObj.chartObjName ;
					console.log(chtObj)
					if (typeof chtObj.group != 'undefined') clickText += ' (Group: ' + chtObj.group + ')' ;
					if (typeof chtObj.series != 'undefined') clickText += ' (Series: ' + chtObj.series + ')' ;
					if (typeof chtObj.svgElement != 'undefined') {
						if (chtObj.svgElement.innerHTML.length > 0) clickText += ' (' + chtObj.svgElement.innerHTML + ')' ;
					}
					document.getElementById(chtObj.event.type + 'Evt').innerHTML = clickText ;
				}
				function validName(name) {
					if (name=='legendPanel') return true ;
					return false ;
				}
			//-->
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>Click Event:</td>
				<td><div id="clickEvt"></div></td>
			</tr>
			<tr>
				<td>Mouse Over Event:</td>
				<td><div id="mouseoverEvt"></div></td>
			</tr>
			<tr>
				<td>Mouse Out Event:</td>
				<td><div id="mouseoutEvt"></div></td>
			</tr>
		</table>
	</body>
</html>
-HTMLFORM END


GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
CAR.BODY.SALES
CAR.BODY.RETAIL_COST
CAR.BODY.SEATS
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT 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 GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR2AX
-*ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setTitleString("Chart Title");
setSubtitleString("Chart Sub-Title");
setFootnoteString("Chart Footnote");
setY1TitleString("Y1Title");
setY2TitleString("Y2Title");
setO1TitleString("O1Title");
setAxisAssignment(3,1);
setSeriesType(getSeries(3),2);
-*setDisplay(getAnnotation(0), true);
-*setTextString(getAnnotation(0), "annotation0");
-*setRect(getAnnotation(0),new Rectangle(-15340,13000,29850,1800));
-*setDisplay(getAnnotation(1), true);
-*setTextString(getAnnotation(1), "annotation1");
-*setRect(getAnnotation(1),new Rectangle(15340,13000,29850,1800));
-*setDisplay(getReferenceLineY1(0),true);
-*setReferenceLineValueY1(0,80000.0);
-*setLineWidth(getReferenceLineY1(0),2);
*END
*GRAPH_JS
});
chart.registerEvent(chartEvent, 'click', 'background');
chart.registerEvent(chartEvent, 'mouseover', 'background');
chart.registerEvent(chartEvent, 'mouseout', 'background');
chart.registerEvent(chartEvent, 'click', 'xaxis');
chart.registerEvent(chartEvent, 'mouseover', 'xaxis');
chart.registerEvent(chartEvent, 'mouseout', 'xaxis');
chart.registerEvent(chartEvent, 'click', 'yaxis');
chart.registerEvent(chartEvent, 'mouseover', 'yaxis');
chart.registerEvent(chartEvent, 'mouseout', 'yaxis');
chart.registerEvent(chartEvent, 'click', 'y2axis');
chart.registerEvent(chartEvent, 'mouseover', 'y2axis');
chart.registerEvent(chartEvent, 'mouseout', 'y2axis');
chart.registerEvent(chartEvent, 'click', 'legend');
chart.registerEvent(chartEvent, 'mouseover', 'legend');
chart.registerEvent(chartEvent, 'mouseout', 'legend');
chart.registerEvent(chartEvent, 'click', 'title');
chart.registerEvent(chartEvent, 'mouseover', 'title');
chart.registerEvent(chartEvent, 'mouseout', 'title');
chart.registerEvent(chartEvent, 'click', 'subtitle');
chart.registerEvent(chartEvent, 'mouseover', 'subtitle');
chart.registerEvent(chartEvent, 'mouseout', 'subtitle');
chart.registerEvent(chartEvent, 'click', 'series');
chart.registerEvent(chartEvent, 'mouseover', 'series');
chart.registerEvent(chartEvent, 'mouseout', 'series');
chart.registerEvent(chartEvent, 'click', 'footnote');
chart.registerEvent(chartEvent, 'mouseover', 'footnote');
chart.registerEvent(chartEvent, 'mouseout', 'footnote');
-*chart.registerEvent(chartEvent, 'click', 'annotation');
-*chart.registerEvent(chartEvent, 'mouseover', 'annotation');
-*chart.registerEvent(chartEvent, 'mouseout', 'annotation');
-*chart.registerEvent(chartEvent, 'click', 'reference');
-*chart.registerEvent(chartEvent, 'mouseover', 'reference');
-*chart.registerEvent(chartEvent, 'mouseout', 'reference');
-*chart.registerEvent(chartEvent, 'click', 'chart');
-*chart.registerEvent(chartEvent, 'mouseover', 'chart');
-*chart.registerEvent(chartEvent, 'mouseout', 'chart');

chart.set({
*END

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=JSCHART Events, $
ENDSTYLE
END
-RUN


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Tony A
Expert
posted Hide Post
Nice, now where's the like button? Wink

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
Neelima
Platinum Member
posted Hide Post
Cool..


WebFocus 8104,8204
Excel/PDF/HTML/HTMLTABLE/XML/ALPHA/GIF file/GRAPH/Active technologies
 
Posts: 186 | Location: INDIA | Registered: July 11, 2013Report This Post
Francis Mariani
Expert
posted Hide Post


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
CoolGuy
Virtuoso
posted Hide Post
Nice! Thanks for sharing!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 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     [SHARING] Format JSCHART events

Copyright © 1996-2020 Information Builders