KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: Utility Method to Modify the Colors of Graph
PRODUCT: 4D | VERSION: 14.3 | PLATFORM: Mac & Win
Published On: May 27, 2015

Below is a method that will allow the colors of a graph created from the GRAPH command to be selected.

//----------------------------------------------------------------
// Method: GRAPH_SET_COLOR
//
// Description: Changes the colors of a graph created from the GRAPH
// command by passing a text array of colors in SVG format
// Pass a null in the Text array to keep the data's current color
//
// Parameters:
// $1 - Pointer to the Picture containing the Graph
// $2 - Pointer to the Text Array of colors
//
//----------------------------------------------------------------

C_POINTER($1;$2)
C_PICTURE($picture_p)
ARRAY TEXT($colors_at;0)
C_TEXT($SVGref_t;$xmlElement_t)
C_LONGINT($counter_l)

If (Count parameters=2)
   $picture_p:=$1->
   COPY ARRAY($2->;$colors_at)
   $SVGref_t:=SVG_Open_picture ($picture_p)

   For ($counter_l;1;Size of array($colors_at))

      If (($colors_at{$counter_l})#"")
         $xmlElement_t:=DOM Find XML element by ID($SVGref_t;"ID_graph_"+String($counter_l))
         If (OK=1)
            DOM SET XML ATTRIBUTE($xmlElement_t;"fill";$colors_at{$counter_l})
            DOM SET XML ATTRIBUTE($xmlElement_t;"stroke";$colors_at{$counter_l})
         End if

         $xmlElement_t:=DOM Find XML element by ID($SVGref_t;"ID_bullet_"+String($counter_l))
         If (OK=1)
               DOM SET XML ATTRIBUTE($xmlElement_t;"fill";$colors_at{$counter_l})
         End if

         $xmlElement_t:=DOM Find XML element by ID($SVGref_t;"ID_legend_"+String($counter_l))
         If (OK=1)
            DOM SET XML ATTRIBUTE($xmlElement_t;"fill";$colors_at{$counter_l})
         End if
      End if
   End for

   SVG EXPORT TO PICTURE($SVGref_t;$picture_p;Copy XML data source)
   DOM CLOSE XML($SVGref_t)
   $1->:=$picture_p
End if


Following the style of using the GRAPH command, to use the method an array of colors following the ordering of the data is created and passed along with the resulting 4D picture created with GRAPH.

The text array of colors can be any of the following valid RGB formats also explained in the documentation for SVG colors at:
http://doc.4d.com/4Dv14R5/4D/14-R5/SVG-Colors.300-1889656.en.html

RGB format
Format    Example
#rgb         #f00
#rrggbb    #ff0000
rgb(r,g,b)  rgb(255,0,0)
                rgb(100%, 0%, 0%)

Example
Below is an example of a GRAPH with default coloring:
C_PICTURE($picture_p) //Variable of graph
ARRAY TEXT(X;3) //Create an array for the x-axis
X{1}:="Set 1" //X Label #1
X{2}:="Set 2" //X Label #2
X{3}:="Set 3" //X Label #2
ARRAY REAL(A;3) //Create an array for the y-axis
A{1}:=30 //Insert some data
A{2}:=20
A{3}:=50
ARRAY REAL(B;3) //Create an array for the y-axis
B{1}:=50 //Insert some data
B{2}:=80
B{3}:=100
ARRAY REAL(C;3) //Create an array for the y-axis
C{1}:=10 //Insert some data
C{2}:=50
C{3}:=20
vType:=3 //Initialize graph type
GRAPH($picture_p;vType;X;A;B;C) //Draw the graph
GRAPH SETTINGS($picture_p;0;0;0;0;False;False;True;"Data 1";"Data 2";"Data 3")


$picture_p is


To use the method take the resulting picture variable containing the graph and create an array of colors and pass it into the method:

//Added to the code earlier
ARRAY TEXT($color_at;0) //Build a text array with any of the valid RGB formats
APPEND TO ARRAY($color_at;"#FF0000")//Red
APPEND TO ARRAY($color_at;"rgb(0%,0%,100%)")//Blue
APPEND TO ARRAY($color_at;"rgb(0,255,0)")//Green

GRAPH_SET_COLOR (->$picture_p;->$color)


$picture_p is


Note: This method will not work on graph type 8, because graph type 8 uses resource images to build the graph.