Data table visualization method based on user-triggered and ai-driven visualized recommendations

Abstract

The present application relates to the technical field of electronic data digital processing, in particular to a data table visualization method based on user triggering and AI-driven visualization recommendation, which solves the technical problems of low data visualization efficiency, insufficient AI assistance capability and poor front-end and back-end linkage in the prior art. The user manually triggers the operation, the back-end aggregates and converts the original data, and outputs the data format meeting the adaptation requirements of the chart library component. In the process of AI generating SQL statements, the database table structure information is actively injected, and the AI is required to output the visualization suggestions that can be parsed by the machine at the same time as outputting the SQL statements, so as to actively recommend the chart type and data mapping field. The "generate chart" operation entry is set above the front-end data table, which supports the user to independently configure the X-axis field, Y-axis field, chart type and data aggregation strategy, and completes the rapid rendering and display of the chart by calling the back-end data conversion interface.

Description

Technical Field

[0001] This invention relates to the field of electronic data digital processing technology, specifically a data table visualization method based on user-triggered and AI-driven visualization recommendations. Background Technology

[0002] Current data processing systems suffer from numerous shortcomings. Most systems still present query results in raw table format, requiring users to manually identify trends and analyze indicators, significantly impacting decision-making efficiency and failing to meet the demand for rapid data insights. Furthermore, existing systems with AI-assisted SQL generation capabilities often only return the query statement itself or a simple text summary, lacking the ability to automatically convert query results into graphical representations. Moreover, the front-end lacks a unified, on-demand data aggregation interface and a robust metadata transmission mechanism, resulting in cumbersome data visualization processes, poor adaptability, and difficulty in achieving efficient linkage between querying and visualization. Summary of the Invention

[0003] To overcome the technical shortcomings of existing technologies, such as low data visualization efficiency, insufficient AI assistance capabilities, and poor front-end and back-end integration, this invention provides a data table visualization method based on user triggering and AI-driven visualization recommendations. It links natural language-generated structured query language (SQL) with front-end visualization components and uses artificial intelligence (AI) to make recommendations based on database table structure information, thereby achieving efficient visualization and convenient interaction of data query results.

[0004] This invention provides a data table visualization method based on user-triggered and AI-driven visual recommendations. It is implemented using an intelligent question-answering system, which includes a user operation layer, a front-end system layer, a back-end system layer, and external services and a database. The data table visualization method includes the following steps:

[0005] Step S1: Input a data query question in the front-end chat user interface of the user operation layer, and the front-end system layer sends the request information corresponding to the data query question to the back-end system layer through the chat interface;

[0006] Step S2: After receiving the request information, the backend system layer calls its own database mode module to pull the database table structure information stored in the external service and the SQL server module in the database. After formatting the database table structure information, it injects AI system prompt words and calls the AI ​​service to generate corresponding data query SQL statements and JSON format visualization suggestions.

[0007] Step S3: The backend system layer calls its own chat database service module to intercept the structured query language method, validates and audits the data query SQL statement generated by the AI ​​service, and executes the data query SQL statement after the validation and audit are passed to obtain the corresponding data query results.

[0008] Step S4: The backend system layer encapsulates the data query results, data query SQL statements, and JSON-formatted visualization suggestions into visualized JSON data and returns it to the frontend system layer. After receiving the visualized JSON data, the frontend system layer calls its message box module to render and display a table summary of the data query results and a chart generation interaction button. At the same time, it passes the configuration information in the JSON-formatted visualization suggestions as default configuration parameters into the chart generator of the frontend system layer.

[0009] Step S5: When the user clicks the "Generate Chart" interaction button, the front-end system layer pops up a chart generator. The user can modify the default configuration parameters in the chart generator or directly confirm the default configuration parameters. The chart generator calls the visualization module of the front-end system layer. The front-end system layer triggers the back-end system layer to perform data aggregation processing on the data query results. The back-end system layer returns the aggregated data to the front-end system layer. The returned data is standard data adapted to the chart library.

[0010] Step S6: The front-end system layer calls the chart library through the chart generator, uses the standard data of the chart library to render and generate visual charts, and users can view detailed data through chart interaction operations, thus completing the entire data visualization process.

[0011] Preferably, in step S2, after the database schema module formats the database table structure information, the generated AI system prompts include a visual JSON format template. The visual JSON format template provides a unified standard for the AI ​​service to generate visual suggestions in JSON format, ensuring that the generated visual suggestions meet the adaptation requirements of the front-end chart generator.

[0012] Preferably, in step S2, the SQL server module provides a method for obtaining the SQL server connection pool and an SQL query execution function. By executing the corresponding SQL query operation, it obtains the dataset corresponding to the query and the column information corresponding to the dataset. The dataset and the column information serve as the basic data support for subsequent data processing and visualization. The method for obtaining the SQL server connection pool provided by the SQL server module can ensure the stability and efficiency of database connections.

[0013] Preferably, in step S3, after the chat database service module executes the SQL statement generated by the AI ​​service by intercepting the structured query language method, it returns a complete result set to the backend system layer. The complete result set includes data rows, column information, data summary, total number of rows, and truncation flag. The truncation flag is used to indicate whether the query results are truncated due to excessive data volume.

[0014] Preferably, in step S4, after receiving the visualized JSON data returned by the backend system layer, the message box module intercepts the message content returned by the AI, extracts the SQL execution result, appends the data row and column information in the SQL execution result as the chart data attribute of the message, and triggers the initial rendering of the chart generator component in the frontend system layer, so as to realize the linkage triggering of data query results and visualization entry.

[0015] Preferably, in step S4, the chart generator, as a front-end pop-up component, allows users to perform visual configuration operations within the pop-up interface, including selecting X-axis fields, Y-axis fields, chart type, aggregation strategy, and time granularity. After the user completes the configuration and confirms, the chart generator calls the visualization interface of the front-end system layer to obtain the corresponding rendering data and completes the front-end rendering of the visual chart through the chart library plugin.

[0016] Preferably, in step S5, the visualization module provides a POST type interface to receive request parameters from the front-end system layer. The request parameters include raw data, X-axis field, optional Y-axis field, chart type, optional aggregation strategy, and optional time granularity. The back-end system layer performs on-demand grouping and aggregation processing on the raw data according to the request parameters, and finally returns a standard data format that meets the rendering requirements of the chart library components.

[0017] Compared with existing technologies, the technical solution provided by this invention has the following technical effects: It constructs a complete visualization solution of "artificial intelligence proactive recommendation - backend on-demand aggregation - frontend flexible display - security audit throughout". Compared with existing technologies, this invention realizes a paradigm upgrade from "static tables" to "dynamic charts", and has made significant progress in terms of intelligence, system flexibility, data type accuracy and security. It can be widely used in fields such as enterprise data query, business intelligence analysis and intelligent question answering systems. Attached Figure Description

[0018] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0019] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a flowchart of a data table visualization method based on user-triggered and AI-driven visual recommendation, as described in a certain embodiment of the present invention.

[0021] Figure 2 This is a schematic diagram of the chart configuration window in step S5 of a certain embodiment of the present invention;

[0022] Figure 3 This is a schematic diagram of the visualization result of step 6 in a certain embodiment of the present invention. Detailed Implementation

[0023] To better understand the above-mentioned objectives, features, and advantages of the present invention, the solutions of the present invention will be further described below. It should be noted that, unless otherwise specified, the embodiments of the present invention and the features thereof can be combined with each other.

[0024] Many specific details are set forth in the following description in order to provide a full understanding of the invention, but the invention may also be practiced in other ways different from those described herein; obviously, the embodiments in the specification are only some embodiments of the invention, and not all embodiments.

[0025] The specific embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0026] In one embodiment, such as Figure 1 As shown, a data table visualization method based on user-triggered and AI-driven visualization recommendation is disclosed. It is implemented based on an intelligent question-answering system, which includes a user operation layer, a front-end system layer, a back-end system layer, and external services and databases. Specifically, it is implemented based on a Node.js back-end development environment, a React front-end framework, a database driver, and a chart library visualization component. The AI ​​service is implemented using mainstream large language model APIs. Through the collaborative work of various modules, the entire process of data query, AI recommendation, back-end aggregation, and front-end visualization is completed.

[0027] like Figure 1 As shown, the specific steps are as follows:

[0028] Step S1: The user enters a data query question in the front-end chat user interface of the user operation layer, such as "What are the average actual salaries paid to all employees of the general office in 2023, 2024 and 2025 respectively?" The front-end system layer sends the request information corresponding to the data query question to the back-end system layer through the chat interface.

[0029] Step S2: After receiving the request information, the backend system layer calls its own database mode module to pull the database table structure information stored in the external service and the SQL server module in the database. After formatting the database table structure information, it injects AI system prompt words and then calls the AI ​​service to generate the corresponding data query SQL statement and JSON format visualization suggestions.

