chartRowStacks ( width ; height ; defaultArray ; dataArray )

// Draws stacked horizontal rows based on range and value input using SVG. Customisable with JSON for appearance, padding, stroke, and alignment.

Be the first to rate this function Log in to vote

Jonni™ - Show more from this author

Sample input:

chartRowStacks ( 400 ; 400 ; $defaultArray ; $dataArray )

Sample output:

SVG for webwidget displaying horizontal column graph

Function definition: (Copy & paste into FileMaker's Edit Custom Function window)

// ROW STACKS CHART

// Draws stacked horizontal rows based on range and value input using SVG. 
// Customisable with JSON for appearance, padding, stroke, and alignment.

// Function Name : chartRowStacks
// Parameters : width ; height ; defaultArray ; dataArray
// Use example : chartRowStacks ( 400 ; 400 ; $defaultArray ; $dataArray )

// Note : See structure and syntax for defaultArray and dataArray below

Let ( [

	~d = dataArray ;
	~def = defaultArray ;
	
	// Core values
	~padding = JSONGetElement ( ~def ; "padding" ) ;
	~strokeDefault = JSONGetElement ( ~def ; "stroke" ) ;
	~capDefault = JSONGetElement ( ~def ; "endCap" ) ;
	~bgColor = JSONGetElement ( ~def ; "color.background" ) ;
	~fgColor = JSONGetElement ( ~def ; "color.foreground" ) ;
	~bgFill = JSONGetElement ( ~def ; "background.fill" ) ;
	~min = JSONGetElement ( ~def ; "min" ) ;
	~max = JSONGetElement ( ~def ; "max" ) ;
	~range = ~max - ~min ;
	~align = Lower ( JSONGetElement ( ~def ; "align" ) ) ;
	~bars = JSONListKeys ( ~d ; "columns" ) ;
	~count = ValueCount ( ~bars ) ;

	// Dimensions
	~width = Round ( width * ( 100 / Get ( WindowZoomLevel ) ) ; 0 ) ; 
	~height = ( ~strokeDefault + ~padding ) * ~count ;

	// Alignment offset
	~xAlignOffset = Case (
	
		~align = "center" ; "( " & ~width & " - length ) / 2" ;
		~align = "right" ; ~width & " - length" ;
		0
		
	) ;

  ~rows = While ( [ 
  
		~i = 0 ; 
		~svg = "" 
  
	] ;
		~i < ~count ;

	[
	
		~col = JSONGetElement ( ~d ; "columns[" & ~i & "]" ) ;
		~val = JSONGetElement ( ~col ; "value" ) ;
		~stroke = JSONGetElement ( ~col ; "stroke" ) ;
		~stroke = If ( IsEmpty ( ~stroke ) ; ~strokeDefault ; ~stroke ) ;
		~color = JSONGetElement ( ~col ; "color" ) ;
		~color = If ( IsEmpty ( ~color ) ; ~fgColor ; ~color ) ;
		~cap = JSONGetElement ( ~col ; "cap" ) ;
		~cap = If ( IsEmpty ( ~cap ) ; ~capDefault ; ~cap ) ;
		
		~y = ( ~stroke + ~padding ) * ~i + ( ~stroke / 2 ) ;
		~w = ( ( ~val - ~min ) / ~range ) * ~width ;

		// Apply alignment offset dynamically in x
		~x = Case (
		
			~align = "center" ; ( ~width - ~w ) / 2 ;
			~align = "right" ; ( ~width - ~w ) ;
			0
			
		) ;

		~row = "<line x1='" & ~x & "' y1='" & ~y & "' x2='" & ( ~x + ~w ) & "' y2='" & ~y & "' stroke='" & ~color & "' stroke-width='" & ~stroke & "' stroke-linecap='" & ~cap & "' />" ;

		~svg = List ( ~svg ; ~row ) ;
		~i = ~i + 1
		
	] ;


		~svg
	) ;

	// Background
	~bg = "<rect width='" & ~width & "' height='" & ~height & "' fill='" & ~bgFill & "' />" ;
	
	// Build SVG
	~svg = 
	
	"<?xml version='1.0' encoding='UTF-8'?>" &
	
	If ( Get(Device) > 2 ;
		"<svg xmlns='http://www.w3.org/2000/svg' style='width:100%;height:100%;' viewBox='0 0 " & ~width & " " & ~height & "' preserveAspectRatio='xMidYMid meet'>" ;
		"<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 " & ~width & " " & ~height & "'>"
	) &
	
		~bg &
		Substitute ( ~rows ; "¶" ; "" ) &
	
	"</svg>"

] ;

	Case (
	
	PatternCount ( Get ( ApplicationVersion ) ; "Web" ) ;
	"data:image/svg+xml;base64," & Base64Encode ( Substitute ( ~svg ; "¶" ; "" ) ) ;
	
	Get ( Device ) > 2 ;
	"data:text/html," &
		"<html>
		<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">
		<body style=\"margin:0;padding:0;background:" & ~bgFill & ";\">" &
		~svg &
		"</body>
	</html>" ;
	
	"data:image/svg+xml;utf8," & Substitute ( ~svg ; "¶" ; "" )
	
	)

)

// Row Stacks Chart is a stacked column chart widget for FileMaker layouts, styled and rendered using scalable SVG. 
// Each column can define its own height, stroke, color, and cap style, while shared defaults like padding, stroke width, 
// and background fill are set centrally. Rows align left, center, or right based on layout needs. Perfect for 
// visualising multi-part progress or distribution metrics. Optimised for FileMaker Pro, Go, and WebDirect.

// Default Array Example

//	JSONSetElement ( "" ; 

//		[ "min" ; 0 ; 2 ] ;
//		[ "max" ; 50 ; 2 ] ;
//		[ "padding" ; 10 ; 2 ] ;
//		[ "stroke" ; 20 ; 2 ] ;
//		[ "endCap" ; "round" ; 1 ] ;
//		[ "background.fill" ; "#FFFFFF" ; 1 ] ;
//		[ "color.background" ; "#CCCCCC" ; 1 ] ;
//		[ "color.foreground" ; "#CB4400" ; 1 ] ;
//		[ "align" ; "center" ; 1 ]

//	)

// Data Array Example

//	JSONSetElement ( "" ; 

//		[ "columns[+]value" ; 30 ; 2 ] ;
//		[ "columns[:]color" ; "#F4511E" ; 1 ] ;
//		[ "columns[:]stroke" ; 10 ; 2 ] ;
//		[ "columns[:]cap" ; "" ; 1 ] ;

//		[ "columns[+]value" ; 25 ; 2 ] ;

//		[ "columns[+]value" ; 45 ; 2 ] ;
//		[ "columns[:]color" ; "#F4511E" ; 1 ] ;
//		[ "columns[:]cap" ; "square" ; 1 ]  ;

//		[ "columns[+]value" ; 15 ; 2 ] ;
//		[ "columns[:]color" ; "#F4511E" ; 1 ] ;
//		[ "columns[:]stroke" ; 18 ; 2 ] ;
//		[ "columns[:]cap" ; "" ; 1 ] ;

//		[ "columns[+]value" ; 32 ; 2 ] ;
//		[ "columns[:]color" ; "#F4511E" ; 1 ] ;

//		[ "columns[+]value" ; 22 ; 2 ] ;
//		[ "columns[:]color" ; "#F4511E" ; 1 ] ;
//		[ "columns[:]cap" ; "" ; 1 ] 

//	)

// GitHub : https://github.com/roxytheman/fmCustomFunctions/blob/4b870235de88856c726fbc68f454fabe39cdfc9e/functions/chartRowStacks.fmfn
// BD Link : https://www.briandunning.com/cf/2811
// Written by: jonni@me.com
// V 1.0

Row Stacks Chart is a stacked column chart widget for FileMaker layouts, styled and rendered using scalable SVG. Each column can define its own height, stroke, color, and cap style, while shared defaults like padding, stroke width, and background fill are set centrally. Rows align left, center, or right based on layout needs. Perfect for visualising multi-part progress or distribution metrics. Optimised for FileMaker Pro, Go, and WebDirect.

Default Array Example

JSONSetElement ( "" ;

[ "min" ; 0 ; 2 ] ;
[ "max" ; 50 ; 2 ] ;
[ "padding" ; 10 ; 2 ] ;
[ "stroke" ; 20 ; 2 ] ;
[ "endCap" ; "round" ; 1 ] ;
[ "background.fill" ; "#FFFFFF" ; 1 ] ;
[ "color.background" ; "#CCCCCC" ; 1 ] ;
[ "color.foreground" ; "#CB4400" ; 1 ] ;
[ "align" ; "center" ; 1 ]

)

Data Array Example

JSONSetElement ( "" ;

[ "columns[+]value" ; 30 ; 2 ] ;
[ "columns[:]color" ; "#F4511E" ; 1 ] ;
[ "columns[:]stroke" ; 10 ; 2 ] ;
[ "columns[:]cap" ; "" ; 1 ] ;

[ "columns[+]value" ; 25 ; 2 ] ;

[ "columns[+]value" ; 45 ; 2 ] ;
[ "columns[:]color" ; "#F4511E" ; 1 ] ;
[ "columns[:]cap" ; "square" ; 1 ] ;

[ "columns[+]value" ; 15 ; 2 ] ;
[ "columns[:]color" ; "#F4511E" ; 1 ] ;
[ "columns[:]stroke" ; 18 ; 2 ] ;
[ "columns[:]cap" ; "" ; 1 ] ;

[ "columns[+]value" ; 32 ; 2 ] ;
[ "columns[:]color" ; "#F4511E" ; 1 ] ;

[ "columns[+]value" ; 22 ; 2 ] ;
[ "columns[:]color" ; "#F4511E" ; 1 ] ;
[ "columns[:]cap" ; "" ; 1 ]

)

Comments

Note: these functions are not guaranteed or supported by BrianDunning.com. Please contact the individual developer with any questions or problems.

chartRowStacks ( width ; height ; defaultArray ; dataArray )

Comments

Support this website.

Support this website.