HQChart

HQChart is the first project based on traditional domestic PC stock client software (C++) to be transplanted to the js/py platform, including the K-line chart graphics library and the Mai Grammar (Analyst Grammar) indicator executor .
Supported platforms : js, vue2.0, vue3.0, uniapp, applet
Supported varieties : Supports stocks, futures, digital currencies, foreign exchange and other K-line related varieties.
Mai Grammar indicator calculation engine (Analyst Grammar) indicator executor supports js, nodejs, py, c#, c++. Supports front-end worker thread calculation indicators

comminicate

Front-end technology exchange group: 719525615
If you have any questions, you can directly send an issue.

The tutorial list and demo renderings are below, you can see them by scrolling down the page!!!!!!!!!!!!

Source code address: https://github.com/jones2000/HQChart
Mirror address: https://gitee.com/jones2000/HQChart

uniapp version: New version of plug-in: https://ext.dcloud.net.cn/plugin?id=4591
Old versions manually import the plug-in: https://ext.dcloud.net.cn/plugin?id=790

HQChart User Agreement
HQChart Business Instructions and User Agreement

The third data docking case:
Source code address: https://github.com/jones2000/HQChart-Super
Mirror address: https://gitee.com/jones2000/HQChart-Super

If you think our market module is helpful to you, please give us a star. (●ˇ∀ˇ●)

Mai syntax index calculation engine, https://github.com/jones2000/hqchartPy2/tree/master/HQChartPy2.Free, supports windows and linux. This version is developed in c++ and can be connected to py through cpython, which can be completed efficiently Indicator execution. Can be applied to batch indicator calculations such as backtesting and stock selection.

Directory structure

--webhqchart market front-end js code module
--wechathqchart WeChat applet market quotation front-end js code module
*Notice! The current code uses the features of ES6, which will cause some old browsers to be unable to display it. You need to use Babel to convert it to es5.

--webhqchart.demo page market test case

• |--jscommon The market front-end js code is a copy of webhqchart
  
• |--demo for testing
  

--vuehqchart

• |--src market control
  • |--umychart.resource Picture resources and css styles used in the market
  • |--umychart.vue market graphics and market data module
  • |--umychart.vue.components market VUE control module
• |--pages test and demo pages

--Mini Program Market Module Use Case Mini Program Test Case

--umychart_python Analyst Grammar (McGrammar) python version
--umychart_indexapi nodejs indicator background calculation demo (including docker packaging file)

npm install

npm install jquery
npm install hqchart
https://www.npmjs.com/package/hqchart
VUE example: demo-vue.md
React example: demo-react.md

local debugging

Due to security reasons, the built-in test data interface has been discontinued. If you need data docking, you can refer to the third data docking case. https://github.com/jones2000/HQChart-Super

The built-in test data does not support cross-domain debugging. If you want to debug the code locally in Chrome, refer to the tutorial to solve the problem of cross-domain debugging in Chrome. For local debugging of VUE projects, please use the 127.0.0.1:8080 site for debugging.

statement

This project only provides the market graphics library and the Macgram script executor.
All market data on the page comes from the Internet or test fake data. The accuracy of the data cannot be guaranteed and is only used for development and debugging. Any market data problems have nothing to do with this project. Please go to the exchange to purchase genuine market data.

HQChart 3.0

• Available in web version and WeChat applet version
  

1. K-line chart

• Supports restoration of rights before and after restoration
  

• Support daily, monthly, weekly, annual and minute lines
  

• The main image supports stock overlay
  

• The K-line shape supports hollow K-line, solid K-line, American line, and closing price line.

• Supports commonly used indicators (currently more than 80 indicators are entered into the system), supports custom Tongdaxin syntax script indicators moving average, BOLL, MACD, KDJ, VOL, RSI, BRAR, WR, BIAS, OBV, DMI, CR, PSY, CCI, DMA, TRIX, VR, EMV, ROC, MIM, FSL, CYR, MASS, WAD, CHO.....
  

• Support drawing tools, support saving to local or in memory line segments, rays, rectangles, arc lines, horizontal lines, trend lines, parallel lines, parallel channels, price channel lines, text, Gann angle lines, speed lines, golden section , percentage line, band line, triangle, symmetrical angle, Fibonacci periodic line, parallelogram, circle, iconfont picture
  

