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] Change Individual Marker Colors

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Change Individual Marker Colors
 Login/Join
 
Member
posted
Hi,

I am working on a project using line graph with markers.

I want to change the color of a single marker if its value is below a certain level.

Is it possible? I did not see any information on this in the documentation.


We're on 8.1.05M.


Thanks in advance.

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


WebFOCUS 8.1.05M
 
Posts: 6 | Registered: June 01, 2016Report This Post
Expert
posted Hide Post
you could create a new series with only one point, the outlier, and control its marker color as you wish. just make sure your variable order puts it before the full version of the same variable. then it will draw on top




In Focus since 1979///7706m/5 ;wintel 2008/64;OAM security; Oracle db, ///MRE/BID
 
Posts: 3811 | Location: Manhattan | Registered: October 28, 2003Report This Post
Expert
posted Hide Post
Is this a JSChart or the old WebFOCUS charts ?


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
Member
posted Hide Post
quote:
Originally posted by Waz:
Is this a JSChart or the old WebFOCUS charts ?



It will be a JSChart.


WebFOCUS 8.1.05M
 
Posts: 6 | Registered: June 01, 2016Report This Post
Expert
posted Hide Post
I don't like you chances,

Susannah's suggestion may the only way to go.


But, this is a link to the threed graphics site for jscharts, the documentation is pitiful, but you may be able to find out a way to do it.

From what we have seen it is very configurable.

tdgchart


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
Master
posted Hide Post
If you're not afraid of swimming across a river full of crocodiles, I have something that could work for you.

The following example uses the CAR sample file to change the sales dollar marker to red for any car with less than $20,000 in sales.

Doing so requires the following:

1. HOLD the chart, then continue processing in an HTMLFORM.
2. Wait for the SVG code that makes up the chart to be injected into the HTML DOM.
3. Replace the browser window's "ON RESIZE" call to a function that will resize the chart AND re-color the markers as needed.
4. Extract the dollar amount for a marker from its SVG code, then alter the SVG fill property to red if needed.

Enjoy, because I sure didn't!

ENGINE INT CACHE SET ON


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

-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE ibisamp/car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
ON GRAPH HOLD AS MARKER_ADJUST FORMAT JSCHART
-*ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO 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 VLINE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setUseSeriesShapes(true);
setMarkerSizeDefault(50);

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS
"introAnimation": {
    "enabled": false
}
,

*END
ENDSTYLE
END

-RUN

-HTMLFORM BEGIN
!IBI.FIL.MARKER_ADJUST;

<script type="text/javascript">
	// ===== GLOBAL VARIABLES =====

	// Turn marker red if less than the following number:
	var threshold_number = 20000.00;

	// Time to wait for chart to appear. Adjust the number
	//  of milliseconds upward if marker coloring does not work
	var marker_adjust_delay = 1000;

	// Variable to hold the default JS:Chart chart resize function
	var resize_function;


	// ===== FUNCTION CALLS THAT EXECUTE ONLY AFTER THE CHART APPEARS =====

	// Wait until the SVG for the JS:Chart has been created,
	//   then adjust color of markers if necessary
	setTimeout(marker_adjust, marker_adjust_delay);

	// Wait until the SVG for the JS:Chart has been created,
	//  then hijack browser window resize functionality to include our
	//  marker color adjustments
	setTimeout(set_new_window_resize_function, marker_adjust_delay);


	// ===== THE ACTUAL FUNCTIONS THAT ARE CALLED =====

	function set_new_window_resize_function() {
		// The chart will redraw itself if the window is resized.
		// Change the resize event to add in our custom marker color functionality
		resize_function = window.onresize;
		window.onresize = window_onresize_replacement;
	}

	// Call JS:Chart existing resize function, then wait for it to complete
	//    before adjusting (again) our marker colors
	function window_onresize_replacement() {
		resize_function();
		setTimeout(marker_adjust, marker_adjust_delay);
	}

	// Custom marker color function
	function marker_adjust() {
		// Markers on line graph have SVG class names that start with text "marker"... find them
		var x = document.querySelectorAll("[class^=marker]");

		// Here's the first one, "x[0]":
		//    <path class="marker!s0!g0!mmarker" shape-rendering="crispEdges" tdg:radius="3.125" fill="rgb(48,94,213)"
		//      transform="translate(46.65,302.932)" d="M-3.125,-3.125L3.125,-3.125 3.125,3.125 -3.125,3.125Z"
		//        tdgtitle="SALES, ALFA ROMEO: 30,200"></path>

		// Loop through all the markers and grab the dollar amount string from property "tdgtitle" (See above).
		// Convert dollar amount string to floating point number for testing.
		// If dollar amount is less than the threshold number, change the marker's "fill" property to red

		for (var i = 0; i < x.length; i++) {
			var s = x[i].getAttribute("tdgtitle").split(":");
			var n = parseFloat(s[1].replace(',',''));
			if (n < threshold_number) x[i].setAttribute("fill","rgb(255, 0, 0)");
		}
	}
</script>
-HTMLFORM END

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


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Guru
posted Hide Post
Jeff,

Try using the command WHEN in the stylesheet. This changes the color of the square marker only - is that what you are looking for?

Using only the graph section provided by Squatch I made a few changes to eliminate the javascript section and added the WHEN command .

ENGINE INT CACHE SET ON


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

-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE ibisamp/car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
-*****ON GRAPH HOLD AS MARKER_ADJUST FORMAT JSCHART
ON GRAPH PCHOLD FORMAT JSCHART <------------------
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO 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 VLINE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setUseSeriesShapes(true);
setMarkerSizeDefault(50);

*END
INCLUDE=endeflt.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=SALES, COLOR=RED, WHEN=SALES LT 28000,$ <----------
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS
"introAnimation": {
"enabled": false
}
,

*END
ENDSTYLE
END

Let us know your results and if you have resolved your map dilemma.

Thank your for participating in the Focal Point Forum,

Tamra Colangelo
Focal Point Moderator
Information Builders


WebFOCUS 8x - BI Portal, Developer Studio, App Studio, Excel, PDF, Active Formats and HTML5
 
Posts: 487 | Location: Toronto | Registered: June 23, 2009Report This Post
Expert
posted Hide Post
Well, Tamra, that's certainly an eye-opener! I did not know this would work in a graph!

TYPE=DATA, COLUMN=SALES, COLOR=RED  , WHEN=SALES LT 28000, $
TYPE=DATA, COLUMN=SALES, COLOR=GREEN, WHEN=SALES GT 50000, $

This message has been edited. Last edited by: Francis Mariani,


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
Guru
posted Hide Post
Francis,

It was worth a try and it worked. Passed this by our Graphing SME who also said most Stylesheet commands should work.

I've used other "reporting" stylesheet commands within graph/charts that seemed to work.

Tamra

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


WebFOCUS 8x - BI Portal, Developer Studio, App Studio, Excel, PDF, Active Formats and HTML5
 
Posts: 487 | Location: Toronto | Registered: June 23, 2009Report 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] Change Individual Marker Colors

Copyright © 1996-2020 Information Builders