Properties

Owned by Konradin Schoemers (Unlicensed)
Last updated: Jul 01, 2019 by Stefanie Schröder (Unlicensed)
5 min read


Basically, there are two possibilities to maintain the features of graphomate sparklines: with the Standard Properties Sheet, which lists all parameters in a structured list or with the Additional Properties Sheet. The latter provides a user-friendly interface.

The Checkboxes  next to the features in the Additional Properties Sheet are used to control the visibility of elements.

The chosen Data Source can only be attributed to the component via drag&drop or via the Standard Properties Sheet under Data Binding.

Clicking the F5 (Reload Application) key reinitializes the canvas as well as the Additional Properties Sheet. This is sometimes necessary when changes in the Properties are not directly accepted in the canvas.

Data Tab

The Data Tab shows the selected data source; by default, the complete resultset is used to generate sparklines. With the „Select“ button, the result set can be narrowed down to a more limited selection.

Data Alignment

The interpretation of the result set as rows or columns can be determined here.

Chart Type

This control governs whether the data is depictes as line chart or bar chart.

Bar Width Factor

If Bars is chosen as chart type, this value is used to determine the ratio between bar width and blank spaces between bars. A value of 1 will result in no blank spaces, 0.5 will make bars and spaces evently sized.

Title Input

Here, a title for the component is entered. If the checkbox is activated, this is displayed. Line breaks will be applied; it is also possible to format the title with HTML and (inline) CSS.


Appearance Tab

Text Formatting

In this section, font sizes and font family of texts are determined.

Height of Charts Elements

The option Padding between sparklines governs the space between individual sparklines. The height of the sparklines is determined by the font size.

Value Format

Select the format of the Category Labels:

  • Basic
    Select the format of the absolute and percentage values according to guidelines of numeral.js – see Appendix page 13.
    Locale sets the label country format in the Basic mode. DE, FR, EN and AUTO are available options. Choosing AUTO the Locale is retrieved from the Data Source.
  • Extended
    If a fixed format is preferred, put the format for absolute and percentage values here. Choosing a “(“ in the box Negative Sign will show negative values in brackets: (1234). The parameter in the box Scaling is used as a divisor for scaling the data label.

The resulting format string can also be set via scripting language.

Color Configuration

In this section, the colors to be used by the sparkline extension are determined.


Behavior Tab

Display Elements

This section comprises all options concerning the visibility of sparkline elements.

  • Category Labels governs the display of category labels.
  • Min/Max Highlight: If this option is checked, the maximum and minimum of individual sparklines is marked with a little colored dot (by default green and red; to be determined on the Appearance tab).
  • Leading Values displays the first value of the data series for a sparkline in front of the sparkline.
  • Trailing Values displays the last value of the data series for a sparkline after the sparkline.
  • Overall Range: If this option is activated, the position of the sparkline within the whole result set is displayed as a grey bar; please refer to Description on Sparkline Elements.

Zoom

If the checkboxis activated, a Zoom-Popup is opend when a sparkline is selected.

  • Animate Popup allows to switch to an animated zoom popup (please refer to Description on Sparkline Elements).
  • Category Label as Headline: If activated, the category label shown in front of the clicked sparkline is used as headline of the zoom window. If the mouse cursor hovers over a sparkline in the zoom, the text is replaced with the category label of the line hovered over. This is reset as soon as the mouse moves away from the line.
  • Tooltip activates a tooltip with additional data on mouse hovering over a line in the zoom window.
  • Zoom Height determines the height of the zoom popup. The height of the zoom can never be larger than the height of the sparkline component. The zoom width is governed by the component width.
  • Duration of Animation: Here you can specify the duration of the zoom animation in milliseconds
  • Font Size: This options governs the font size within the zoom popup.
  • Line Size: Define the thickness of the line in px.

Ruler

  • Ruler activates a vertical line over all visible sparklines, which is displayed when the mouse pointer hovers over the component. Currently, this option is not supported on mobile devices.
  • Category Labels in Ruler displays the category labels at the end of the Ruler


Search Tab

At this point you can search for the name, function or group of a property which are displayed at the Additional Properties Sheet. The appropriate settings are then displayed directly and can be changed here.


Info Popup

Here you can find the version number of our graphomate sparklines as well as a link where you may report bugs or propose wishes for new features.

A list of all open-source libraries that we used can be found under Credits.