• Supports interval statistics and interval shape matching (not supported by the WeChat applet version)
  

• Drag the mouse left and right to move the data, move the keyboard with the cross cursor, and zoom with the keyboard
  

• Support Mac syntax

• Support Tongdaxin syntax index

• Supports colorful K lines (currently more than 30 colorful K lines are entered into the system), and supports customizing the colorful K lines of Tongdaxin grammar script

• Support expert system indicators

• Supports individual stock chip charts
  

• Supports single indicator and single stock front-end backtest calculation (webhqchartumychart.regressiontest.js) (2019-5-13 added function)
  Calculate the following data:
  
  Trade: {Count Number of transactions Days: Number of trading days Success: Number of successful transactions Fail: Number of failed transactions}
  Day: {Count: Total runs Max: Longest run Min: Shortest run Average: Average run}
  Profit: total return StockProfit: individual stock return Excess: excess return MaxDropdown: maximum drawdown Beta: β (Beta) coefficient
  NetValue: [ {Date: Date, Net: Net value, Close: Stock closing price, IndexClose: Market closing price}, ]
  

• Support barrages

• Supports multi-indicator overlay (new feature added on 2019-7-12)
  

• Support screenshots (new feature added on 2019-7-9)

• Support K-line daily data or minute data automatic update (2019-7-23)

• Support split K-line chart (2019-9-9)
  

• Support K-line area chart

• Support depth map
  

• Support ox diagram

• Support indicator graphics drag and drop

• Y-axis drag and zoom

• Indicator tab button

• order flow
  
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_orderflow.html

• Order flow 2
  
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_orderflow_v2(type=7).html

• Order flow 3
  
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_orderflow_v2(type=8).html

• Order flow 4
  
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_orderflow_v2(type=17).html

• Order flow 5
  
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_orderflow_v2(type=17).html

• Fixed range trading volume distribution chart

• Visible range trading volume distribution chart

• Color K line pillar
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/demo_color_kline_v2.html

• Indicator window is maximized and minimized

• Range selection supports drag and drop movement

• Scatter Chart Indicator

• renko renko chart

• line break

• OrderBook Heatmap

• Data export

• Horizontal scroll bar

• American Line (automatically adjust column width)

• HLC Area

• Uncovered gap display

• Mini program drawing tool
  

• background segmentation
  

• chip chart
  
  

2. Trend chart

• Support indicators
  
• Support stock overlay
  
• Support Shanghai, Shenzhen and Hong Kong stocks, domestic futures, etc.
  
• Minute data display
  
• Support multi-day and minute data display
  
• Support A-share call auction display/hide (new function added on 2019-7-12)
  
• Support index leading indicators (new feature added on 2019-7-15)
  
• support information identifier
  
  https://jones2000.github.io/HQChart/webhqchart.demo/samples/minute_mines.html
• Support daily limit coordinates
  
• Supports pre-market, intra-market, and after-market market display of U.S. stocks
  

3. Other graphics

• Transaction details list, supports keyboard and scroll page turning
  
• Price list, supports keyboard, roller page turning
  
• Quotation list
  

1. Manual creation of pure canvas, virtual tables, no lag in operation.
   
2. Supports fixed columns, keyboard operations: PageUP/PageDown to turn pages, Up/Down to move the currently selected stock, Left/Right to move columns, and the scroll wheel to turn pages up and down.
   
3. Supports tab page switching and horizontal scrolling axis
   
4. Supports configuring column local sorting or remote sorting
   
5. Support trend chart
6. Support single K-line column
7. Drag and drop to adjust header order and column width
   
   
   
   
   

• keyboard wizard
  
  
• T-shaped quotation
  
• big data table
  

3. Web page demo

Equation Editor

• Imitation Tongdaxin formula editor
• Imitation Tongdaxin formula editor-time-sharing chart

K-line chart

• K-line chart
• K-line chart mobile page
• K-line chart mobile phone horizontal screen page
• K line 1 minute K line update speed test
• K-line chart scroll bar
• Millisecond closing price K-line chart
• Millisecond closing price K-line chart scroll bar mode
• K-line chart sand table deduction
• Customized color K-line chart
• Drag the minute K-line to download the historical data page
• Drag the daily K-line to download the historical data page
• Indicator template example
• Customized K-line indicator title bar

Background indicator example

