Search

Module: Editor

Version: 2.2.1 +

User: Developer

Object Type: Output Object

Parent of:

no children

Child of:

- WebPage

- WebPanel

 

Description

A GraphConverter object provides a graph as output on a website or within a document (PDF or Word). The GraphConverter enables you to visualize data with a variety of different graph types.

Properties

DebugLogMode (from version 4.1)

Indicates the level of detail of debug information that is logged during runtime of the website to the trace, a logfile, a database etc. The possible values are:

  • None: no debug information is logged
  • Simple: only basic information is given
  • Extended: in addition to the information in the Simple mode the values of all the properties of the object are shown

Enabled

Possible values are 'True' or 'False'. If the value is 'False', then the object can not be used within the application.

IsPublic

Possible values are 'True' or 'False'. If the value is 'False', then the object can only be used within the document where it is created. If the value is 'True', then also from other Futurama documents can be referred to this object. This means that changes in the object also affect the document in which is referred to this object. If the value is 'True' and you attempt to move or delete the object, a warning will be given. To limit these warnings to a minimum it is recommended to set IsPublic to 'True' only when necessary.

ToolTip

In the property Tooltip a text can be entered that is shown in the application when a cursor is moved across the GraphConverter. In this way information about the usage of the GraphConverter can be given to the user. From Futurama version 18.02 it is also possible to define the texts within a ResourceDocument. See the page Text management and Multi-language.

Visible

Possible values are 'True' or 'False'. If the value is 'True', the object will be rendered and therefore displayed in your application. If the value is 'False', the object will not be rendered.

(Name)

The name of the object.

Comment

Here a comment can be entered. For example a short description of the object.

ID

The unique identification number of the object. This number is automatically generated by Futurama on the moment of creation. This number can be used when searching for a certain object in the Find Window.

Series

In this property you can add multiple data series that should be displayed in the graph. After clicking the edit-box, a popup will appear in which series can be added, deleted and organised. For each series an array of input data is required, which represent the Y-values of that specific series. Each array should hold as much elements as the table that is entered in the XValues properties.

Each series has a number of properties of its own, to configure the representation of it. These properties are explained at the bottom of this page.

Annotations  (Futurama 17.09+)

Here you can add and configure an Annotation to a DataPoint. Each annotation contains the following of subproperties:

  • AbsolutePositioning: this property determines if this Annotation is linked to a specific datapoint, or if you want to position it based on the X and Y value. When this property is set to True, AnchorAlignment, OffSetX and OffSetY are not available.
  • AnchorAlignment: this property determines how the Annotation is anchored to the datapoint.
  • AnnotationType: the type of Annotation that you want to use. Some properties are only available for specific AnnotationTypes
  • BackColor: the color of the background of the annotation
  • BorderColor: the color of the border and the lines of the annotation
  • CallOutStyle: the type of CallOut you want to use. Only available for the AnnotationType CallOut
  • EnableSmartLabels: this property is currently not in use
  • ForeColor: the color of the texts of the annotation
  • HideOverlapped: this property is currently not in use
  • ImageFileName: the relative path (relative to the Futurama document that is opened) of the image file that is used in AnnotationStyle Image
  • OffSetX: the percentage of the graph width to offset the position in horizontal direction. Negative offset means annotation goes up.
  • OffSetY: the percentage of the graph height to offset the position in vertical direction. Negative offset means annotation goes to the left.
  • Height: the height of a line. Only applicable for AnnotationStyle: Line, VerticalLine or HorizontalLine
  • LineDashStyle: the line dash style of the line. Only applicable for AnnotationStyle: Line, VerticalLine or HorizontalLine
  • LineEnd. The type of picture to use for the end of the line. Only applicable for AnnotationStyle: Line, VerticalLine or HorizontalLine
  • LineStart: The type of start picture to use for the start of the line. Only applicable for AnnotationStyle: Line, VerticalLine or HorizontalLine
  • LineStart: The width of the line. Only applicable for AnnotationStyle: Line, VerticalLine or HorizontalLine

AntiAliasing

AntiAliasing is the process of making the edges in your graph smoother. This applies to the series in the graph as well as the characters displayed in e.g. the axes or legenda. Possible values are 'Text', 'Graphics', 'All' and 'None'. Pay attention, if the value ‘Text’ or ‘All’ is selected, the background color can’t be transparent. You can only use these values with a solid background color.