[0030] Step S3: The backend system layer calls its own chat database service module to intercept the structured query language method, validates and audits the SQL statement generated by the AI ​​service, and executes the SQL statement after validation and auditing to obtain the corresponding data query results.

[0031] Step S4: The backend system layer encapsulates the data query results, SQL statements, and JSON-formatted visualization suggestions into visualized JSON data and returns it to the frontend system layer. After receiving the visualized JSON data, the frontend system layer calls its message box module to render and display a table summary of the data query results and a chart generation interaction button. At the same time, it passes the configuration information in the JSON-formatted visualization suggestions as default configuration parameters into the chart generator of the frontend system layer.

[0032] Step S5: The user clicks the "Generate Chart" interactive button, and a pop-up window in the front-end system displays the chart generator. The user can modify or directly confirm the default configuration parameters in the chart generator, such as... Figure 2 As shown, the chart generator calls the visualization module of the front-end system layer, the front-end system layer triggers the back-end system layer to perform data aggregation processing on the data query results, and the back-end system layer returns the aggregated data to the front-end system layer. The returned data is standard data adapted to the chart library.

[0033] Step S6: The front-end system layer calls the chart library through the chart generator, and uses the standard data of the adapted chart library to render and generate a visual chart to display the average actual salary of the General Office in 2023, 2024, and 2025, such as... Figure 3 As shown, users can view detailed data through interactive charts and complete the entire data visualization process.

[0034] The method described in this invention achieves seamless integration of data query, AI recommendation, backend aggregation, and frontend visualization through the coordinated operation of multiple functional modules of an intelligent question-and-answer system. Under user-triggered operations, the backend system aggregates and converts the acquired raw data, outputting a data format that conforms to the chart library component adaptation requirements, facilitating direct call and chart rendering by the frontend system. During the AI's SQL statement generation process, database table structure information is proactively injected, and the AI ​​is required to simultaneously output machine-readable visualization suggestions (i.e., JSON-formatted visualization data) while outputting the SQL statement, thereby proactively recommending chart types and data mapping fields. A "Generate Chart" operation entry is set above the frontend data table, allowing users to independently configure X-axis fields, Y-axis fields, chart types, and data aggregation strategies. By calling the backend data conversion interface, the chart is quickly rendered and displayed.

[0035] The data aggregation processing logic in step S5 implements a configurable dynamic aggregation algorithm. The backend aggregation logic revolves around the visualization module interface, and the specific implementation details are as follows: First, the input parameters are validated to confirm that the passed data parameter is of array type and that the X-axis field parameter must exist. If the Y-axis field is missing and the aggregation strategy parameter is "count", the data is automatically processed using the counting method. For time-type X-axis fields, it supports parsing and normalizing the X-axis values ​​through time granularity parameters (optional values ​​are "day", "month", and "year"). After normalization, the format is uniformly YYYY-MM or YYYY. -MM-DD ensures consistency of time data; data grouping and aggregation use a mapped data structure to group by the X-axis field, supporting aggregation methods including summation, average, and count, which can be flexibly selected according to user configuration; output format is differentiated according to chart type, where line charts, bar charts, and area charts return a structure containing type, X-axis data, series data, and metadata, while pie charts return a structure containing type and data; boundary processing is also performed, treating non-numeric data as 0 for calculation, and truncating very large result sets, returning a truncation flag to inform the front-end system layer that the data has been truncated.

[0036] In step S4, the column information is obtained from the result set column information driven by the database and returned to the front-end system layer along with the SQL query result. When constructing the column parameters of the chart generator component, the front-end system layer prioritizes the column information returned by the back-end system layer. If the back-end system layer does not return relevant information, the column information is inferred from the first row of the query result to ensure the accuracy of column type and display.

[0037] The method described in this invention innovatively injects database table structure information and visualization output specifications into AI system prompts, forming a set of constrained generation paradigms. Before dialogue creation or AI-generated SQL statements, the backend system layer retrieves database table structure information through the database schema module and calls the prompt formatting mode to format the table structure information into content that meets the requirements, injecting it into the AI's system prompts. This explicitly requires the AI ​​to simultaneously output visualization suggestions in JSON format while generating SQL statements. An example of the visualization JSON is as follows: { "type": "line", "x": "payment month and year", "y": "actual salary", "aggregate": "sum", "granularity": "month", "notes": "monthly statistics, suitable for line chart trend display"}. This example clearly specifies the chart type, X-axis field, Y-axis field, aggregation strategy, time granularity, and related explanations, providing a reference for the visualization configuration of the frontend system layer.

