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,

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

Is this a JSChart or the old WebFOCUS charts ?

quote:

Originally posted by Waz:
Is this a JSChart or the old WebFOCUS charts ?

It will be a JSChart.

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

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,

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

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,

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,