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
- Management
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация
- Integrations
- Каталоги
- Навигация
- Документы
- Additional component Falcon Space. Working with indicators Falcon Space. Panel-hints Falcon Space. The counters component Falcon Space. Business processes Falcon Space. Working with the catalog, shopping cart, and orders Working with HTML blocks Falcon Space. Working with trees (hierarchy) Universal likes, dislikes, ratings, voting for products Interactive tree Gantt Chart The Kanban Board Chartbar diagram Map with markers Cards Progress line Timeline Uploaded files Data output in the form of a graph on the site Output of the request movement by statusbar statuses
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
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
- Falcon Space Video
- Platform features demo will allow you to understand how this or that component looks and works
- Have a question? Write to the chat at the bottom right