• Example of K-line docking background indicator (DRAWBAND)
• Example of K-line docking background indicator (MULTI_LINE)
• K-line docking background indicator (MULTI_SVGICON) example
• Example of K-line docking background indicator (MULTI_TEXT)
• Example of K-line docking background indicator (MULTI_HTMLDOM)

order flow

• Order flow style 1
• Order flow style 2
• Order flow style 3
• Order flow style 4

Trend chart

• Trend chart
• Trend chart mobile page
• Trend chart mobile phone landscape page
• Trend Chart-Change Information Marker
• Indicator template example

K line training

• K line training mobile phone
• K line training mobile phone horizontal screen

divided into pens

• List of transactions
• Split list-small window mode

drawing tools

• K line drawing tool
• K-line drawing tool-horizontal screen

Indicator calculation

• Front-end worker threads calculate metrics in batches

keyboard wizard

• keyboard wizard

T-shaped quotation

• T-shaped quotation

Quotation list

• Quotation list
• List of large transactions

4.Usage tutorial

List of drawing tools

List of drawing tools supported by HQChart

Mac syntax function help documentation

HQChart Mai Grammar built-in function help document

H5 tutorial

1. HQChart usage tutorial 1-How to quickly create a K-line chart page
   
2. HQChart usage tutorial 2-How to display custom indicators on the K-line chart page
   
3. HQChart usage tutorial 3-How to lock the indicator and display it on the K-line chart page
   
4. HQChart usage tutorial 4-How to customize the color style of K-line chart
   
5. HQChart usage tutorial 5-K line chart control operation function description
   
6. HQChart usage tutorial 6-How to obtain indicator data on the K-line chart for backtesting
   
7. HQChart usage tutorial 7-How to quickly create a time-sharing chart page
   
8. HQChart usage tutorial 9-How to quickly create a K-line training page
   
9. HQChart usage tutorial 10-Several special attributes set on the mobile page
   
10. HQChart usage tutorial 11-How to replace the K-line data API with your own API data
    
11. HQChart usage tutorial 8-How to quickly create a horizontal screen time-sharing chart page
    
12. HQChart usage tutorial 14-analyst syntax executor
    
13. HQChart tutorial takes 13-5 minutes to complete a small program K-line chart
    
14. HQChart usage tutorial 12-How to add barrages to the K-line chart
    
15. HQChart usage tutorial 15-analyst syntax executor python version
    
16. Using Mai language indicator visualization in HQChart tutorial 16-py
    
17. HQChart usage tutorial 17-Independent coordinate superposition of multiple technical indicators
    
18. HQChart usage tutorial 18-K line screenshot
    
19. HQChart usage tutorial 19-Backend single stock indicator calculation service based on HQChart
    
20. HQChart usage tutorial 20-Single stock cross-sectional data (financial data) calculator
    
21. HQChart usage tutorial 21-cross cursor setting instructions
    
22. HQChart usage tutorial 22-How to create a moving chip chart
    
23. HQChart usage tutorial 23-Y axis scale display settings
    
24. HQChart usage tutorial 24-multi-language settings
    
25. HQChart usage tutorial 25-overlay multiple varieties settings
    
26. HQChart usage tutorial 26-Automatic update settings of K-line chart and trend chart data
    
27. HQChart usage tutorial 27-Dynamic setting of K-line chart indicator template
    
28. HQChart usage tutorial 28-How to create system indicators
    
29. HQChart usage tutorial 31-trend chart change data settings
    
30. HQChart usage tutorial 32-How to display custom SVG vector icons on K-line charts
    
31. HQChart usage tutorial 39-How to draw text dividing lines in indicators
    
32. HQChart usage tutorial 40-How to customize the minute cycle or daily cycle K-line
    
33. HQChart usage tutorial 41-minute K-line settings drag and drop to automatically download historical data
    
34. HQChart usage tutorial 42-How to connect digital currency with K-line chart
    
35. HQChart usage tutorial 43-Drag and drop the daily K-line settings to automatically download historical data
    
36. HQChart usage tutorial 45-How to dynamically modify indicator parameters
    
37. HQChart usage tutorial 46-minute period data calculation external interface
    
38. HQChart usage tutorial 47-How to customize the right-click menu
39. HQChart usage tutorial 48-How to customize the X-axis scale
    
40. HQChart usage tutorial 49-Indicator configuration item description
    
41. HQChart usage tutorial 50-Y axis custom scale setting instructions
    
42. HQChart usage tutorial 51-Indicator switching button event description
    
43. HQChart usage tutorial 52-Customize mobile K-line chart Tooltip
    
44. HQChart usage tutorial 53-log log output control
    
45. HQChart usage tutorial 54-K line zoom control button interface description
    
46. HQChart usage tutorial 55-Customize PC terminal K-line chart Tooltip
47. HQChart usage tutorial 56-Instructions on the suffix list corresponding to the built-in varieties
    
48. HQChart usage tutorial 57-How to adjust the column scaling size of the K line
    
49. HQChart usage tutorial 58-How to draw an area chart (such as a depth chart) on the right side of the K line
    
50. HQChart usage tutorial 59-Instructions for using the cross-cycle and cross-stock function STKINDI
    
51. HQChart usage tutorial 60-new version of k-line training usage tutorial
    
52. HQChart usage tutorial 61-drawing tool interface usage tutorial
    
53. HQChart usage tutorial 62-Variety decimal place setting
    
54. HQChart usage tutorial 64-front-end custom cycle algorithm interface
    
55. HQChart usage tutorial 65-Set indicator output dynamic variable name
    
56. HQChart usage tutorial 66-Customize data download text prompt effect
    
57. HQChart usage tutorial 67-Click the mouse on the K-line pillar to listen for events
    
58. HQChart usage tutorial 68-Configuring DRAWTEXT, DRAWICON, DRAWNUMBER font size
    
59. HQChart usage tutorial 69-Get K-line data of specified stocks
    
60. HQChart usage tutorial 70 - Tongdaxin grammar detection/indicator translation
    
61. HQChart usage tutorial 71-How to customize the Y-axis tick mark
    
62. HQChart usage tutorial 72-Drawing tool wave ruler scale configuration
    
63. HQChart usage tutorial 73-Use Vue3.0 to create HQChart graphics
    
64. HQChart usage tutorial 74-Using to quickly create a digital currency depth chart
    
65. HQChart usage tutorial 75-K line chart mouse click event interface
    
66. HQChart usage tutorial 76-K-line chart gesture event interface
    
67. HQChart usage tutorial 77-Y, X-axis scale text creation event callback
    
68. HQChart usage tutorial 78-time-sharing chart collective bidding
    
69. HQChart usage tutorial 79-Exception handling interface
    
70. HQChart usage tutorial 80-customized indicator title information
    
71. HQChart usage tutorial 81-Customize indicator window height
    
72. HQChart usage tutorial 82-Dynamic modification of overlay indicator parameters
    
73. HQChart usage tutorial 83-K line chart highest and lowest price display configuration
    
74. HQChart usage tutorial 84-Button event on the right side of the cross cursor
    
75. HQChart usage tutorial 85-Calculation of stock re-rights
    
76. HQChart usage tutorial 86-Technical indicator OX chart
    
77. HQChart usage tutorial 87-HQChart source code debugging configuration in VUE plug-in mode
    
78. HQChart usage tutorial 88-DRAWTEXT adds background color and border
    
79. HQChart usage tutorial 89-last K line countdown function
    
80. HQChart usage tutorial 90-DRAWTEXT add connection
    
81. HQChart usage tutorial 91-How to use DRAWICON to draw pictures in the app
    
82. HQChart usage tutorial 92-How to create a breakdown list
    
83. HQChart usage tutorial 94-How to create a quotation list
    
84. HQChart usage tutorial 96-double-click on the indicator graph
    
85. HQChart usage tutorial 97-K line X-axis scroll bar
86. HQChart usage tutorial 98-Introduction to the use of right-click menu 2.0
87. HQChart usage tutorial 99-K line window setting upper and lower spacing
88. HQChart usage tutorial 100-Customize Y-axis segment background color
89. HQChart usage tutorial 101-Create built-in keyboard wizard
90. HQChart usage tutorial 104-Instructions for unified management of trading volume units

Plug-in built-in dialog 2.0 settings

1. HQChart usage tutorial 102-built-in dialog box settings and instructions
2. HQChart usage tutorial 103-Built-in dialog box [2.0] Set 1-K line tooltip to display custom fields

WeChat Mini Program Tutorial

