How to Create Tables

A table displays rows and columns of data, showing how your variables change over time. Here is an example of a table:

If you don't care how the FML code works, just copy the code in the text box below and replace ModelVariable1, ModelVariable2, and ModelVariable3 with the variables from your model that you want to include in the table. If you have more or fewer variable, extend or reduce your list. Remember to put double-quotes around your variable names.

Copy-and-paste this code into your HTML page to create a table:

Let's walk through the code to better understand what each section is doing.

Step 1: Define Variable and Time Lists

First, we need to create two arrays that contain the names of the variables we want to include in the table and the time range, up to the current time.

We do this by using the #set(  ) function. #set sets the value of the FML lists.

The following code creates two lists. One list is called $TableVarList. It's an array of the variables to be included in the table. The second list is called $TimeRange. It's a list of the time steps simulated so far, starting at 0 and going up to the current time step.

Step 2: Create the Titles for Each Column

Next, we create a table and generate the header row. The header row contains the names of the variables, not actual variable results. The following code creates the first row of the table:

The looping occurs between the #foreach and #end statements. The #foreach statement uses the array $TableVarList that defined in the code above it. The #foreach takes a list of values in $TableVarList and assigns each one in turn to the variable $VariableName, executing the body of the loop (a block) once for each value.

So, for the three names in $TableVarList, we get three passes through the loop with $VariableName being a different value each time.

The HTML generated by the section of FML code above looks like this:

Notice that the <TH> ...</TH> block has been repeated three times, with the variable name outputted each time.

Step 3: Display Variable Data

The third and final step is to display the data in each row. You can do that by using two #foreach loops, one for the variables and one for the time steps, as shown:

First, for the six years in $TimeRange, we get three passes through the loop with $step incrementing from 2003 to 2005.

 In the first column, we output the FML statement $Run.convertStepToTime which outputs the year. Then we start a second #foreach loop that outputs the values for the variables for that time.

The HTML generated by this section of FML code looks like this:

The commas that you see in the HTML above are just '000s separators. Its the <TD>...</TD> that actually separate each variable value in the table.

Displaying Time Horizontally

As an added bonus, below is a table that displays time horizontally, in columns, instead of rows.

Copy-and-paste this code into your HTML page to create a table with time listed in columns. Replace ModelVariable1, ModelVariable2, and ModelVariable3 with the variables from your model that you want to include in the table. If you have more or fewer variable, extend or reduce your list. Remember to put double-quotes around your variable names.