KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: How to format y axis of the SVG generated using GRAPH
PRODUCT: 4D | VERSION: 15.x | PLATFORM: Mac & Win
Published On: May 19, 2017

The GRAPH command allows users to quickly build svg graphs. The command has many settings that can be set, but one not included is the ability to format the y axis. In order to modify the y axis values, the svg can be manipulated using the SVG component, and/or 4D's DOM commands. Below is an utility method that adds a pattern the the front of the y axis.

// Method: GRAPH_PREPEND_TO_Y_AXIS
// $1 - Source grahp
// $2 - pattern to prepend
// $0 - Modified graph

C_PICTURE($1;$input_picture)
C_TEXT($2;$pattern)
C_PICTURE($0)

If (Count parameters>1)
   $input_picture:=$1
   $pattern:=$2
   $svg_ref:=SVG_Open_picture ($input_picture)
   
   If (SVG_Is_reference_valid ($svg_ref))
      $xml_ref:=DOM Find XML element by ID($svg_ref;"ID_y_value")
      If (SVG_Is_reference_valid ($xml_ref))
         DOM GET XML CHILD NODES($xml_ref;$nodes;$nodeRefs)
         
         For ($i;1;Size of array($nodes))
            $y_ref:=$nodeRefs{$i}
            If (SVG_Is_reference_valid ($y_ref))
               DOM GET XML ELEMENT VALUE($y_ref;$y_val)
               DOM SET XML ELEMENT VALUE($y_ref;$pattern+$y_val)
            End if
         End for
         SVG EXPORT TO PICTURE($svg_ref;$0;Copy XML data source)
      End if
   End if
End if


Example:

The code generates the graph:
C_PICTURE(vGraph) //Variable of graph
ARRAY TEXT(X;2) //Create an array for the x-axis
X{1}:="1995" //X Label #1
X{2}:="1996" //X Label #2
ARRAY REAL(A;2) //Create an array for the y-axis
A{1}:=30 //Insert some data
A{2}:=40
ARRAY REAL(B;2) //Create an array for the y-axis
B{1}:=50 //Insert some data
B{2}:=80
vType:=1 //Initialize graph type
GRAPH(vGraph;vType;X;A;B) //Draw the graph
GRAPH SETTINGS(vGraph;0;0;0;0;False;False;True;"France";"USA") //Set the legends for the graph



To add a '$; sign to the front of the y axis labels, run GRAPH_PREPEND_TO_Y_AXIS:
vGraph:=GRAPH_PREPEND_TO_Y_AXIS(vGraph;'$')


The resulting graph looks like the following: