# Visual extra

- Package name: visual

# Visual: Target gauge Total

Show lifetime performance speedometer

### Properties

- Type: [Visual extra](https://docs.tsnocode.com/books/field-type-reference/chapter/visual-extra)
- Groupable: No
- Show in lists: No
- Searchable: No

## <span class="mw-headline" id="bkmrk-user-interface-1">User interface</span>

<span class="mw-headline">Field in show mode</span>

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2025-07/scaled-1680-/z5O0rHYkNVkQjwNo-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2025-07/z5O0rHYkNVkQjwNo-image.png)

Due to its nature this field has no special editing mode.

## <span class="mw-headline" id="bkmrk-configuration-1">Configuration</span>

This field does not need deployment (no ekstra database fields required).

No configuration required for this field type

## <span class="mw-headline" id="bkmrk-developer-info-1">Developer info</span>

- FeltTypeID: 810
- SQL datatype: N/A
- Class name: FieldGaugePerformance

# Visual: Target gauge Step

Show performance speedometer for this step

### Properties

- Type: [Visual extra](https://docs.tsnocode.com/books/field-type-reference/chapter/visual-extra)
- Groupable: No
- Show in lists: No
- Searchable: No

## <span class="mw-headline" id="bkmrk-user-interface-1">User interface</span>

<span class="mw-headline">Field in show mode</span>

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2025-07/scaled-1680-/QlauF43B4W1nZ2zD-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2025-07/QlauF43B4W1nZ2zD-image.png)

Due to its nature this field has no special editing mode.

## <span class="mw-headline" id="bkmrk-configuration-1">Configuration</span>

This field does not need deployment (no ekstra database fields required).

No configuration required for this field type

## <span class="mw-headline" id="bkmrk-developer-info-1">Developer info</span>

- FeltTypeID: 811
- SQL datatype: N/A
- Class name: FieldGaugePerformanceStep

# Canvas: Freehand

Draw, freehand, in a canvas

### Properties

- Type: [Visual extra](https://docs.tsnocode.com/books/field-type-reference/chapter/visual-extra)
- Groupable: \[YES/NO\]
- Show in lists: \[YES/NO\]
- Searchable: \[YES/NO\]

## <span class="mw-headline" id="bkmrk-user-interface-1">User interface</span>

<span class="mw-headline">Field in show mode</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

<span class="mw-headline">Field in edit mode</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

## <span class="mw-headline" id="bkmrk-configuration-1">Configuration</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

<span class="mw-headline">\[Description of configs\]</span>

## <span class="mw-headline" id="bkmrk-developer-info-1">Developer info</span>

- FeltTypeID: 812
- SQL datatype: MEDIUMTEXT
- Class name: FieldCanvasDrawing

# Canvas: Marking

Mark a spot on an image

### Properties

- Type: [Visual extra](https://docs.tsnocode.com/books/field-type-reference/chapter/visual-extra)
- Groupable: \[YES/NO\]
- Show in lists: \[YES/NO\]
- Searchable: \[YES/NO\]

## <span class="mw-headline" id="bkmrk-user-interface-1">User interface</span>

<span class="mw-headline">Field in show mode</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

<span class="mw-headline">Field in edit mode</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

## <span class="mw-headline" id="bkmrk-configuration-1">Configuration</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

<span class="mw-headline">\[Description of configs\]</span>

## <span class="mw-headline" id="bkmrk-developer-info-1">Developer info</span>

- FeltTypeID: 813
- SQL datatype: TINYTEXT
- Class name: FieldCanvasMarking

# Sliderbar

Numbers with decimal comma using a sliderbar for input

### Properties

- Type: [Visual extra](https://docs.tsnocode.com/books/field-type-reference/chapter/visual-extra)
- Groupable: No
- Show in lists: Yes
- Searchable: Yes
- Requires configuration: \[Yes/no\]

## <span class="mw-headline" id="bkmrk-user-interface-1">User interface</span>

<span class="mw-headline">Field in show mode</span>

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2025-07/scaled-1680-/TbbEeoRJRIcYABQc-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2025-07/TbbEeoRJRIcYABQc-image.png)

<span class="mw-headline">Field in edit mode</span>

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2025-07/scaled-1680-/tyl9VY42gu0H5ODk-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2025-07/tyl9VY42gu0H5ODk-image.png)

## <span class="mw-headline" id="bkmrk-configuration-1">Configuration</span>

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2025-07/scaled-1680-/WsqQf6VWDc01nIpG-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2025-07/WsqQf6VWDc01nIpG-image.png)