1. HQChart applet tutorial 1-How to quickly create a K-line chart
2. HQChart applet tutorial 2-How to use the new version of 2D canvas to create a K-line chart
3. HQChart Mini Program Tutorial 3-How to switch between K-line chart and time-sharing chart in the new version of 2D single canvas
4. HQChart Mini Program Tutorial 4-Dynamic Control Gesture Scroll Page

DingTalk Mini Program

1. HQChart DingTalk Mini Program Tutorial 1-Create a K-line chart
   

uni-app tutorial

1. HQChart usage tutorial 79-Tutorial on using hqchart built-in components in uniapp
   
2. HQChart usage tutorial 35-How to create K-line chart (h5) in uni-app
   
3. HQChart usage tutorial 36-How to create a trend chart (h5) in uni-app
   
4. HQChart usage tutorial 37-How to create a K-line chart (app) in uni-app
   
5. HQChart usage tutorial 38-How to create a trend chart (app) in uni-app
   
6. HQChart usage tutorial 44-uniapp uses conditional compilation to support h5, app, and small programs at the same time
   
7. HQChart usage tutorial 60 - Solve the problem of displaying a white screen after the uniapp-app page is hidden
   
8. HQChart usage tutorial 63-uniapp uses renderjs+hqchart(h5)
   
9. HQChart practical tutorial 40-How to make hqchart component (uniapp version)
   
10. HQChart usage tutorial 100-uniapp how to run WeChat applet in vue3

Third-party data front-end access tutorial (trend chart)

1. HQChart usage tutorial 29-How to connect trend charts to third-party data 1
   
2. HQChart usage tutorial 29-How to connect the trend chart with third-party data 2-Latest time-sharing data
   
3. HQChart usage tutorial 29-How to connect the trend chart with third-party data 3-Multi-day time-sharing data
   
4. HQChart usage tutorial 29-How to connect trend charts with third-party data 4-Overlay stock time-sharing data
   
5. HQChart usage tutorial 29-How to connect the trend chart with third-party data 4-Change prompt information
   
6. HQChart usage tutorial 29-How to connect the trend chart with third-party data 5-Indicator data
   
7. HQChart usage tutorial 29-How to connect the trend chart with third-party data 6-websocket minute data
   
8. HQChart usage tutorial 29-How to connect trend charts with third-party data 7-Overlay the latest time-sharing data of stocks
   
9. HQChart usage tutorial 29-How to connect the trend chart with third-party data 8-Volume ratio data
   

Third-party data front-end access tutorial (K-line chart)

1. HQChart usage tutorial 30-How to connect third-party data with K-line chart 1
   
2. HQChart usage tutorial: How to connect 30-K line chart with 3rd party data 2-day K data
   
3. HQChart usage tutorial 30-K line chart how to connect third-party data 3-1 minute K data
   
4. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 4-Circulation equity data
   
5. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 5-Indicator data
   
6. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 6-Split K-line data
   
7. HQChart usage tutorial: How to connect the 30-K line chart with third-party data and 7-day K data page download
   
8. HQChart usage tutorial 30-K line chart how to connect with third party data 8-1 minute K line data download in pages
   
9. HQChart usage tutorial 30-K line chart how to connect third-party data 9-BS indicator data
   
10. HQChart usage tutorial 30-How to connect K-line charts to third-party data 10-How to draw custom line segments or multi-line indicator data
    
11. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 11-How to draw multiple sets of custom icons
    
12. HQChart usage tutorial 30-How to connect the K-line chart to third-party data 12-How to draw text in the indicator
    
13. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 13-Use websocket to update the latest K-line data
    
14. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 14-Polling incremental update of daily K data
    
15. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 15-Polling incremental update of 1-minute K-line data
    
16. HQChart usage tutorial: How to connect 30-day K line chart with third-party data 16-day K overlay stock
    
17. HQChart usage tutorial 30-K line chart how to connect 3rd party data 17-minute K overlay stock
    
18. HQChart usage tutorial 30-How to connect the K-line chart to third-party data 18-How to draw custom columns
    
19. HQChart usage tutorial 30-How to connect K-line charts to third-party data 19-How to draw colored K-line columns
    
20. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 20-Information announcement data
    
21. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 21-Cross-cycle function data
    
22. HQChart usage tutorial 30-K line chart how to connect third-party data 22-FINVALUE function data
    
23. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 23-FINANCE function data
    
24. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 24-How to fill the K-line background color
    
