How to Make a Custom Graph Legend

Sometime you will want to make your own graph legend listing the variables and line symbols. For example you might want to use the same legend for multiple graphs or you might want to move the legend below the graph instead of to the right. To do this, you can turn off the automatic legend in your graph by using #CustomGraph() and then place a table with the graph legend images below your graph.

Below is an example of how to do this for a graph with up to six variables. In order to use this code you'll need to upload the JPG images: legend1.jpg, legend2.jpg, legend3.jpg, legend4.jpg, legend5.jpg, and legend6.jpg to your Broadcast HTML files directory.

You can download a ZIP file that contains these JPG images at:

http://www.forio.com/broadcastdocs/downloads/legend_images.zip

First, you'll need to set the first four lines to match the variable names in your model. The names that appear in $GraphArray are the actual variable names in your model. The names that appear in $LegendArray are the names for the variables that will appear in your graph's legend.

#set($GraphArray = ["Profit", "Revenue", "Total Costs"] )
#set($LegendArray = ["Profit", "Revenue", "Total Costs"] )
#set($GraphWidth = 600)
#set($GraphHeight = 400)
#CustomLineGraph($GraphArray $GraphWidth $GraphHeight "0xFFFFFF" false "" "" "1")<br>

<TABLE WIDTH="$GraphWidth" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
#if ($LegendArray.size() > 0)
<TD WIDTH="100"> </TD>
<TD NOWRAP><IMG SRC="legend1.jpg"> $LegendArray.get(0)</TD>
#else
<TD> </TD>
#end
#if ($LegendArray.size() > 1)
<TD NOWRAP><IMG SRC="legend2.jpg"> $LegendArray.get(1)</TD>
#else
<TD> </TD>
#end
</TR>

<TR>
#if ($LegendArray.size() > 2)
<TD WIDTH="100"> </TD>
<TD NOWRAP><IMG SRC="legend3.jpg"> $LegendArray.get(2)</TD>
#else
<TD> </TD>
#end
#if ($LegendArray.size() > 3)
<TD NOWRAP><IMG SRC="legend4.jpg"> $LegendArray.get(3)</TD>
#else
<TD> </TD>
#end
</TR>

<TR>
#if ($LegendArray.size() > 4)
<TD WIDTH="100"> </TD>
<TD NOWRAP><IMG SRC="legend5.jpg"> $LegendArray.get(4)</TD>
#else
<TD> </TD>
#end
#if ($LegendArray.size() > 5)
<TD NOWRAP><IMG SRC="legend6.jpg"> $LegendArray.get(5)</TD>
#else
<TD> </TD>
#end
</TR>
</TABLE>

This will create a graph that looks similar to the following:

Legend Colors and Symbols

To create your own legend images, you will need to know the graph colors and symbols for each line. Colors and symbols are assigned to each variable in order. You can skip a color/symbol combination by giving putting an empty string ("") in that place in the list instead of a variable name. For example the following will use the first and third line combination.

#LineGraph(["Sales", "", "Revenue"]

The following is a list of graph colors and symbols used in FML graphs:

	Legend	HTML Color	Symbol
1		#6C7C93	circle
2		#CC6666	square
3		#85BA78	triangle
4		#D7DB80	circle
5		#D38C2C	square
6		#A886A8	triangle
7		#345447	circle
8		#59A8AC	square
9		#A78943	triangle
10		#408E3E	circle
11		#63323C	square
12		#AD7952	triangle
13		#5C9876	circle
14		#854D86	square
15		#4D4DB3	triangle
16		#CEC731	circle
17		#EA8D48	square
18		#435A3F	triangle

All of the symbols are available for download at:

http://www.forio.com/broadcastdocs/downloads/legend_images.zip