Required:

- Minimal value
- Maximum value

Options:

- Making the slider display vertically 
    - orientation: "vertical",
- Using steps i the slider 
    - step: 10,
- JSON configuration notes: [\[1\]](http://jqueryui.com/slider/)

## <span class="mw-headline" id="bkmrk-developer-info-1">Developer info</span>

- FeltTypeID: 911
- SQL datatype: DECIMAL(20,6)
- Class name: FieldSliderBarDecimal

# SQL: Diagram query

Shows an sql-query as a graph, just like the [dashboard widget](https://docs.tsnocode.com/books/dashboards/chapter/diagram-widget-configuration "Dashboard diagram widget configuration"), with the same configs as the [sql-subselect field](https://docs.tsnocode.com/books/field-type-reference/page/sql-subselect "FieldSubselect").

### Properties

- Type: [Visual extra](https://docs.tsnocode.com/books/field-type-reference/chapter/visual-extra)
- Groupable: No
- Show in lists: No
- Searchable: No
- Requires configuration: Yes

## <span class="mw-headline" id="bkmrk-user-interface-1">User interface</span>

<span class="mw-headline">Field in show mode, when rendering a line-chart.</span>

[![image.png](https://docs.tsnocode.com/uploads/images/gallery/2025-07/scaled-1680-/bD5lWyykTBGLAbwL-image.png)](https://docs.tsnocode.com/uploads/images/gallery/2025-07/bD5lWyykTBGLAbwL-image.png)

Due to its nature this field has no special editing mode.

## <span class="mw-headline" id="bkmrk-configuration-1">Configuration</span>

<span class="mw-headline">\[INSERT IMAGE\]</span>

Either, write an sql-query that fetches the exact data to be shown, as described here.

Or, write a simple sql-query that fetches the lines of data and select render-mode "Parse listed data".

Select a graph type, remember that the expected structure of the data is different for circle- and xy-graphs.

### <span class="mw-headline" id="bkmrk-parse-listed-data-1">Parse listed data</span>

This option parses the given data in the following way.

- Column 1 will be used as x-axis values.
- Column 2 will be used for datasets in the graph.
- Column 3 will be used for y-axis values.

#### <span class="mw-headline" id="bkmrk-example-1">Example</span>

This is data generated by the query: `SELECT DATE, CATEGORY, AMOUNT FROM data_demoentity ORDER BY DATE ASC`

<table class="wikitable" id="bkmrk-date-category-amount"><tbody><tr><th>Date</th><th>Category</th><th>Amount</th></tr><tr><td>01/01/2024</td><td>Category 1</td><td>10</td></tr><tr><td>01/01/2024</td><td>Category 2</td><td>0</td></tr><tr><td>01/01/2024</td><td>Category 3</td><td>15</td></tr><tr><td>01/02/2024</td><td>Category 1</td><td>20</td></tr><tr><td>01/03/2024</td><td>Category 2</td><td>20</td></tr><tr><td>01/04/2024</td><td>Category 1</td><td>30</td></tr><tr><td>01/04/2024</td><td>Category 2</td><td>10</td></tr><tr><td>01/04/2024</td><td>Category 3</td><td>15</td></tr></tbody></table>

This will be transformed to this, when rendering an xy-graph.

<table class="wikitable" id="bkmrk-title-category-1-cat"><tbody><tr><th>Title</th><th>Category 1</th><th>Category 2</th><th>Category 3</th></tr><tr><td>01/01/2024</td><td>10</td><td>0</td><td>15</td></tr><tr><td>01/02/2024</td><td>20</td><td> </td><td> </td></tr><tr><td>01/03/2024</td><td> </td><td>20</td><td> </td></tr><tr><td>01/04/2024</td><td>30</td><td>10</td><td>15</td></tr></tbody></table>

## <span class="mw-headline" id="bkmrk-developer-info-1">Developer info</span>

- FeltTypeID: 530
- SQL datatype: N/A
- Class name: FieldSubselectDiagram