xinfinit-chart

v1.0.3

Published

8 months ago

xinfinit chart

Downloads

0High
0Medium
0Low

shanakac

xinfinit-chart Package Integration

1. Package Structure

The Xinfinit Chart release package includes the following files organized in a specific structure:


- css/
    - x-chart.min-0.1.0.css
- emoji/
    - emojis
- fonts/
    - fonts
- img/
    - images
- js/
    - x-chart-lib-0.1.0.min.js
    - x-chart-basic-0.1.0.min.js
    - x-chart-adv-0.1.0.min.js
    - x-chart-drawings-0.1.0.min.js
    - x-chart-indicators-0.1.0.min.js
    - x-chart-contextmenu-0.1.0.min.js
    - x-chart-trade.min-0.1.0.js
    - x-chart-alert.min-0.1.0.js
    - x-chart-intradayChart-0.1.0.min.js
- lang/
    - lang-en.json
- theme/
    - theme_light.js
    - theme_dark.js

Integration

To integrate the Xinfinit chart into your environment please follow the following steps.

Include the above-mentioned external library files (js/css) into your page/application in the mentioned order.
Include package files in the following order.

<link rel="stylesheet" href="x-chart.min.css">
<script src="theme_<light or dark>.js"></script>
<script src="js/x-chart-lib-0.1.0.min.js"></script> <!-- Required - All in-house libraries here -->
<script src="x-chart-basic-0.1.0.min.js"></script> <!-- Required - All the basic features go here -->
<script src="x-chart-adv-0.1.0.min.js"></script> <!-- Optional - This module contains the market depth chart and undo-redo features -->
<script src="x-chart-drawings-0.1.0.min.js"></script> <!-- Optional - This module contains chart drawings -->
<script src="x-chart-indicators-0.1.0.min.js"></script> <!-- Optional - This module contains chart drawings -->
<script src="x-chart-contextmenu-0.1.0.min.js"></script> <!-- Optional - This module contains context menu functionalities -->
<script src="x-chart-trade-0.1.0.min.js"></script> <!-- Optional - This module contains trading-related features -->
<script src="x-chart-alert-0.1.0.min.js"></script> <!-- Optional - This module contains chart alert features -->
<script src="x-chart-intradayChart-0.1.0.min.js"></script> <!-- Optional - This module contains candle info chart -->

Create a language file similar to the included language file in the package(lang-en.json) and name it as follows

e.g. If you create a language file for Spanish the file name should be lang-es.json

Add app-theme="dark" property to the body tag in the HTML

<body app-theme="dark">

Add a div with a unique ID and dimensions which will be your chart dimensions

<div id="<uniqueId>" style="width:600px; height:350px;"></div>

The xinfinit chart can be initialized by adding the following code inside a <script> tag.

infChart.themeManager.setTheme(infChart.themeManager.getThemes().dark);
var intinitChart = infChart.manager.initChart(<uniqueId>, {
		settings: {
		dataProvider: {
			type: "xinfinit",
			source: "XC",
			url: "<Data source URL prefix>"
		},
		lang: {
			language: '<Language code>',
			pathPrefix: "<Language files folder path>"
		},
		symbol: {
            "provider" : "XC",
            "symbolType" : "<symbol type>",
            "exchange" : "<exchange>",
            "symbol" : "<symbol name>",
            "currency" : "<currency>"
        }
    },
	config: {
        interval: 'D', // [T/D/W/M] - data interval by default
        type: 'candlestick', // [candlestick/line/area/ohlc/hlc/column] - chart type
        period : 'Y_5', // initial period (Y_1 - year , M_1 one month, I - intraday)
        crosshair: 'all', // [last/all] - type of the cross hair (all - any place on y axis, last -close value on y axis)
        minMax: true, // [true/false] - to show/ hide min, max values initially
        grid: 'all' // [all/horizontal/vertical/none] - grid
    }
});

In this example, we are using the predefined data provider which requires the following backend service to fetch data. The service should accept input as below and should respond with following data format.

Request

URL - <URL provided by dataProvider config>/<symbol>/interval/<interval>/columns/<colums>/from/<from date>/to/<to date>"

symbol - encodeURIComponent(<provided symbol from config>)
Interval - 1m, 2m, 3m, 5m, 10m, 15m, 30m, 1h, 2h, 4h, 6h, 1d, week, month
columns - following columns added in comma-separated manner
- prcOpen - Open price of the candle
- prcHigh - High price of the candle
- prcLow - Low price of the candle
- prcLast - Last price of the candle
- volAcc - Accumulated volume for the candle
from date - start date/time of the requested period in 2024-02-02T00:00+00:00 format
to date - end date/time of the requested period in 2024-02-02T00:00+00:00 format

Response

{
    "instrument": {
        "vendor": "BDS",
        "type": "STO",
        "exchange": "MT5",
        "name": "1&1Drillisch",
        "currency": "EUR"
    },
    "interval": "5m",
    "from": "2024-02-02T00:00:00Z",
    "columns": [
        "prcOpen",
        "prcHigh",
        "prcLow",
        "prcLast",
        "volAcc"
    ],
    "values": {
        "1707120000000": [
            18.21,
            18.21,
            18.200000000000003,
            18.200000000000003,
            1200
        ],
        "1707120300000": [
            18.200000000000003,
            18.240000000000002,
            18.18,
            18.189999999999998,
            1000
        ]
    }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

xinfinit-chart Package Integration

1. Package Structure

Integration

Request

Response