Method for improving display performance of superposition technical indexes in webpage K-line graph

Abstract

The invention provides a method for improving display performance of superposition technical indexes in a webpage K-line graph, which comprises the following steps of: aiming at an index list needing to be calculated, matching a historical data subset as a message parameter, distributing the message parameter to an independent Web Worker thread of a specified URL (Uniform Resource Locator) in a loading index list, and according to indexes in the distributed index list and the corresponding message parameter, displaying the superposition technical indexes in the webpage K-line graph. The method comprises the following steps of: calculating required values in parallel according to an algorithm corresponding to indexes to obtain an index value array, merging and formatting the index value array, only converting processed structured data required by final rendering into a data format which can be directly used by a main thread chart rendering engine, and transmitting the processed data back to a main thread through post Message. The main thread creates a K-line graph container to configure basic chart options according to the processed data by using chart data, preferentially draws a K-line graph to Canvas, and monitors and receives index rendering data merged and processed by an independent Web Worker thread through a message event, so that the problems of interface jamming, delay or no response are solved.

Description

Technical Field

[0001] This invention relates to the field of technical indicator visualization technology, specifically to a method for improving the performance of displaying overlaid technical indicators in web page candlestick charts. Background Technology

[0002] like Figure 1 As shown, when using Enterprise Charts (Echarts) to display various charts and data visualizations, the initialization of variables, settings, data structures, and interface elements requires significant memory and time due to the loading and initialization of a large amount of historical data and its associated data structures. Furthermore, the initialization overhead of the framework / library increases significantly with the amount of data. Additionally, the complexity of defining or loading the calculation logic of required technical analysis indicators severely impacts the efficiency of subsequent calculations. Therefore, when multiple technical analysis indicators are rendered in a single chart, indicator calculations traverse the entire or large window dataset under high computational complexity. View changes or parameter adjustments trigger a full recalculation, with numerous floating-point operations continuously consuming CPU resources. Ultimately, this affects the responsiveness and performance of the main thread, leading to interface freezing or stuttering and increased CPU usage.

[0003] Furthermore, after calculating various analytical indicators, when drawing candlestick charts and all calculated technical indicator lines / points / markers in the drawing area, the CPU takes a long time to process drawing commands and fill / stroke operations when using Canvas 2D to draw a large number of graphic elements, as a large number of candlesticks and indicator points need to be drawn. Each graphic element in SVG is a DOM node, and creating / updating / deleting tens of thousands of DOM nodes leads to severe layout reflow / redrawing, resulting in a sharp drop in performance. Although WebGL can handle big data, data conversion and uploading to GPU memory (gl.bufferData) may become a bottleneck when dealing with large amounts of data, and its implementation is complex. The layout and style calculation overhead of massive SVG elements is huge, which further affects the resource calculation speed and causes severe lag. Summary of the Invention

[0004] The technical problem that the present invention aims to solve is that the computationally intensive index traversal and formula calculation, as well as the massive amount of graphic element rendering, increase linearly or non-linearly with the amount of data, leading to exceeding the limits of CPU / GPU / memory resources, resulting in interface lag, delay, or unresponsiveness.

[0005] To address the aforementioned technical problems, the present invention provides a method for improving the performance of displaying overlaid technical indicators in webpage candlestick charts, comprising the following steps: After initializing the variables, settings, data structures, and UI elements required for rendering, a subset of historical data is matched as a message parameter for the list of metrics to be calculated and assigned to a separate Web Worker thread that loads the specified URL in the metric list. Each independent Web Worker thread calculates the required values ​​in parallel according to the assigned indicators and corresponding message parameters, following the algorithms corresponding to the indicators. This results in an array of indicator values. The array is then merged and formatted, converting only the processed structured data required for final rendering into a format directly usable by the main thread's chart rendering engine. The independent Web Worker thread sends the processed data back to the main thread via `postMessage`. The main thread uses the processed data and chart data to create a candlestick chart container, configure basic chart options, prioritizes drawing the candlestick chart onto the Canvas and displaying it to the user, and receives the merged and processed indicator rendering data from the independent Web Worker thread through message event listening.

[0006] Preferably, the algorithm includes the RSI algorithm and the BOLL algorithm, wherein the BOLL algorithm requires the calculation of SMA and standard deviation.

[0007] This invention provides a method to improve the performance of displaying overlaid technical indicators in web page candlestick charts. It involves matching a subset of historical data as message parameters to a list of indicators to be calculated, and allocating this parameter to an independent Web Worker thread that loads the specified URL from the indicator list. Based on the allocated indicators and corresponding message parameters, the required values ​​are calculated in parallel using the corresponding algorithms to obtain an array of indicator values. This array is then merged and formatted, converting only the processed structured data required for final rendering into a format directly usable by the main thread's chart rendering engine. The processed data is then sent back to the main thread via `postMessage`. The main thread uses the processed data and chart data to create a candlestick chart container, configure basic chart options, and prioritizes drawing the candlestick chart onto the Canvas. It also listens for message events to receive the merged and processed indicator rendering data from the independent Web Worker thread, thus resolving issues such as interface lag, delays, or unresponsiveness. Attached Figure Description