BackColor

Here you can enter the background color of the graph. With this color you can also use a level of transparency. To use the transparency, you have to add the level of transparency in front of the color. This way an Argb color code is used, where the A stands for the level of transparency. The value of A is an integer between 0 and 255, where 255 is the default with no transparency and 0 means the color is fully transparent. If only the rgb color code is supplied, the default A value of 255 will be used.

BackGradientEndColor

This property only applies when the BackGradientType property (below) is not set to 'None'. In the BackGradientEndColor property you can then specify a second color to create a gradient background.

BackGradientType

In the BackGradientType property you can configure your graph to have a gradient background. If the value 'None' is selected, the background color is equal to the color set in the BackColor property. If one of the other values is chosen, the background will have a gradient that transits from the BackColor to the BackGradientEndColor, in the direction specified by the chosen BackGradientType.

BackHatchStyle

This property enables you to add effects to the background of the graph, such as a grid.

BackImage

Here you can enter a background image for the graph.

CssClass

Here the CssClass can be entered. In the stylesheet you can define the style elements that belong to this class.

EnableMap

Possible values are 'True' or 'False'. If the property is set to 'True', then within the series the property MapAreaAttributes can be used.

Font

Here you can configure the font that is used in the graph.

ForeColor

Here you can configure the color of the font that is used in the graph.

Height

The height of the graph. Because Futurama renders an image it is not possible to set the height in a stylesheet.

JPEGCompression

Possible values are integers between 0 and 100. A value of 0 means no compression is applied. A value of 100 means maximum compression is applied. Using more compression means that the size of the image (in kB) will decrease but also that the quality of the image will diminish. So there is a trade-of between the size and the quality.

Label

The labels that are displayed at the X- and Y-axis of the graph are by default determined by resp. the XValues property for the X-axis, and the height of the series for the Y-axis. Within the properties XAxis and YAxis you can configure yourself how these labels should be displayed.
In the Label property, however, you can further configure the labels at the X-axis, which enables you to e.g. display symbols at the axes. Therefore the following subproperties should be filled:

  • Labels: Here you should enter a table with the string-elements that should be displayed in your graph. You can also insert symbols e.g. to represent a time event at the X-axis. The table should have the same length as the table in de propertie Values, below.
  • UseCustomLabels: Possible values are 'True' or 'False'. If the value is 'True', then the labels above will be displayed in the graph. Note that currently UseCustomLabels only work when the Type of Values (below) is Date.
  • Values: Here you enter the table with the values of the X-axis that locate the places where the corresponding labels out of the Labels property should be displayed. This table can be the same as the one entered in the XValues property, but that is not needed. There are a couple of requirements:
    • The table does have to be of the same Type as the XValues table.
    • The minimum and maximum values have to be within the range of the XValues table.
    • The table has to have the same length as the Label property table.
Example 2 below shows how to apply UseCustomLabels in order to only show the first and last value on the X-axis.

Legend

In the property Legend you can configure whether and how a legend of the graph should be displayed. The property is divided into the following subproperties:

  • Alignment: Indicates where the legend should be displayed with reference to the graph. Possible values are 'Near', 'Center' or 'Far'. The outcome depends on the Docking property.
  • BackColor: The background color of the legend.
  • Docking: Here you enter whether the legend should be placed at the top, right, bottom or left of the graph.
  • FontColor: The color of the font of the legend. The Font itself is set in the properties of the Graphconverter itself.
  • InsideChart: Possible values are 'True' or 'False'. This property indicates whether the legend should be placed inside ('True') or outside ('False') the graph.
  • Reversed: Possible values are 'True' or 'False'. This property indicates whether the legend should be in the same order as the series are entered, or in reverse order.
  • Style: Here you can enter if the legend should be displayed as a row, table or column.
  • TextWrapTreshold: Here you enter the number of characters after which the next word of the series name should be displayed at a new line.
  • Visible: Indicates whether the legend should be displayed or not.

Resolution

Here you can enter the resolution in which the graph will be displayed. The default is 96 dpi, which is sufficient for on a screen. The GraphConverter can be used to display a graph on screen, but it can also generate a graph for a document. For the latter use, the resolution should be increased to create a sharp image. This can be achieved by using an Actionobject to change the Resolution property on the moment of creating the document. Note that a second Action is necessary then to revert the Resolution property of the graph to it's original value. Otherwise the altered Resolution will also be used when displaying the Graph on screen from then on which may lead to improper results.