25. HQChart usage tutorial 30-How to connect the K-line chart to third-party data 25-Indicator script custom variables
    
26. HQChart usage tutorial 30-How to connect the K-line chart to third-party data 26-Indicator script custom function
    
27. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 27-How to render DOM elements in the indicator
    
28. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 28-Big market data
    
29. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 29-Plate string function data
    
30. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 30-Real-time market data DYNAINFO
    
31. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 31-Get the K-line data of the specified variety
    
32. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 32-Order flow
    
33. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 33-Drag and drop the daily line superimposed varieties to download historical data
    
34. HQChart usage tutorial 30-K line chart how to connect with third party data 34-minute K line superimposed varieties drag and drop to download historical data
    
35. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 35-Fixed range trading volume distribution chart data
36. HQChart usage tutorial 30-How to connect K-line chart to third-party data 36--Scatter chart
37. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 37-How to draw dots
38. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 38-Tongdaxin indicator K-line data
39. HQChart usage tutorial 30-How to connect K-line chart to third-party data 39-Zoom to download K-line data historical data
40. HQChart usage tutorial: How to connect 30-day K line chart with third-party data and 40-day K superimposed stock incremental update
41. HQChart usage tutorial 30-K line chart how to connect with third party data 41-minute K line superimposed stock incremental update
42. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 42-DRAWTEXTREL, DRAWTEXTABS data structure

Third-party data front-end access tutorial (details)

1. HQChart Usage Tutorial 93-Connecting the transaction details table with third-party data 1-Full transaction details data
   
2. HQChart Usage Tutorial 93-Connecting the Breakdown Detailed Table with 3rd Party Data 2-Incremental Breakdown Detailed Data
   

Third-party data front-end access tutorial (quote list)

1. HQChart usage tutorial 95-Quotation list docking with third-party data 1-Code table data
   
2. HQChart usage tutorial 95-Quotation list docking with third-party data 2-Sector component data
   
3. HQChart usage tutorial 95-Quotation list docking with third-party data 3-Stock data
   
4. HQChart usage tutorial 95-Quotation list docking with third-party data 4-Stock sorting data
   

Practical tutorial

1. HQChart practical tutorial 1-Forex time-sharing chart
   
2. HQChart practical tutorial 2-Using cross-period writing indicators
   
3. HQChart practical tutorial 3-http+ws docking minute K-line data
   
4. HQChart practical tutorial 4-http+ws docking daily K-line data
   
5. HQChart practical tutorial 5-http+ws docking single-day time-sharing chart data
   
6. HQChart practical tutorial 6-customized time-sharing chart
   
7. HQChart practical tutorial 7-Customize the display gesture and click the K line to display information
   
8. HQChart practical tutorial 8-How to manually reinitialize hqchart
   
9. HQChart practical tutorial 9-Customize A-share time-sharing chart
   
10. HQChart practical tutorial 14-K line chart docking third party http/https data tutorial arrangement
    
11. HQChart practical tutorial 17-K line sand table deduction
    
12. HQChart practical tutorial 18-multiple stocks in the same column
    
13. HQChart practical tutorial 45-Customize indicator window background
    
14. HQChart practical tutorial 66-Dynamic adjustment of HQChart layout size
15. HQChart practical tutorial 67-worker batch calculation of stock indicators
16. HQChart practical tutorial 71-K line chart with double coordinate configuration
17. HQChart practical tutorial 73-imitation tradingview indicator MACD

Paid tutorial

1. Complete tutorial on docking HQChart with Huobi
2. Complete tutorial on docking HQChart with Ouyi

Source code charges

1. HQChart practical tutorial 36-Digital currency Binance docking-uniapp version
   
2. HQChart practical tutorial 36.2-Digital currency Gate.IO docking-uniapp version
   
3. HQChart practical tutorial 41-Sina + Tencent A-share data source docking-uniapp version
   
4. HQChart practical tutorial 42-Sina futures data source docking-uniapp version
   
5. Stock time-sharing chart example for the day, using data from the Oriental Fortune webpage
   
6. Stock 5-day time-sharing chart example, using Oriental Fortune webpage data
   
7. Stock daily K-line chart example, using Oriental Fortune webpage data
   
8. Stock minute K-line chart example, using Oriental Fortune webpage data
   

httpA-share data docking tutorial (paid article)

Daily K line

