Jak wbudować wykres BullionVault w Twoją stronę internetową
Ta strona wyjaśnia, jak wbudować (zaembedować) przedstawiający ewolucję cen złota i srebra wykres BullionVault w Twoją stronę internetową, podając opcje, jakich można użyć, by dostosować wykres do nowego otoczenia, w którym zagości. Może Cię także zainteresować możliwość umieszczenia na stronie czy blogu widżetów BullionVault z aktualizowanymi na żywo cenami złota i srebra. BullionVault podejmuje wszelkie wysiłki, by za pośrednictwem tych usług dostarczać jak najrzetelniejszych i możliwie aktualnych danych, nie może jednak udzielić gwarancji niezawodności informacji o zmianach cen.
Pobieranie bibilioteki wykresu
Biblioteka wykresu napisana jest w javascript i znajduje się na serwerze BullionVault. Nie ma potrzeby downloadowania biblioteki na jakikolwiek inny serwer. Wystarczy tylko dodać poniższy kod do elementu head strony, w którą chcesz wbudować wykres.
<!doctype html>
<head>
<script type="text/javascript" src="https://www.bullionvault.com/chart/bullionvaultchart.js?v=1"></script>
</head>
Tworzenie instancji wykresu
Wykres dodawany jest przez wywoływanie konstruktora BullionVaultChart dwoma argumentami. Pierwszym argumentem jest tablica asocjacyjna z opcjami konfiguracji. Wszystkie dostępne opcje wymienione są poniżej. Drugim argumentem jest ID elementu DOM, w który wykres powinien być zaembedowany. Może to być DIV lub inny elment bloku.
<div id="chartContainer" style="height: 300px; width: 500px;"></div>
<script type="text/javascript" >
var options = {bullion: 'gold'};
var chartBV = new BullionVaultChart(options, 'chartContainer');
</script>
Opcje inicjalizacji wykresu
bullion | Wybiera typ metalu do wyświetlenia. Pamiętaj, że jeżeli przyciski do zmiany kruszcu są wyświetlone w panel przycisków (switchBullion), ustawienia użytkownika przechowywane w ciasteczkach mają pierwszeństwo przed tą opcją. Akceptowane wartości: 'złoto', 'srebro', 'platyna', 'pallad'. |
currency | Wybiera walutę, która będzie wyświetlana. Pamiętaj, że jeżeli w panelu przycisków wyświetlone jest rozwijające się menu (switchCurrency), ustawienia użytkownika przechowywane w ciasteczkach mają pierwszeństwo przed tą opcją. Akceptowane wartości: 'USD', 'GBP', 'EUR', 'JPY', 'AUD', 'CAD', 'CHF' |
timeframe | Wybiera przeznaczoną do wyświetlenia ramę czasową - od 10 minut do 20 lat. Pamiętaj, że jeśli przycisk do wyboru ramy czasowej znajduje się w panelu przycisków (switchTimeframe), ustawienia użytkownika przechowywane na ciasteczkach mają pierwszeństwo przed tą opcją. Akceptowane wartości: '10m', '1h', '6h', '1d', '1w', '1m', '1q', '1y', '5y', '20y' |
chartType | Oznacza typ serii wykresu. Możliwe typy to liniowy i High-Low-Close (cena najwyższa, najniższa i zamknięcia danego odcinka czasu). Pamiętaj, że jeżeli rozwijająca się lista wyboru typu wykresu jest oferowana w panelu przycisków (switchChartType), ustawienia użytkownika przechowywane na ciasteczkach mają pierwszeństwo przed tą opcją. Akceptowane wartości: 'line' 'hlc' |
miniChartMode | Przestawia wykres do trybu “Minichart“, który podtrzymuje jego funkcjonowanie w bardzo niewielkich rozmiarach, ale pozbawiony jest niektórych elementów. Ten tryb jest doskonały do embedowania w bocznej kolumnie stron internetowych. Akceptowane wartości: true, false |
miniChartModeAxis | Określa, jaka oś y powinna być wyświetlona w miniChartMode. Akceptowane wartości: 'kg', 'oz', 'both' |
referrerID | Jeżeli uczestniczysz w naszym programie referencyjnym, użyj tego parametru, by otrzymywać udział w prowizjach nowych klientów, którzy znaleźli nas dzięki linkowi pod wykresem na Twojej stronie. Akceptowane wartości: Twój login (username) BullionVault, np. 'MÓJLOGIN' |
containerDefinedSize | Kontroluje czy rozmiar wykresu powinien dostosowywać się do swojego elementu dominującego (zawierającego go div) lub czy do okna (lub iframe), dostosowując swój rozmiar samoczynnie. Akceptowane wartości: true, false |
displayLatestPriceLine | Pokaż / ukryj linię wskazującą najnowszą cenę i moment ostatniej aktualizacji. Akceptowane wartości: true, false |
switchBullion | Pokaż / ukryj przyciski do przełączania metalu. Akceptowane wartości: true, false |
switchCurrency | Pokaż / ukryj rozwijającą się listę umożliwiającą wybór waluty. Akceptowane wartości: true, false |
switchTimeframe | Pokaż / ukryj przycisk umożliwiający wybór ramy czasowej. Akceptowane wartości: true, false |
switchChartType | Pokaż / ukryj listę wyboru typu wykresu. Akceptowane wartości: true, false |
exportButton | Pokaż / ukryj przycisk eksportowania, który umożliwia użytkownikowi pobranie danych wykresu jako pliku CSV. Akceptowane wartości: true, false |
Uwagi o opcjach
- Przyciski, które akceptują cytowane wartości, są wrażliwe na małe i duże litery.
- Twój referrerID to login (username) BullionVault; Jeżeli np. Twój login to JANKOWALSKI101, to własnie powinieneś wprowadzić jako Twój referrerID.
- Przełącznik MiniChartModeAxis jest brany pod uwage tylko wtedy, gdy miniChartMode jest: true.
- Przełączniki elmentów kontrolnych (takie jak switchBullion, switchCurrency, switchTimeframe, switchChartType and export) nie są brane pod uwagę, jeżeli wykres jest w miniChartMode. Wszystkie elementy kontrole są w tym trybie nieaktywne.
Przykłady użytkowania
Wariant 1: Normalny wykres ustawiony na cenę złota w dolarach w kilogramach i uncjach ramie czasowej jednego tygodnia w trybie liniowym, o rozmiarach 660x400px ze wszystkimi elementami kontrolnymi uaktywnionymi.
<html>
<head>
<script type="text/javascript" src="https://zloto.bullionvault.pl/chart/bullionvaultchart.js" ></script>
<script type="text/javascript" >
var options = {
bullion: 'gold',
currency: 'USD',
timeframe: '1w',
chartType: 'line',
miniChartModeAxis : 'oz',
referrerID: 'MYUSERNAME',
containerDefinedSize: true,
miniChartMode: false,
displayLatestPriceLine: true,
switchBullion: true,
switchCurrency: true,
switchTimeframe: true,
switchChartType: true,
exportButton: true
};
var chartBV = new BullionVaultChart(options, 'embed');
</script>
</head>
<body>
<div id="embed" style="height: 400px; width: 660px; "></div>
</body>
</html>
Wykres, który z tego wynika, jest poniżej:

Wariant 2: Zaembedowany miniwykres ustawiony na cenę złota w funtach szterlingach za uncję w ramach czasowych jednego dnia, o rozmiarach 170x105px.
<html>
<head>
<script type="text/javascript" src="https://zloto.bullionvault.pl/chart/bullionvaultchart.js" ></script>
<script type="text/javascript" >
var options = {
bullion: 'gold',
currency: 'GBP',
timeframe: '1d',
chartType: 'line',
miniChartModeAxis : 'oz',
referrerID: 'MYUSERNAME',
containerDefinedSize: true,
miniChartMode: true,
displayLatestPriceLine: true,
switchBullion: true,
switchCurrency: true,
switchTimeframe: true,
switchChartType: false,
exportButton: true
};
var chartBV = new BullionVaultChart(options, 'embed');
</script>
</head>
<body>
<div id="embed" style="height: 105px; width: 170px; "></div>
</body>
</html>
Wynikający z niego wykres znajduje się poniżej:
