Create Graph.md

Basic-usage.md

@@ -37,20 +37,20 @@ Press `Create` button in the top toolbar or use `Ctrl+b` (`Cmd+b` for MacOS)
 keyboard shortcut to open a new tab for an inquiry. An inquiry consists of three
 parts: SQL query, result set (result of the query execution) and visualisation
 of the result set. A tab consists of two panels. Each of them can show one of
-the three parts of inquiry. By default the top panel shows SQL query editor and
+the three parts of inquiry. By default, the top panel shows SQL query editor and
 the bottom panel shows the result set. You can switch any panel to any other
-view with corresponding buttons in the right side toolbar.
+view with the  corresponding buttons in the right side toolbar.
 
 * ![](./img/sql.svg) – Switch the panel to an SQL query editor. In that
-  editor you can specify and run not only a `SELECT` statement for getting data
+  editor, you can specify and run not only a `SELECT` statement for getting data
   but also DDL/DML statements for modifying the database.
 * ![](./img/table.svg) – Switch the panel to the result set. Here you
   can see the result of the query execution.
 * ![](./img/visualisation.svg) – Switch the panel to visualisation. This
-  panel allows building a pivot table and charts from the result set.
+  panel allows building a pivot table, a graph or charts from the result set.
 
 > **Note:** The query editor can show you hints: SQL keywords, table and column
-> names. In a common case column names are shown in the hint if you specify the
+> names. In a common case, column names are shown in the hint if you specify the
 > table name, e.g. `SELECT table_name.`. But if there is only one table in your
 > database column names will be always available in the hint. Press `Ctrl+Space`
 > to show a hint explicitly.
@@ -59,7 +59,7 @@ view with corresponding buttons in the right side toolbar.
 
 Press ![](./img/run.svg) button in the right side toolbar of an SQL
 editor panel or use `Ctrl+r` or `Ctrl+Enter` (`Cmd+r` or `Cmd+Enter` for MacOS)
-keyboard shortcut to execute a query in the current opened tab.
+keyboard shortcut to execute a query in the current open tab.
 
 > **Note:**  Running is not available if a query for the current tab is not
 > specified.
@@ -74,14 +74,15 @@ visualisation panel.
 
 * ![](./img/chart.svg) – Switch to a chart type visualisation.
 * ![](./img/pivot.svg) – Switch to a pivot type visualisation.
-
-> **Note:**  All unsaved changes in the current visualisation will be lost when
-> you switch to the other visualisation type.
+* ![](./img/graph.svg) – Switch to a graph type visualisation.
 
 A pivot table can be represented as a regular or multi-header table or
 visualised with a chart.
 Read more details of working with pivot in [Pivot tables][2].
 
+There are some requirements for the result set to build a graph. 
+Read more in [Graph][3].
+
 All customised charts in sqliteviz are created with a `react-chart-editor`
 component (fig. 5). The same component with some additional features is used in
 Plotly Chart Studio. Explore its [documentation][1] to learn how to build charts
@@ -104,3 +105,4 @@ After that, the inquiry will be in the list on `Inquiries` page.
 
 [1]: https://plotly.com/chart-studio-help/tutorials/#basic
 [2]: ../Pivot-table
+[3]: ../Graph

Graph.md

