Version: 2.2.1 +
Object Type: Output Object
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.
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
Possible values are 'True' or 'False'. If the value is 'False', then the object can not be used within the application.
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.
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.
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.
The name of the object.
Here a comment can be entered. For example a short description of the object.
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.
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 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.
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.
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.
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.
This property enables you to add effects to the background of the graph, such as a grid.
Here you can enter a background image for the graph.
Here the CssClass can be entered. In the stylesheet you can define the style elements that belong to this class.
Possible values are 'True' or 'False'. If the property is set to 'True', then within the series the property MapAreaAttributes can be used.
Here you can configure the font that is used in the graph.
Here you can configure the color of the font that is used in the graph.
The height of the graph. Because Futurama renders an image it is not possible to set the height in a stylesheet.
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.
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.
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.
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.
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.
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.
This example shows the usage of the GraphConverter.
Download the Futurama Document Graph Example.
- Open the XML-document which is contained in the zip-file in the Futurama Editor (Version 220.127.116.11 or later).
- Here a Graph object can be seen within the WebPage.
- The input consists of a range that represents the X axis. Therefore it is referred to in the XValues property.
- 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.
- 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.
This example shows the usage of UseCustomLabels.
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.
- In the Editor select the Range 'XValues', these represent the current values on the X-axis.
- 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.
- In order to make sure our Graph shows 'Labels' instead of the dates, expand the property 'Label' of the GraphConverter.
- 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.
- 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.