[0008] Figure 1 A flowchart for displaying overlaid technical indicators on candlestick charts using existing technology; Figure 2 This is a flowchart illustrating a method for improving the display performance of overlaid technical indicators in a webpage candlestick chart, as provided in an embodiment of the present invention. Detailed Implementation

[0009] The present invention will be further illustrated below with reference to specific embodiments. It should be understood that these embodiments are for illustrative purposes only and are not intended to limit the scope of the invention. Furthermore, it should be understood that after reading the teachings of this invention, those skilled in the art can make various alterations or modifications to the invention, and these equivalent forms also fall within the scope defined by the appended claims.

[0010] like Figure 2 As shown, this embodiment of the invention provides a method for improving the display performance of overlaid technical indicators in a webpage candlestick chart, comprising the following steps: After initializing the variables, settings, data structures, and UI elements required for rendering, for the list of metrics to be calculated (such as RSI, BOLL, etc.), a subset (or reference) of historical data is matched as a message parameter and assigned (dispatched) to an independent Web Worker thread that loads the specified URL in the metric list, thereby dynamically creating Web Worker instances.

[0011] The key to this step is to separate the definition of the computation task from the execution environment and to achieve dynamic task allocation, so that the main thread is not blocked and the user interaction remains smooth.

[0012] An independent Web Worker thread calculates the required values ​​in parallel according to the indicators and corresponding message parameters in the assigned indicator list, using the corresponding algorithms. This results in an array of indicator values. The array is then merged and formatted, converting only the processed structured data required for final rendering into a format directly usable by the main thread's chart rendering engine (such as ECharts). The independent Web Worker thread sends the processed data back to the main thread via `postMessage`. The main thread, using the default or initial chart data, creates a candlestick chart container (such as a Canvas element), configures basic chart options, and calls the chart instance's `update` method. It prioritizes drawing the candlestick chart (without or only containing basic indicators) onto the Canvas and displaying it to the user. The main thread also listens for message events to receive the merged and processed indicator rendering data from the Web Worker. Finally, it calls the chart instance's `setOption` method to update only the configuration items and data related to the newly calculated technical indicators.

[0013] Algorithms include RSI and BOLL, among which the BOLL algorithm requires the calculation of SMA and standard deviation.

[0014] This step minimizes the amount of data communicated between threads, reduces the burden of parsing and processing on the main thread, allows users to quickly see the basic charts, and provides a smoother experience. It reflects the initial decoupling of calculation and rendering. The chart engine only performs incremental updates and redraws on the technical indicator layers that have changed, avoiding a full redraw of the entire chart (especially the drawn candlesticks) due to indicator data updates, which greatly improves rendering efficiency. This is because the data returned is in a format that the rendering engine can directly consume.

[0015] Summary of the innovative points of this invention's embodiments: 1. Dynamic computation task allocation based on Web Worker: It innovatively dynamically allocates computation tasks (metric type + data) to independent threads, realizing the physical separation of computation and main thread rendering, and completely solving the problem of computation blocking.

[0016] 2. Parallelized metric calculation: Efficiently schedule or execute the calculation of multiple complex metrics in parallel within the Worker thread, making full use of multi-core CPUs and significantly reducing overall computational latency.

[0017] 3. Result merging and format preprocessing within the Worker: The calculation results are merged, aggregated, and format converted within the Worker thread to generate optimized data structures that are directly oriented towards the rendering engine, minimizing the amount of data communicated between threads and reducing the burden on the main thread.

[0018] 4. Decoupling of Calculation and Rendering and Incremental Updates: The main thread prioritizes rendering the basic candlestick chart. After receiving pre-processed indicator data, the main thread incrementally updates the technical indicator layer only through the chart engine API, avoiding a full redraw and significantly improving the final rendering efficiency.

[0019] The innovative aspects of this invention compared to existing technologies are as follows: 1. Decouple computation and rendering to improve performance and response speed. Background: In candlestick charts, multiple technical indicators (such as MACD, RSI, Bollinger Bands, etc.) require real-time calculations based on a large amount of historical data. If these calculations are performed on the main thread, it may cause the interface to lag, affecting the user experience.

[0020] Innovation points: Web Workers completely offload computational tasks (such as metric calculations) to background threads, avoiding blocking the main thread.

[0021] The main thread is only responsible for UI rendering, achieving separation of "computation-rendering" and ensuring a smooth interface.

[0022] Innovative Value: Significantly improves performance in scenarios with high data volumes (such as millions of candlestick charts) or high indicator complexity, supporting more real-time trading or analysis needs.

[0023] 2. Dynamic task allocation and parallel computing Background: The calculation logic of multiple indicators is independent, but traditional methods may be executed serially or calculated centrally, which limits efficiency.

[0024] Innovation points: Task splitting: Distribute different indicators (such as MACD, RSI) or sub-tasks of the same indicator (such as calculating the fast line and slow line) to multiple Web Workers.

[0025] Parallel execution: Utilizes multi-core CPU resources to calculate multiple metrics simultaneously, reducing overall execution time.

[0026] Innovative Value: In scenarios involving complex combinations of indicators (such as the overlay of multiple periodic indicators), it significantly reduces computation time and improves real-time performance.

[0027] 3. Real-time data stream processing and incremental computation Background: Candlestick chart data may be updated in real time (such as real-time market data), and traditional methods require recalculating the entire historical dataset.

[0028] Innovation points: Incremental calculation: Web Worker only processes the metric calculation for newly added data points, rather than recalculating the entire dataset.

[0029] Streaming processing: Real-time data streams are sliced ​​(e.g., 1000 data points per second) and processed in parallel to reduce latency.

[0030] Innovative Value: Suitable for high-frequency trading or real-time monitoring scenarios, ensuring that indicator updates are synchronized with data.

[0031] 4. Dynamic load balancing and resource optimization Background: The computational complexity of different indicators varies greatly (e.g., RSI is more complex than SMA), and traditional methods may lead to bottlenecks due to uneven resource allocation.

[0032] Innovation points: Dynamic scheduling: Dynamically allocate tasks based on the complexity of the metrics and the workload of the workers (e.g., allocate more workers to complex metrics).

[0033] Resource isolation: Each worker runs independently, avoiding resource contention and improving stability.

[0034] Innovative value: Maximizing hardware utilization in resource-constrained devices (such as mobile devices) or mixed scenarios (such as multi-metric + large-screen rendering).

[0035] 5. Modularity and scalability Background: Traditional candlestick indicator calculation code is highly coupled, and adding new indicators requires modification of the core logic.

[0036] Innovation points: Modular design: Each metric is an independent Worker module that communicates through standardized interfaces (such as JSON messages).

[0037] Hot-swappable support: Users can dynamically load / unload the metrics worker without restarting the application.

[0038] Innovation Value: Supports rapid iteration and customization needs (such as custom metrics), reducing maintenance costs.

[0039] 6. Security and Isolation Background: Complex calculations in the main thread can lead to memory leaks or crashes.

[0040] Innovation points: Worker Sandbox: Computational tasks run in independent threads, isolated from the main thread's memory.

[0041] Exception isolation: The crash of a single Worker will not affect the main thread or other Workers.

[0042] Innovation Value: Enhancing system stability, especially in financial scenarios where high reliability is required.

[0043] This invention provides a method for calculating various technical analysis indicators using Web Worker technology and overlaying them onto a webpage candlestick chart to improve display performance. Its main features are as follows: 1. Create one or more Web Worker threads in the client browser for asynchronous computation of technical analysis metrics.

[0044] 2. Assign the calculation tasks of technical analysis indicators to this thread to avoid blocking the main thread and improve page response speed.

[0045] 3. Web Worker threads communicate with the main thread through a message passing mechanism to ensure the accuracy and real-time performance of technical analysis indicator data calculations.

[0046] 4. Overlaying the calculated technical analysis results onto the candlestick chart provides users with more comprehensive market analysis information.

[0047] 5. Improve the calculation speed and display performance of technical analysis indicator data by optimizing algorithms and caching strategies.

[0048] The number of WebWorker threads and the allocation of computing tasks can be dynamically adjusted according to user needs and hardware performance.

Claims

1. A method for improving the performance of displaying overlaid technical indicators in a webpage candlestick chart, characterized in that, Includes the following steps: After initializing the variables, settings, data structures, and UI elements required for rendering, a subset of historical data is matched as a message parameter for the list of metrics to be calculated and assigned to a separate Web Worker thread that loads the URL specified in the metric list. Each independent Web Worker thread calculates the required values ​​in parallel according to the assigned indicators and corresponding message parameters, following the algorithms corresponding to the indicators. This results in an array of indicator values. The array is then merged and formatted, converting only the processed structured data required for final rendering into a format directly usable by the main thread's chart rendering engine. The independent Web Worker thread sends the processed data back to the main thread via `postMessage`. The main thread uses the processed data and chart data to create a candlestick chart container, configure basic chart options, prioritizes drawing the candlestick chart onto the Canvas and displaying it to the user, and receives the merged and processed indicator rendering data from the independent Web Worker thread through message event listening.

2. The method for improving the display performance of overlaying technical indicators in a webpage candlestick chart as described in claim 1, wherein the algorithm includes the RSI algorithm and the BOLL algorithm, and the BOLL algorithm requires the calculation of SMA and standard deviation.

Images