Width

The width of the graph. Because Futurama renders an image it is not possible to set the width in a stylesheet.

XAxis and YAxis

Here you can configure the X-axis and the Y-axis. Both properties contain the same list of subproperties:

  • Caption: Here you can enter the title of the axis. From Futurama version 18.02 it is also possible to define the texts within a ResourceDocument. See the page Text management and Multi-language.
  • Font: Here you can enter the font for the title and values of the axis.
  • Format: Here you can enter the format of the values of the axis.
  • GridLineColor: Here you can enter the color of the gridline displayed in the graph.
  • IntervalInfo: This property is divided into subproperties itself. You can use these subproperties to configure the places where the values of the axis should be displayed:
    • Interval: The interval of the axis in terms of the type set in IntervalType. 0 means auto.
    • IntervalType: The type of interval e.g. number, years, days, hours etc. It indicates how the value at the Interval property should be processed.
    • IntervalOffset: The offset at which the interval of the axis starts in terms of the type set in IntervalOffsetType. 0 means auto. It indicates the distance between the start of the graph and the first label.
    • IntervalOffsetType: The type of IntervalOffSet e.g. number, years, days, hours etc. It indicates how the input at the IntervalOffset property should be processed.
    • ShowTickMark: Indicates whether tickmarks at the axis should be displayed or not.
  • LineColor: The color of the axis of the graph.
  • Maximum: Here you can enter a maximum for the scale of the Y-axis. If this property is set, the marking of the Y-axis will be consistent. This option can be used when you want to compare different scenarios.
  • Scale: Possible values are 'Normative' and 'Linear'. Default is 'Automatic'.
  • ShowMargin: Possible values are 'True' or 'False'. If the value is 'True', then the graph will have a small indent.

XValues

Here you have to enter a vector-type object ( e.g. a one-column table, range or formula) that represents the division of the X-axis. The x value has to have the same length as the data property the series of the graph. The values in the XValues determine where the corresponding values of the series are divided horizontally, but are not necessarily the ones which are actually being displayed. In the property Label the values can be stated that are to be displayed. XValues does not apply to pie charts.

Sub properties of the series

BackGradientEndColor

See the Graph properties above. This property only applies to ChartTypes that consist of areas.

BackGradientType

See the Graph properties above. This property only applies to ChartTypes that consist of areas.

BackHatchStyle

See the Graph properties above. This property only applies to ChartTypes that consist of areas.

BorderColor

The BorderColor property indicates the color of the line displayed. This property only applies to ChartTypes that consist of lines, or to Piecharts, where it applies to the border around the piece of the pie.

BorderStyle

The BorderStyle property indicates the style of the line displayed. This property only applies to ChartTypes that consist of lines, or to Piecharts, where it applies to the border around the piece of the pie.

BorderWidth

The BorderWidth property indicates the width of the line displayed. This property only applies to ChartTypes that consist of lines, or to Piecharts, where it applies to the border around the piece of the pie.

ChartType

Here you can choose the type of graph for your data series, for example a line chart, or bar graph. It's also possible to combine different chart types in one graph.

Most chart types are constructed as follows: The x-axis of the graph is represented by the X value property of Graphconverter. Each series adds y values using the vector-type data property.

Pie & Dougnut charts are fundamentally different in the sense that each series represents a piece of the pie. For this reason a pie-type series can only scalar type data. Pie/Doughnut series also don’t use X-value property of graphconverter, and can also not be mixed with other types of series.

Comment

See the Graph properties above.

Color

Here you can configure the color of the specific data series. See the Backcolor property for the use of transparent colors.

Data

Here you enter an array with the Y-values that should be displayed as a series. You can enter an array directly by creating a table, but you will often create a reference to a table already created elsewhere in your application. The length of the array has to be equal to the length of the table entered in the XValues property (see below). If the latter is not used the length has to be equal to the length of the table entered in the XValues property of the Graph itself.

DebugLogMode (from version 4.1)

See the Graph properties above.

DisplayName (from Futurama 4.2.1)

By default, the legend will display the names of the series as they are added in the series Editor. If you want a different name to be displayed, you can enter this name in the property DisplayName. This enables you to use special characters. From Futurama version 18.02 it is also possible to define the texts within a ResourceDocument. See the page Text management and Multi-language.

DoughnutInnerRadius

When ChartType is set to Doughnut, this property becomes available. Set a percentage between 0-99, a value of 99 will maximize the hole within the doughnut. Only visible on the first series, and only when ChartType is set to Doughnut.

ID

See the Graph properties above.

IsPublic

See the Graph properties above.

MapAreaAttributes (only for DocType XHTML)

You can attach an attribute to a series of a graph. In that way, you can for instance use JavaScript to make parts of your graph clickable, or create tooltips which give the exact values of the graph. The options are infinite, as each series can have its own attribute.
This property only applies when the property EnableMap is set to 'True'.

Name

See the Graph properties above.

PieceExploded

Explodes this piece of the pie. Multiple pieces can be exploded. Active for every serie you set it on. Only available with pie charts.

PieceDrawingStyle

Different pie drawing styles. Possible values are Default, SoftEdge or Concaver. Available only with pie charts, and only on the first series.

PieLabelStyle

Changes how labels are displayed. Possible values are Inside, Outside or None. It is also possible to use tool tip for pie labels. Available only with pie charts, and only on the first series.

ShadowColor

In the ShadowColor property you can enter a second color which will be displayed as a shadow to the line displayed. Available only with pie charts, and only on the first series.

ShadowOffset

In the ShadowOffset property you can enter the distance in pixels between the series line and its shadow. Available only with pie charts, and only on the first series.

Tooltip

See the Graph properties above.

Visible

Indicates whether a specific series should be displayed or not.

XValues

This property can be used when you want a series to have a different horizontal division as configured in the XValues property of the GraphConverter itself.

Rendering

A Graph object is rendered as an image:

If you've entered a classname in the CssClass property, this will be added as a class attribute. Be aware that this class does not enable you to change the colors of for example a specific series. The graph is rendered as an image as a whole, so changes in the layout using CSS are not possible.

If you have set the property EnableMap to 'True', then a map element will also be rendered, containing the different series areas of the graph and their MapAreAttributes.

Note that the rendering of objects depends on the DocType selected for your Futurama Document. The rendering mentioned above is based on the DocType XHTML_1_0. If your using the old DocType HMTL4_Transitional, please consult the Document page for further information.

Example 1

This example shows the usage of the GraphConverter.

Download

Download the Futurama Document Graph Example.

Description

  1. Open the XML-document which is contained in the zip-file in the Futurama Editor (Version 4.2.1.1 or later).
  2. Here a Graph object can be seen within the WebPage.
  3. The input consists of a range that represents the X axis. Therefore it is referred to in the XValues property.
  4. Then there are two formulas that are input for the GraphConverter. Both are formulas where a calculation is performed on the input range. In this way the series have the same length as the XValues, which is necessary. In the GraphConverter, two series are added, in which is referred to the input series in the Data property.
  5. You can see the result of this Graph in the Results Window of the Futurama Editor. When running this application in your browser, you can also see the graph displayed in your website.

Example 2

This example shows the usage of UseCustomLabels.

Description

In the Graph of Example 1 dates are shown on the X-axis by default. The values on the X-axis can be adjusted however in order to represent, for example, only the first and last date, hereby omitting all the dates in between.

  1. In the Editor select the Range 'XValues', these represent the current values on the X-axis.
  2. The Formula 'Labels' is made based on the Range 'XValues'. Note that it is of type string and is designed to only show the smallest and largest date using the format 'MMM yyyy'. In the Result window the resulting labels can be evaluated.
  3. In order to make sure our Graph shows 'Labels' instead of the dates, expand the property 'Label' of the GraphConverter.
  4. In Label | Labels a Reference is made to the labels, while in Label | Values a Reference is made to the original (base) XValues. Label | UseCustomLabels is currently set to False which implies the XValues are used.
  5. Set Label | UseCustomLabels to True, save the application and open it again in a browser. On the X-axis the custom labels are now shown instead of the dates.

Related Topics

- Futurama Objects: The Atlas chapter that describes all Futurama objects. See the Output-section for a description of the type of objects this object belongs to.

Relevant Tutorials

- Adding Graphs in Futurama: This tutorial shows how you how to add a graph to your website.

 

Updated: 2017-10-11