We were needing a graph that didn't exist, one that had basically 3 graphs into 1.

1. Create an empty procedure.
2. Copy and past the below code within.
3. Run to see a default chart.

It should look like this:


You can pass parameters into the chart, basically the fist 18 DEFAULT variables which will change the colors, numbers, size, etc..

Feel free to customize it more if you like.

-DEFAULT &G_HEIGHT = 140;
-DEFAULT &G_WIDTH = 60;
-DEFAULT &G_BGCOLOR = 'rgb(255,255,255)';
-DEFAULT &M_MAX = 400;
-DEFAULT &M_MIN = 0;
-DEFAULT &M_COLOR = 'rgb(0,0,0)';
-DEFAULT &M_STROKE = 2;
-DEFAULT &M_FFAMILY = 'serif'
-DEFAULT &M_FSIZE = 10;
-DEFAULT &M_FCOLOR = 'rgb(0,0,0)';
-DEFAULT &M_FWEIGHT = 'bold';
-DEFAULT &BB_PERC = 50;
-DEFAULT &BB_COLOR = 'rgb(204,204,204)';
-DEFAULT &FB_PERC = 75;
-DEFAULT &FB_COLOR = 'rgb(215,172,17)';
-DEFAULT &AB_PERC = 60;
-DEFAULT &AB_COLOR = 'rgb(0,0,0)';
-DEFAULT &AB_STROKE = 2;

-*I use SET to get the MATH to work as DEFAULT doesn't handle MATH 
-DEFAULTH &M_AVG = 0;
-SET &M_AVG = (&M_MAX/2);
-DEFAULTH &G_AVG = 0;
-SET &G_AVG = (&G_HEIGHT.EVAL/2)+(&M_FSIZE/2);
-DEFAULTH &AB_WIDTH = 0;
-SET &AB_WIDTH = (&G_WIDTH-5);
-DEFAULTH &FB_WIDTH = 0;
-SET &FB_WIDTH = (&G_WIDTH-49);
-DEFAULTH &T_MAX = 0;
-SET &T_MAX = 0;
-DEFAULTH &T_AVG = 0;
-SET &T_AVG = (&M_MAX.LENGTH-&M_AVG.LENGTH)*(&M_FSIZE/2);
-DEFAULTH &T_MIN = 0;
-SET &T_MIN = (&M_MAX.LENGTH-&M_MIN.LENGTH)*(&M_FSIZE/2);

-*The graph starts from the bottom, so we have to take 100% 
-*and subtract what was passed in to make the right percentage.
-SET &BB_PERC = (100-&BB_PERC);
-SET &FB_PERC = (100-&FB_PERC);
-SET &AB_PERC = (100-&AB_PERC);

-HTMLFORM BEGIN
	<svg height="&G_HEIGHT.EVALpx" width="&G_WIDTH.EVALpx" style="background-color:&G_BGCOLOR;">								<!--overall graph-->
		<!--graphs-->
		<rect x="25" y="&BB_PERC.EVAL%" width="100%" height="&G_HEIGHT.EVALpx" style="fill:&BB_COLOR;" />						<!--background bar graph-->
		<rect x="37" y="&FB_PERC.EVAL%" width="&FB_WIDTH" height="&G_HEIGHT.EVALpx" style="fill:&FB_COLOR;" /> 						<!--foreground bar graph-->
		<!--average line-->
		<line x1="30" x2="&AB_WIDTH" y1="&AB_PERC.EVAL%" y2="&AB_PERC.EVAL%" style="stroke:&AB_COLOR; stroke-width:&AB_STROKE" />			<!--average bar line-->
		<!--markers-->
		<g style="stroke:&M_COLOR; stroke-width:&M_STROKE"> 												<!--group side markers-->
			<!--side markers-->
			<line x1="25" x2="25" y1="0" y2="&G_HEIGHT.EVALpx"/>											<!--vertical line-->
			<line x1="20" x2="25" y1="0" y2="0"/>													<!--top marker 0-->
			<line x1="20" x2="25" y1="50%" y2="50%"/>												<!--middle marker 50%-->
			<line x1="20" x2="25" y1="100%" y2="100%"/>												<!--bottom marker 100%-->
		</g>
		<!--text for markers-->
		<g fill="&M_FCOLOR" style="font-family: &M_FFAMILY; font-size:&M_FSIZE.EVALpx; font-weight:&M_FWEIGHT;">					<!--group to set font colors and size-->
			<text x="&T_MAX" y="&M_FSIZE.EVALpx">&M_MAX</text>											<!--text to state top #-->
			<text x="&T_AVG" y="&G_AVG.EVALpx">&M_AVG</text>											<!--text to state middle #-->
			<text x="&T_MIN" y="&G_HEIGHT.EVALpx">&M_MIN</text>											<!--text to state bottom #-->
		</g>
	</svg>
-HTMLFORM END

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