1. HQChart practical tutorial 29-A-share daily K-line data docking-Vue version
   
2. HQChart practical tutorial 30-A-share daily K-line data docking-uniapp version
   
3. HQChart practical tutorial 34-A-share daily K-line data docking-mini program version
   

minute K line

1. HQChart practical tutorial 31-A-share minute K-line data docking-Vue version
   
2. HQChart practical tutorial 32-A-share minute K-line data docking-uniapp version
   

Time-sharing chart

1. HQChart practical tutorial 33-A share time chart data docking-Vue version
   
2. HQChart practical tutorial 35-A share time chart data docking-uniapp version
   

background indicators

1. HQChart practical tutorial 36-A-share background indicator docking-uniapp version
   

Sina interface docking

1. HQChart practical tutorial 37-Sina minute K-line data docking-js version
   
2. HQChart practical tutorial 38-Sina futures data docking-js version
   

Advanced application practical tutorial (paid article)

1. HQChart practical tutorial 19 - PC side time-sharing chart customization tooltip
   
2. HQChart practical tutorial 20 - PC side K-line chart customization tooltip
   
3. HQChart practical tutorial 21 - unapp app side time-sharing chart customization tooltip
   
4. HQChart practical tutorial 21 - uniapp app K-line chart customization tooltip
   
5. HQChart Practical Tutorial 22 - Customized range selection menu on PC
   
6. HQChart practical tutorial 23 - Click on the K line to display the historical minute trend chart
   
7. HQChart practical tutorial 24 - Customized K-line drawing tool setting box (line segment class)
   
8. HQChart practical tutorial 25 - Customized K-line drawing tool setting box (text type)
   
9. HQChart practical tutorial 30 - Configuring K-line drawing
   
10. HQChart practical tutorial 26 - K-line drawing tool adds custom icons
    
11. HQChart practical tutorial 27 - Add animation point to the last data of the trend chart
    
12. HQChart practical tutorial 28 - dynamically switching color styles
    
13. HQChart practical tutorial 29 - Save indicator parameters to local cache
    
14. HQChart practical tutorial 39 - K-line chart keyboard event reloading
    
15. HQChart practical tutorial 43 - Add animation point to the last data of K-line area chart
    
16. HQChart Practical Tutorial 44 - Dynamic growth of multi-indicator windows
    
17. HQChart Practical Tutorial 46 - Click the button on the right side of the cross cursor to add a tick mark
    
18. HQChart Practical Tutorial 48 - Remote Indicator Obtains the Range of the Current Screen K-Line
    
19. HQChart practical tutorial 49 - Click to modify the K line color and background color
    
20. HQChart practical tutorial 50 - Customizing indicator bar tool buttons
    
21. HQChart Practical Tutorial 51 - Customized Indicator List
    
22. HQChart practical tutorial 52 - Use DRAWICON to draw icons in APP
    
23. HQChart practical tutorial 53 - Dynamically specify the background color of the marked K-line interval
    

Advanced application practical tutorial 2 (paid article)

1. HQChart practical tutorial 54-renko brick K-line chart
2. HQChart practical tutorial 55-heatmap heat map
3. HQChart practical tutorial 56-limit indicator period
4. HQChart practical tutorial 57-remote indicator prompt information
5. HQChart practical tutorial 58-K line main chart imitates tradingview
6. HQChart practical tutorial 59-Depth map customization Tooltip output content
7. HQChart practical tutorial 60-How to customize the cross cursor output content
8. HQChart practical tutorial 61-Customize the color of the cross star K line
9. HQChart practical tutorial 62-Customize the K-line title bar
10. HQChart practical tutorial 63-Customize the K-line tooltip display data on the mobile phone
11. HQChart practical tutorial 64-customized time-sharing chart title bar
12. HQChart Practical Tutorial 65-Customize the time-sharing chart tooltip display data on the mobile phone
13. HQChart Practical Tutorial 68-Customized Time Sharing Chart PC Side Tooltip Display Data
14. HQChart practical tutorial 69-How to set indicators for the main chart of time-sharing chart
15. HQChart practical tutorial 70-K line chart adds cost line
16. HQChart practical tutorial 72-U.S. stock pre-market, intra-day, and post-market time-sharing charts
17. HQChart practical tutorial 74-customized indicator title bar
18. HQChart practical tutorial 75-time-sharing chart playback
19. HQChart practical tutorial 76-Customize Y-axis tick mark
20. HQChart practical tutorial 77-Manually create line segment drawing tools
21. HQChart usage tutorial 30-How to connect K-line chart to third-party data 43-DRAWTABLE data structure
22. HQChart usage tutorial 30-How to connect the K-line chart with third-party data 44-DRAWPIE data structure

