Search

 

Module: Editor

Version: 4.2.1 +

User: Developer

Difficulty: Easy

Introduction

In this exercise we will display a graph in our website.

 

Prerequisites

- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Adding interactivity to your website first, is recommended. 

 

 

Description 

The population of the entire earth is still growing, that is a generally known fact. We want to show how the population was 200 years ago, and how it is expected to be in 40 years, shown apart for the different continents. The most insightful way to do this is by using a graph. 

Assignment

Create a WebPage with a Graph in it, that displays the following information:

Year   Asia  Africa  Europe  America  Oceania 
1750

502

106 163 18 2
1800 635 107 203 31 2
1850 809 111 276 54 2
1900 947 133 408 156 6
1950 1402 221 547 339 13
2000 3634 767 729 818 30
2050 5268 1766 628 1201 46

You can us the the following steps to do so:

  1. Create a Node in which you collect the Data:
    - Create a DataTable in which you copy the Content above. (Enter the Years in the Index column)
    - Create a Range object with the Years of the Data. (So from 1750 to 2050 with stepsize 50)
    - Create formulas for each of the continents in which the population figures are returned. You can use the Vlookup formula for this, in which you refer to the Range as lookup value. It's also possible to use the Subtable formula. 
  2. Create a GraphConverter in the WebPage of your website:
    - Click on the Edit-box of the Series property, and add 5 members to the series collection. Give them the names of the corresponding continents. (These names will be displayed in the legend of the graph)
    - In the Data property of the series, refer to the corresponding data of the series.
    - Choose 'StackedArea' as the ChartType of each series, and choose an appropriate color.
    - In the XValues property of the Graph converter, refer to the Range with the years. These numbers determine the X-coördinates of the values in the series.
    - Choose an appropriate height and width for your graph.

Tips

  • Remember to select the webpage as your StartWebPage in your Document.
  • It's also possible to create the data per continent directly as a single array, instead of including one entire data table at first. However, this will make your data less maintainable.
  • A legend is shown next to the Graph. You can configure (or hide) the legend in the Legend property of the graph.
  • The values at the X-axis are determined by the space available. You can change this either by choosing an interval in the Interval property (within the XAxis property), or by using custom labels in the Label property. 
  • More information about the GraphConverter properties can be found in the manual page GraphConverter.

Solutions

Download

image

You can download our solution for this assignment by clicking the image at the right. (Futurama 4.2.1.2)
Please note that you can very well have a different solution that is just as good as ours.

Variations

If you want some more practise on this subject, you could try the extra exercises below.
We won't provide a solution for these variations, just consider them as a way to further experiment with Futurama.
  • (Easy): Change the graph in the following ways:
    - Add captions at both the X- and Y-axis.
    - Move the legend to the bottom of the graph, and display the series next to each other instead of below each other.
    - Change the sequence of the series, put Oceania at the bottom.
    - Change the colors used in the graph, for instance the colors of the axis and the gridline color.
  • (Medium): Add your expectation for the year 2100 to the data. This should only concern entering an extra row to your DataTable, and updating your Range. If you have more work to do, then you can improve your solution. 
  • (Difficult): Ensure that the range of years of your DataTable is displayed on the X-Axis. 

Updated: 2013-01-08