# 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