Exeria chart

Contact to use ChartWidget Register to use free iframe chart
Widget - użycie, konfiguracja
Tick - dodawanie nowych cen
Dodawanie wskaźnika
Zapisywanie i nadawanie stanu aplikacji, szablony
Iframe
Widget - użycie, konfiguracja
Symbol
Interval
Type
Scale
Width
Height
Theme
Apply settings
Full screen

Konfigurację komponentu ChartWidget należy rozpocząć od dodania w dokumencie HTML znaczników <script> zawierających definicję bibliotek oraz znaczników <link> zawierających style CSS. Komponent do działania wymaga biblioteki jQuery w wersji minimum 2.1.

W dokumencie HTML należy umieścić element, który będzie kontenerem dla wykresu. W naszym przykładzie jest to element DIV o id="rcpContainer" z ustawionymi parametrami szerokości i wysokości.

Przed wystartowaniem komponentu ChartWidget należy w obiekcie Efix ustawić ścieżkę do katalogu, w który znajdują się pliki dystrybucyjne komponentu. Dystrybucja plików zawierająca spersonalizowaną bibliotekę JS jest przesyłana bezpośrednio na Twój adres email po wniesieniu opłaty licencyjnej.
Definicję źródła danych należy wykonać za pomocą metody Efix.setDataSourceService() - w przykładzie jest to SomeCustomDataSource()

Tak przygotowany komponent ChartWidget można zainicjować metodą Efix.widget.start() przekazując do niego zestaw opcji:

  • parentId - ID komponentu docelowego, w którym będzie umieszczony wykres (w przykadzie przygotowany wcześniej DIV o id="rcpContainer")
  • checkBrowser - włączenie opcji spowoduje sprawdzenie przeglądarki i zablokowanie innych niż Google Chrome
  • theme - inicjuje aplikację w kolorystyce jasnej lub ciemnej (light/dark)
  • symbolId - identyfikator instrumentu finansowego
  • interval - symbol interwału (5m/15m/30m/1h/4h/1D/1w/1m)
  • renderAs - sposób rysowania wykresu (OHLC/Bars/Line/Histogram/Line and Histogram)
  • mouseWheelZoomEnabled - włącza/wyłącza opcję powiększania wykresu rolką myszki (domyślnie włączone)

Użycie funkcji Efix.bindToChartDataLoaded(function) pozwala przypiąć funkcję do zdarzenia informującego o zakończeniu ładowania danych dla wykresu. W naszym przykładzie zawsze po załadowaniu danych do wykresu zostanie dodany wskaźnik MACD.

Aby przeładować wykres z nowymi ustawieniami, wystarczy wywołać metodę Efix.widget.change() widgeta podając zestaw opcji, analogicznie jak przy inicjacji widgeta.

Implementacja DataSourceService:

Obiekt DataSourceService powinien implementować przynajmniej poniższe dwie metody:

					
		DataSourceService(){ 
			this.getInstrument = function(instrumentId, onSuccess, onError){}
			this.loadInstrumentCandles = function(instrumentId, interval, stamp, onSuccess, onError){}
		}
					
				
Implementacja getInstrument()

Metoda powinna zwrocić obiekt JSON reprezentujący Instrument o podanym identyfikatorze (poprzez wywołanie funkcji callback onSuccess(instrument))

Struktura obiektu Instrument pokazana jest poniżej:

					
		{ 
			"id": "400494226", 
			"symbol": "EUR/USD", 
			"precision": 5,
			"currency": "USD", 
			"chart": "OHLC", 
			"avaliableIntevals": [
				{ "id": 0,  "symbol": "5m",  "desc": "5 minut", 	"milis": 300000 }, 
				{ "id": 1,	"symbol": "15m", "desc": "15 minut", 	"milis": 900000 },
				{ "id": 2,	"symbol": "30m", "desc": "30 minut", 	"milis": 1800000 }, 
				{ "id": 3,	"symbol": "1h",  "desc": "1 godzina", 	"milis": 3600000 }, 
				{ "id": 4,	"symbol": "4h",  "desc": "4 godziny", 	"milis": 14400000 },
				{ "id": 5,	"symbol": "1D",  "desc": "1 dzień", 	"milis": 86400000 }, 
				{ "id": 7,	"symbol": "1W",  "desc": "1 tydzień", 	"milis": 604800000 },
				{ "id": 8, "symbol":  "1M",  "desc": "1 miesiąc", 	"milis": null }
			]
		 } 
					
				
