How to Create Graphs

Creating a graph in FML is easy. You can create line graphs, spark line graphs, pie graphs, bar graphs, bar graphs over time, and stacked bar graphs.

A line graph with three lines looks like this:

To generate this graph, you can use the following FML statement in your web page:

 

#LineGraph(['Total Revenue', 'Total Cost', 'Profit'] 500 350)  
 

 

The output from this macro is a 3 line graph that is 500 pixels wide by 350 pixels tall.

Notice that the variables are enclosed in square brackets and separated by commas, but the width and height (500 and 350) are separated only by spaces.

To create other types of graphs, use these macros. Note that the variable list is a comma separated list of variables. Width and height are measured in pixels.

Statement

Description

#LineGraph([variablelist] width height)

Creates a line graph (over time)

#SparkLineGraph([variablelist] width height steps bgcolor)

Creates a "spark line" graph.  See below for more info.

#PieGraph([variablelist] width height)

Creates a pie chart (with values at the current point in time)

#BarGraph([variablelist] width height)

Creates a bar chart (with values at the current point in time)

#TimeBarGraph([variablelist] width height)

Creates a bar chart (with values over time)

#StackedBarGraph([variablelist] stackheight width height)

Creates a stacked bar chart from a list of variables with the given stack height.

 

A special type of graph is the "Spark Line Graph".  This is a simple line graph with no axis and no legend.    It is intended to be used as a small graph inline with text.  The width of the graph will grow depending on the current step.  For more information, see Edward Tufte's article "Sparklines: Intense, Simple, Word-Sized Graphics".

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1

 

Custom Graphs

You can also customize the look and feel of the graphs by using the more detailed custom macros. Here is a list of the custom graph macros.

Statement

#CustomLineGraph([variables] width height bgcolor legendvisible xlabel ylabel xincrement)

#CustomPieGraph([variables] width height bgcolor legendvisible labelsvisible rotation ellipse exploded)

#CustomBarGraph([variables] width height bgcolor legendvisible xlabel ylabel orientation)

#CustomTimeBarGraph([variables] width height bgcolor legendvisible xlabel ylabel orientation xincrement)

#CustomStackedBarGraph([variables] stackHeight width height [legendlabels] [barlabels] bgcolor legendvisible labelsvisible xlabel ylabel orientation)

 

Getting the arguments right is the only tricky part of using the graph macros. Variables are passed in as an FML array, and so must be within square brackets separated by commas.

Here is an explanation of each of the arguments to the graph macros.

Argument

Example

Description

[variables]

["Revenue", "Cost"]

list of variables

stackheight

2

number of items to stack in a stacked bar graph

width

500

width of JPEG image, in pixels

steps

20

the number of most recent steps to display (e.g. "last 10 steps").  If zero, will always show all steps.

height

300

height of JPEG image, in pixels

[legendlabels]

["Last Year", "This Year"]

legend corresponding to stack in stacked bar graph

[barlabels]

["Revenue", "Cost"]

labels to go underneath bars in stacked bar graph

bgcolor

"0xFFFFFF"

color in hex format (example is white)

legendvisible

true

is the legend visible (true or false)

xlabel

"years"

label for x axis (must be in quotes)

ylabel

"dollars"

label for y axis (must be in quotes)

xincrement

0.5

increment between ticks on x axis

labelsvisible

true

are the labels for the pie chart and bar chart visible

rotation

3.14

degree of rotation of rotation of the pie chart, in radians (0 to 6.28)

ellipse

1

ratio of height to width of the ellipse

exploded

1

index of the "exploded" segment in the pie graph (use 0 for no exploded segment)

orientation

0

0 for vertical bars, 1 for horizontal bars

 

Here is the complete HTML with statements used to produce graphs of varying sizes. The graph statements are in bold. The actual graphs produced follow the HTML.

 

<table border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">

<tr><td colspan="2">Line Graph</td>
<td>#LineGraph(['Total Revenue', 'Total Cost', 'Profit'] 375 200)</td>
<td>#CustomLineGraph(['Total Revenue', 'Total Cost', 'Profit'] 375 200 "0xEEEEEE" true "year" "$$" 2)</td>
</tr>

<tr><td colspan="2">Pie Graph</td>
<td>#PieGraph(['Revenue1', 'Revenue2'] 375 200 )</td>
<td>#CustomPieGraph(['Revenue1', 'Revenue2'] 375 200 "0xEEEEEE" true false "1.4" "0.6" 1)</td>
</tr>

<tr><td colspan="2">Bar Graph</td>
<td>#BarGraph(['Revenue1', 'Revenue2'] 300 200)</td>
<td>#CustomBarGraph(['Revenue1', 'Revenue2'] 375 200 "0xEEEEEE" true "Products" "$$" 0)</td>
</tr>

<tr><td colspan="2">Time Bar Graph</td>
<td>#TimeBarGraph(['Total Revenue', 'Total Cost', 'Profit'] 375 200)</td>
<td>#CustomTimeBarGraph( ['Total Revenue', 'Total Cost', 'Profit'] 375 200 "0xEEEEEE" true "year" "$$" 0 2)</td>
</tr>
 

<tr><td colspan="2">Stacked Bar Graph</td>
<td>#StackedBarGraph(["Revenue1","Cost1","Revenue2","Cost2"]  2 375 200 )</td>
<td>#CustomStackedBarGraph(["Revenue1","Cost1","Revenue2","Cost2"] 2 375 200 ["Product1","Product2"]["Revenue","Cost"] "0xEEEEEE"  true true "" "" 0)</td>
</tr>

<tr><td colspan="2">Spark Line Graph</td>
<TD>Status: #SparkLineGraph(["Profit"] 50 15 0 "0xEEEEEE") Profit has been up and down</td>
<td></td>
</tr>
</table>
 

 

 

And here are the actual graphs produced:

Line Graph

Pie Graph

Bar Graph

Time Bar Graph

Stacked Bar Graph

Spark Line Graph