Integrating Xinfinit Chart into Your External Page/Application

This document outlines the steps required to integrate the Xinfinit Chart into an external page or application, including the setup of required libraries, package files, and initial configurations.

1. Package Structure

The Xinfinit Chart release package includes the following directory structure with essential files:

Xinfinit Chart Package
├── css/
│ └── x-chart.min.css
├── emoji/
│ └── (emojies)
├── fonts/
│ └── (fonts)
├── img/
│ └── (images)
├── js/
│ ├── x-chart-basic.min.js
│ ├── x-chart-adv.min.js
│ ├── x-chart-drawings.min.js
│ ├── x-chart-indicators.min.js
│ ├── x-chart-contextmenu.min.js
│ ├── x-chart-trade.min.js
│ ├── x-chart-alert.min.js
│ └── x-chart-intradayChart.min.js
├── lang/
│ └── lang-en.json
└── theme/
├── theme_light.js
└── theme_dark.js

2. Required External Libraries

To ensure the chart functions correctly, include the following dependencies in your project's package.json or directly include the JS and CSS files in your HTML in the specified order.

"dependencies": {
"jquery": "2.1.4",
"jquery-ui-dist": "^1.12.1",
"highcharts": "10.3.3",
"@claviska/jquery-minicolors": "^2.3.2",
"jquery-localize": "^0.1.0",
"rgb-color": "^2.1.2",
"canvg": "^1.5.3"
}

Direct Download Links for JS and CSS Files (not actual links, just examples):

JS Files:
- jQuery v2.1.4
- jQuery UI v1.12.1
- Highcharts v10.3.3
- jquery.minicolors v2.3.6
- jquery.localize v0.1.0
- rgb-color v2.1.2
- StackBlur v1.4.1
- Canvg v1.5.3
CSS Files:
- jQuery UI CSS v1.11.4
- jquery.minicolors CSS v2.3.6

3. Integration Steps

To integrate the Xinfinit chart into your application, follow these steps:

1. Include the external library files in your page/application in the order mentioned above. 2. Add the Xinfinit package files in the specified order. 3. Create a div with a unique ID to host the chart. 4. Initialize the Xinfinit chart with the provided JavaScript configuration. 5. Data Fetching: Ensure your backend service can handle requests as specified and respond with data in the required format for the chart to display the data correctly.