[0038] To ensure system operational security and data security, this invention establishes a comprehensive security and auditing mechanism: Before executing AI-generated SQL statements, a whitelist syntax check is performed, allowing only safe SELECT statements to execute and prohibiting SQL operations with risks such as modification or deletion, thus mitigating data security risks at the source; before and after SQL statement execution, complete audit information is automatically recorded, including the SQL statement hash value, operating user, session information, request parameters, and execution status, facilitating subsequent security traceability and problem investigation; for sensitive column data in the database, this method performs data anonymization or column-level masking operations according to preset application strategies to prevent the leakage of sensitive information and ensure data privacy and security. Embedding security auditing and whitelist verification within the visualized data flow achieves a balance between "visual convenience" and "data security," meeting the compliance and traceability requirements of enterprise-level applications.

[0039] In addition, this method boasts excellent scalability, allowing for future upgrades and optimizations based on the existing architecture. Specific expansion directions include: supporting more types of aggregation functions, such as median and quantiles, to meet more complex data statistical needs; adding multi-series chart display functions to achieve synchronous visualization and comparison of multiple data sets; adding linked filtering functions to support filtering related data through chart interaction; expanding time window analysis functions to achieve data visualization analysis within a specified time range; and optimizing the AI ​​recommendation algorithm to achieve more intelligent chart type and configuration recommendations based on field statistical features, further reducing the user's operational burden. It achieves a flexible interaction mode of "AI recommendation as default, user-coverable," balancing intelligence and user autonomy, and improving the system's usability and adaptability.

[0040] Based on the above embodiments, in a preferred embodiment, in step S2, after the database schema module formats the database table structure information, the generated AI system prompts include a visual JSON format template. The visual JSON format template is used to provide a unified standard for generating JSON format visual suggestions for AI services, ensuring that the generated visual suggestions meet the adaptation requirements of the front-end chart generator.

[0041] Based on the above embodiments, in a preferred embodiment, in step S2, the SQL server module has dual functions: first, it provides a method for obtaining the SQL server connection pool to ensure the stability and efficiency of the database connection; second, it provides an SQL query execution function, which can obtain the corresponding dataset and the column information of the dataset by executing the corresponding SQL query operation. The dataset and column information serve as the basic data support for subsequent data processing and visualization.

[0042] Based on the above embodiments, in a preferred embodiment, in step S3, the chat database service module executes the SQL statement generated by the AI ​​service by intercepting the structured query language method, and then returns a complete result set to the backend system layer; the complete result set includes data rows, column information, data summary, total number of rows and truncation flag, wherein the truncation flag is used to indicate whether the query result is truncated due to excessive data volume.

[0043] Based on the above embodiments, in a preferred embodiment, in step S4, after receiving the visualized JSON data returned by the backend system layer, the message box module intercepts the message content returned by the AI, extracts the SQL execution result, appends the data row and column information in the SQL execution result as the chart data attribute of the message, and triggers the initial rendering of the chart generator component in the frontend system layer, so as to realize the linkage triggering of data query results and visualization entry.

[0044] Based on the above embodiments, in a preferred embodiment, in step S4, the chart generator is a front-end pop-up component that allows users to perform visual configuration operations within the pop-up interface, specifically including selecting X-axis fields, Y-axis fields, chart type, aggregation strategy, and time granularity; after the user completes the configuration and confirms, the chart generator calls the visualization interface of the front-end system layer to obtain the corresponding rendering data, and completes the front-end rendering of the visualization chart through the integrated chart library plugin.

[0045] Based on the above embodiments, in a preferred embodiment, in step S5, the visualization module provides a POST type interface to receive request parameters passed from the front-end system layer; the request parameters include raw data, X-axis field, optional Y-axis field, chart type, optional aggregation strategy, and optional time granularity; after receiving the request parameters, the back-end system layer performs on-demand grouping and aggregation processing on the raw data according to the parameter requirements, and finally returns a standard data format that meets the rendering requirements of the front-end chart library component.

[0046] The above description is merely a specific embodiment of the present invention, enabling those skilled in the art to understand or implement the present invention. Although detailed descriptions have been provided with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments, and they should all be covered within the protection scope of the claims.

