Data output in the form of a graph on the site

The component is based on the Javascript Infovis Toolkit and is part of the Table component (as a display mode).

Example of a component working on a demo stand -https://demo.web-automation.ru/list/watch/vizualizaciya-dannykh-v-vide-grafa---62

How to configure graph output

In SELECT 1 of the table, we register the nodes of the graph

    -- SELECT 1
    select 'node1' id, 'node1' name,
	union
    select 'node2' id, 'node2' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node3' id, 'node3' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node4' id, 'node4' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node5' id, 'node5' name, '#f00' color, 'circle' type, 3 dim
  • id - node ID (to be used in SELECT 4)
  • name - the name that is displayed on the graph
  • color - label color
  • type - figure (circle, triangle, square)
  • dim - figure size
  • tip - if specified, it will be displayed in the hint when hovering over the node (if the hint processing callback is not specified)

In SELECT 3 we prescribe viewType, graphOptions 

-- SELECT 3
select 'graph' viewType,
    	'{
           "contHeight": "1000px"
        }' graphOptions

In Graph Options, you can pass the JS settings of the $jet.Force Directed component (with the exception of functions).

By default, there are such settings: https://pastebin.com/zdM8U6qn (if any node is replaced (Navigation,Mode, Edge, Label), then you need to register all its settings - your settings completely override the default settings).

В SELECT 4 прописываем связи между узлами:

    select 'node1' nodeFrom, 'node2' nodeTo, '#00f' color
    union
    select 'node2' nodeFrom, 'node3' nodeTo, '#0ff' color
    union
    select 'node3' nodeFrom, 'node2' nodeTo, '#0f0' color
  • nodeFrom, nodeTo - from where and where does the edge of the graph go (id from SELECT 1)
  • color - link color

Note:

1. We don't use paging (i.e. we output all the data at once). Consider the amount of data - do not output too many nodes (limit the selection to SELECT 1), otherwise it will lead to lengthy data processing on the browser.

2. Documentation on JS component settings - https://philogb.github.io/jit/static/v20/Docs/files/Core/Core-js.html

3. A variant of the output of the database structure - https://pastebin.com/0uKZ30Mt

4. Limitation. The component is unstable in the dialog box (dragging nodes and hints does not work after scrolling the window)

Processing a click on a graph node

To do this, you need to create a JS callback of the form as.crud2callbacks[tableCode + "_clickGraphNode"], for example: https://pastebin.com/cJgQejhF

If there is no callback, the system searches for a div with id =as-visgraphnodepanel and inserts the name of the element and its connections into it.

Output of a hint on hover

If there is a callback of the form as.crud2callbacks[table Code + "_showgraphtip"], then it works. If it is not there, then a hint is displayed with the name of the element and the tip field at the node (if there is one). 

Callback example:https://pastebin.com/Dsgw8MM6

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

SQL-tool for creating personal accounts on the site

The essence of the approach and the history of the creation of Falcon Space
Web platform for creating personal accounts

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

MS SQL web applications. Affiliate program for developers and web studios

You can develop on your own or collaborate with us on Falcon Space web development using only SQL and HTML.
See examples with SQL code
Platform documentation
Working on MS SQL Server
Note