HQChart quotation list advanced application tutorial (paid article)

1. HQChart quotation list advanced application tutorial 1-Snowball data docking quotation list
2. HQChart quotation list advanced application tutorial 2-Oriental Fortune data docking self-selected stock list
3. HQChart quotation list advanced application tutorial 3-Snowball data docking quotation list uniapp version
4. HQChart Quote List Advanced Application Tutorial 4-Stock Name Added Type Icon
5. HQChart Quotation List Advanced Application Tutorial 5-Customize Cell Text Color
6. HQChart quotation list advanced application tutorial 6-custom column data docking
7. HQChart quotation list advanced application tutorial 7-trend column data docking
8. HQChart Quotation List Advanced Application Tutorial 8-Name Column Style Instructions

Design documents:

1. How to (c++, js) write a traditional K-line chart and trend chart 1
   
2. How to (c++, js) write a traditional K-line chart and trend chart 2-trend chart
   
3. How to (c++, js) write a traditional K-line chart and trend chart 3-How to implement the multi-indicator window mode
   
4. How to (c++, js) write a traditional K-line chart and trend chart 3-Drawing of cross cursor
   
5. How to (c++, js) write a traditional K-line chart and trend chart 4-K-line chart
   
6. How to (c++, js) write a traditional K-line chart and trend chart 5-moving chip chart
   

Introduction to HQChartPy2 (py version indicator engine)

1. HQChart(C++) indicator calculation engine-introduction
   
2. HQChart(C++) indicator calculation engine-installation
   
3. HQChart (C++) indicator calculation engine-py interface class FastHQChart introduction
   
4. HQChart (C++) indicator calculation engine-py interface class IHQData K-line data docking
   

HQChartPy2 data docking tutorial (taking tushare data as an example)

1. hqchartPy2 data docking tutorial 1-K line data
   
2. hqchartPy2 data docking tutorial 2-equity data, chip distribution function
   
3. hqchartPy2 data docking tutorial 3-FINANCE data
   
4. hqchartPy2 data docking tutorial 4-DYNAINFO function
   
5. hqchartPy2 data docking tutorial 5-refer to specified stock data function
   
6. hqchartPy2 indicator stock selection-KDJ stock selection
   

5.VUE market project

Code address (vuehqchart)

Page name "hq.demo.page.html"

Page name "stockmultiperiod.demo.page.html"

Samples developed for customers based on the VUE version

Sample address (https://jones2000.github.io/HQChart/vue.demo/infoHqdemo/release/index.html)
Code address (vue.demo/infoHqdemo)

VUE version mobile version sample 1

Sample address (https://jones2000.github.io/HQChart/vue.demo/hq_h5_pages/release/stockHq.html)
Code address (vue.demo/hq_h5_pages)

VUE version mobile version sample 2 black style

Sample address (https://jones2000.github.io/HQChart/vue.demo/hq_h5_demo_black/release/stockHq.html)
Code address (vue.demo/hq_h5_demo_black)

js page sample

Code address (webhqchart.demo/h5demo)
VUE code address (vue.demo/stockpage_h5)

Awards

sponsor

Star History

HQChart paid technical support

Note: Technical support is not responsible for development and deployment.

name	Cost (monthly)	content
Single technical support	500
Basic technical support	2000	Answer questions related to the plug-in. If there is a corresponding tutorial, provide the corresponding tutorial address.
Advanced technical support	5000	Answer plug-in related questions. If there is a corresponding tutorial, provide the corresponding tutorial address. For complex problems, demo examples can be provided. If you need to customize graphics yourself, provide a plug-in graphics interface. (Customized graphics are developed by the customer themselves)
Graphic custom development	Starting from 5000	The cost depends on the specific needs. The total cost is calculated after evaluating the development labor hours (labor time fee is about 450/hour). The customized part provides source code, which is separate from the open source code and is hooked into the HQChart extension plug-in. Prepayment: 40%, delivery code: 50%, final payment: 10%