Claims

1. A data table visualization method based on user-triggered and AI-driven visual recommendations, implemented using an intelligent question-answering system, wherein the intelligent question-answering system includes a user operation layer, a front-end system layer, a back-end system layer, and external services and a database, characterized in that... Includes the following steps: Step S1: Input a data query question in the front-end chat user interface of the user operation layer, and the front-end system layer sends the request information corresponding to the data query question to the back-end system layer through the chat interface; Step S2: After receiving the request information, the backend system layer calls its own database mode module to pull the database table structure information stored in the external service and the SQL server module in the database. After formatting the database table structure information, it injects AI system prompt words and calls the AI ​​service to generate corresponding data query SQL statements and JSON format visualization suggestions. Step S3: The backend system layer calls its own chat database service module to intercept the structured query language method, validates and audits the data query SQL statement generated by the AI ​​service, and executes the data query SQL statement after the validation and audit are passed to obtain the corresponding data query results. Step S4: The backend system layer encapsulates the data query results, data query SQL statements, and JSON format visualization suggestions into visualized JSON data and returns it to the frontend system layer. After the front-end system layer receives the visualized JSON data by calling its message box module, it renders and displays a table summary of the data query results and a chart generation interaction button. At the same time, it passes the configuration information in the JSON-formatted visualization suggestions as default configuration parameters into the chart generator of the front-end system layer. Step S5: When the user clicks the "Generate Chart" interaction button, the front-end system layer pops up a chart generator. The user can modify the default configuration parameters in the chart generator or directly confirm the default configuration parameters. The chart generator calls the visualization module of the front-end system layer. The front-end system layer triggers the back-end system layer to perform data aggregation processing on the data query results. The back-end system layer returns the aggregated data to the front-end system layer. The returned data is standard data adapted to the chart library. Step S6: The front-end system layer calls the chart library through the chart generator, uses the standard data of the chart library to render and generate visual charts, and users can view detailed data through chart interaction operations, thus completing the entire data visualization process.

2. The data table visualization method based on user-triggered and AI-driven visual recommendation according to claim 1, characterized in that, In step S2, after the database schema module formats the database table structure information, the generated AI system prompts include a visual JSON format template. The visual JSON format template provides a unified standard for the AI ​​service to generate visual suggestions in JSON format.

3. The data table visualization method based on user-triggered and AI-driven visual recommendation according to claim 2, characterized in that, In step S2, the SQL server module provides a method for obtaining the SQL server connection pool and an SQL query execution function. By executing the corresponding SQL query operation, the corresponding dataset and column information of the dataset are obtained. The dataset and column information serve as the basic data support for subsequent data processing and visualization.

4. The data table visualization method based on user-triggered and AI-driven visual recommendation according to claim 3, characterized in that, In step S3, the chat database service module executes the interception structured query language method to execute the SQL statement generated by the AI ​​service, and then returns a complete result set to the backend system layer. The complete result set includes data rows, column information, data summary, total number of rows, and truncation flag.

5. The data table visualization method based on user-triggered and AI-driven visual recommendation according to claim 4, characterized in that, In step S4, after receiving the visualization JSON data returned by the backend system layer, the message box module intercepts the message content returned by the AI, extracts the SQL execution result, appends the data row and column information in the SQL execution result as the chart data attribute of the message, and triggers the initial rendering of the chart generator component in the frontend system layer, so as to realize the linkage triggering of data query results and visualization entry.

6. The data table visualization method based on user-triggered and AI-driven visual recommendation according to claim 5, characterized in that, In step S4, the chart generator, as a front-end pop-up component, allows users to perform visual configuration operations within the pop-up interface, including selecting X-axis fields, Y-axis fields, chart type, aggregation strategy, and time granularity. After the user completes the configuration and confirms, the chart generator calls the visualization interface of the front-end system layer to obtain the corresponding rendering data and completes the front-end rendering of the visualization chart through the chart library plugin.

7. The data table visualization method based on user-triggered and AI-driven visual recommendation according to claim 6, characterized in that, In step S5, the visualization module provides a POST type interface to receive request parameters from the front-end system layer. The request parameters include raw data, X-axis field, optional Y-axis field, chart type, optional aggregation strategy, and optional time granularity. The back-end system layer performs on-demand grouping and aggregation processing on the raw data according to the request parameters, and finally returns a standard data format that meets the rendering requirements of the chart library components.

Images