Implementacja loadInstrumentCandles()

Metoda zwraca historię dla instrumentu o wskazanym identyfikatorze w zadanym interwale. Format danych powienien mieć strukturę jak poniżej.

					
		{
			{ "instrument": { /* obiekt Instrument */ },
			"interval": { "id": 5, "symbol": "1D", "desc": "1D", "milis":86400000 }, 
			"stamp": 1299369600000, 
			"firstOhlcv": 1299369600000,
			"lastOhlcv": 1495411200000, 
			"history": [
				{
					"stamp": 1299369600000,
					"o": 1.3988, 
					"h": 1.3999, 
					"l": 1.3981, 
					"c": 1.3991, 
					"v": 0.0, 
					"i":0.0
				},
				{ 
					"stamp": 1299456000000, 
					"o": 1.3995, 
					"h": 1.4037, 
					"l": 1.3951, 
					"c": 1.3961, 
					"v": 0.0, 
					"i": 0.0 
				},
				...
			]
		}
					
				
Przykład implementacji DataSourceService:

Powyższy wykres używa przykładowej implementacji DataSourceService, która pobiera dane ze statycznych plików JSON.

Przykładowe źródła danych

Tick - dodawanie nowych cen:
Tick:
Wolumen:
Zastosuj nową cenę

Aktualizacja bieżącej ceny wykresu może odbywać się poprzez wywołanie metody Efix.widget.tick().

Dodawanie wskaźników
Wskaźnik:
Dodaj wskaźnik
var indicators = Efix.widget.getAvailiableIndicators();

Zwraca listę dostępnych wskaźników

Efix.widget.addIndicator("MACD"); Efix.widget.addIndicator("SMA"); Efix.widget.addIndicator("RSI");

Dodaje do wykresu kolejno wskaźniki MACD, SMA, RSI z domyślnymi parametrami

Efix.widget.addIndicator("MACD",10,20,30); Efix.widget.addIndicator("SMA", 22); Efix.widget.addIndicator("RSI",10);

Dodaje do wykresu kolejno wskaźniki MACD, SMA, RSI z określnymi własnymi parametrami. Podanie parametrów nie jest obligatoryjne. Jeżeli nie podano wartości parametru dla wskaźnika, zostanie użyta wartość domyślna, np. wywołanie funkcji Efix.widget.addIndicator("MACD",10) doda do wykresu MACD, gdzie pierwszy parametr wyniesie 10, a pozostałe otrzymają wartości domyślne.

Pobieranie/odtwarzanie stanu wykresu, szablony
Get model
Set model EUR/USD 5min + Bolinger +MACD + trendlines
Set model EUR/PLN 1D + SMA + ADX + RoC
Set model EUR/CAD 1H + ParSar + SMI
Set template Bolinger +MACD + trendlines
Set template SMA + ADX + RoC
Set template ParSar + SMI
var model = Efix.widget.getModel();

Zwraca model aplikacji reprezentujący jej stan.

Efix.widget.setModel(model);

Odtwarza pobrany wcześniej model - zawartość wykresu zostanie usunięta i zainicjowana według nowego modelu

Efix.widget.setModelAsTemplate(model);

Odtwarza pobrany wcześniej model jako szablon - zawartość wykresu zostanie usunięta z wyjątkiem instrumentu, na który zostaną naniesione pozostałe obiekty według modelu.