@@ -0,0 +1,54 @@
+# Graph
+
+## Pivot table UI
+
+Sqliteviz allows building pivot tables and visualizing them. To build a graph
+run a query to get data. Then open visualisation panel by clicking ![](./img/visualisation.svg)
+in any of the two side toolbars and choose a pivot mode by clicking ![](./img/graph.svg).
+
+A pivot visualisation has the following settings:
+
+- Columns – choose one or more column names from the result set. The values in
+  the chosen columns will be column names of the pivot table.
+- Rows – choose one or more column names from the result set. The values in the
+  chosen columns will be row names of the pivot table.
+- Order of columns and rows.
+- Aggregator and its arguments – a function which will be used for pivot cell
+  calculation. An aggregator can have from zero to two arguments. An aggregator
+  argument is one of the columns of the result set.
+- View – pivot table visualisation. It can be a table, a heatmap, a chart,
+  etc. See some examples of different views of the same pivot table below.
+
+![Fig. 1: Table](./img/Screenshot_pivot_table.png)
+
+![Fig. 2: Heatmap](./img/Screenshot_pivot_heatmap.png)
+
+![Fig. 3: Horizontal Stacked Bar Chart](./img/Screenshot_pivot_barchart.png)
+
+There are several built-in chart views for a pivot. But you can build your own
+with `Custom chart` view (fig. 4).
+
+![Fig. 4: Custom Chart](./img/Screenshot_pivot_custom_chart.png)
+
+> **Note:**  You can switch to other pivot views and back to `Custom chart` –
+> all your custom chart settings will be remembered. But if you switch the
+> visualisation mode from pivot to any other mode, unsaved changes will be lost.
+
+You can save any visualisation as an image by clicking ![](./img/camera.svg).
+
+## Pivot table SQL
+
+Pivot table (in the form of a result set) can be built on the SQL-level and,
+technically speaking, can be visualised as any other result set. Practically
+though there are a couple of challenges with that:
+
+1. Visualising a dataset of long/tall shape is much more convenient in Plotly
+   (chart editor) rather than one of wide/fat shape.
+2. SQLite doesn't have a special constructs like `PIVOT` or `CROSSTAB` in
+   its SQL dialect.
+
+[How to build a pivot table in SQL(ite)][1] explores two options with static
+(or beforehand-known) and dynamic columns.
+
+[1]: ../How-to-build-a-pivot-table-in-SQ-Lite
+

Home.md

@@ -6,10 +6,11 @@ Welcome to the sqliteviz wiki!
 3. [Multiple file import][9]
 4. [Manage inquiries][2]
 5. [Export current database][4]
-6. [Pivot table][3]
-7. [Predefined inquiries][5]
-8. [Sharing][11]
-9. [Diagnostic information][6]
+6. [Graph][13]
+7. [Pivot table][3]
+8. [Predefined inquiries][5]
+9. [Sharing][11]
+10. [Diagnostic information][6]
 
 ## Examples and tutorials
 1. [How to rename tables and columns after CSV import][8]
@@ -32,3 +33,4 @@ Welcome to the sqliteviz wiki!
 [10]: How-to-build-a-pivot-table-in-SQLite
 [11]: Sharing
 [12]: How-to-rename-tables-and-columns-after-csv-import
+[13]: Graph

img/graph.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 4C5 5.10457 4.10457 6 3 6C1.89543 6 1 5.10457 1 4C1 2.89543 1.89543 2 3 2C4.10457 2 5 2.89543 5 4Z" fill="#A2B1C6"/>
+<path d="M17 7.5C17 8.88071 15.8807 10 14.5 10C13.1193 10 12 8.88071 12 7.5C12 6.11929 13.1193 5 14.5 5C15.8807 5 17 6.11929 17 7.5Z" fill="#A2B1C6"/>
+<path d="M8 13.5C8 14.8807 6.88071 16 5.5 16C4.11929 16 3 14.8807 3 13.5C3 12.1193 4.11929 11 5.5 11C6.88071 11 8 12.1193 8 13.5Z" fill="#A2B1C6"/>
+<path d="M2.93128 5.31436L3.90527 5.08778L5.48693 11.8867L4.51294 12.1133L2.93128 5.31436Z" fill="#A2B1C6"/>
+<path d="M12.9447 7.79159L13.5548 8.58392L7.30516 13.3962L6.69507 12.6038L12.9447 7.79159Z" fill="#A2B1C6"/>
+<path d="M14.1316 6.51712L3.13166 3.51723L2.86844 4.48202L13.8684 7.48191L14.1316 6.51712Z" fill="#A2B1C6"/>
+</svg>

index.md

@@ -4,10 +4,11 @@ Sqliteviz is a single-page offline-first PWA for fully client-side visualisation
 
 With sqliteviz you can:
 
-- run SQL queries against a SQLite database and create Plotly charts and pivot tables based on the result sets
+- run SQL queries against a SQLite database and create Plotly charts, graphs and pivot tables based on the result sets
 - import a CSV, JSON or NDJSON file into a SQLite database and visualize imported data
 - export result set to CSV file
 - manage inquiries and run them against different databases
 - import/export inquiries from/to a JSON file
 - export a modified SQLite database
 - use it offline from your OS application menu like any other desktop app
+

sidebar.json

@@ -8,6 +8,7 @@
 				"/docs/multiple-csv-file-import/",
 				"/docs/manage-inquiries/",
 				"/docs/export-current-database/",
+				"/docs/graph/",
 				"/docs/pivot-table/",
 				"/docs/predefined-inquiries/",
 				"/docs/sharing/",