Come integrare il grafico di BullionVault sul tuo sito web
Questa pagina spiega come integrare il grafico di BullionVault in un sito web e elenca le opzioni di configurazione che si possono utilizzare per personalizzare il grafico. È anche possibile integrare il widget di BullionVault del prezzo di oro e argento. BullionVault si impegna a fornire un servizio accurato e affidabile, ma non garantisce la stabilità del grafico o dei widget del prezzo né l'accuratezza dei dati forniti.
Caricare la libreria del grafico
La libreria del grafico è scritta in javascript e ospitata nei server di BullionVault. Non è necessario scaricare la libreria su un altro server. Basta aggiungere le seguenti tag di script nella head della pagina nella quale si vuole integrare il grafico.
<!doctype html>
<head>
<script type="text/javascript" src="https://oro.bullionvault.it/chart/bullionvaultchart.js?v=1"></script>
</head>
Creare una istanza del grafico
Il grafico viene aggiunto chiamando il costruttore BullionVaultChart con due argomenti. Il primo argomento è un array associativo con opzioni di configurazione. Tutte le opzioni disponibili sono elencate in seguito. Il secondo argomento è l'ID dell'elemento DOM in cui il grafico deve essere integrato. Può essere un DIV o qualche altro elemento del blocco.
<div id="chartContainer" style="height: 300px; width: 500px;"></div>
<script type="text/javascript" >
var options = {bullion: 'gold'};
var chartBV = new BullionVaultChart(options, 'chartContainer');
</script>
Opzioni di inizializzazione del grafico
bullion | Seleziona il metallo da visualizzare. Si noti che se i bottoni per modificare il metallo da visualizzare sono indicati nel pannello dei bottoni (switchBullion), l'impostazione dell'utente contenuta in un cookie ha priorità rispetto a questa opzione. Valori accettati: 'gold', 'silver', 'platinum', 'palladium' |
currency | Seleziona la valuta da visualizzare. Si noti che se il menu a tendina per cambiare la valuta è visualizzato nel pannello dei bottoni (switchCurrency), l'impostazione dell'utente contenuta in un cookie ha priorità rispetto a questa opzione. Valori accettati: 'USD', 'GBP', 'EUR', 'JPY', 'AUD', 'CAD', 'CHF' |
timeframe | Seleziona il periodo di tempo da visualizzare, da 10 minuti a 20 anni. Si noti che se i bottoni per modificare il periodo di tempo sono visualizzati nel pannello dei bottoni (switchTimeframe), l'impostazione dell'utente contenuta in un cookie ha priorità rispetto a questa opzione. Valori accettati: '10m', '1h', '6h', '1d', '1w', '1m', '1q', '1y', '5y', '20y' |
chartType | Rappresenta la tipologia del grafico. Le tipologie supportate sono Linea e High-Low-Close. Si noti che se il menu a tendina per modificare la tipologia di grafico è visualizzato nel pannello dei bottoni (switchChartType), l'impostazione dell'utente contenuta in un cookie ha priorità rispetto a questa opzione. Valori accettati: 'line' or 'hlc' |
miniChartMode | Passa alla modalità “Minichart“, che supporta il grafico in dimensioni molto piccole, ma manca di alcune opzioni. Questa modalità è ideale per integrare il grafico nella colonna laterale di un sito web. Valori accettati: true oppure false |
miniChartModeAxis | Specifica quale asse delle ordinate (y) deve essere visualizzata in miniChartMode. Valori accettati: 'kg', 'oz' o 'both' |
referrerID | Chi partecipa al programma di affiliazione usa questo parametro per ricevere parte della commissione dei nuovi clienti inviati attraverso i link a BullionVault inseriti nel grafico. Valori accettati: Il nome utente BullionVault, per esempio 'MARIOROSSI01' |
containerDefinedSize | Controlla se la dimensione del grafico dovrebbe aggiustarsi all'elemento parente (il div che lo contiene) o se si aggiusterà alla finestra (o un iframe) e si ridimensionerà di conseguenza. Valori accettati: true oppure false |
displayLatestPriceLine | Mostra/nasconde la linea che indica l'ultimo prezzo e l'ora dell'ultimo aggiornamento. Valori accettati: true oppure false |
switchBullion | Mostra/nasconde i bottoni per modificare il metallo. Valori accettati: true oppure false |
switchCurrency | Mostra/nasconde il menu a tendina per modificare la valuta. Valori accettati: true oppure false |
switchTimeframe | Mostra/nasconde i bottoni per modificare il periodo di tempo. Valori accettati: true oppure false |
switchChartType | Mostra/nasconde il menu a tendina per modificare la tipologia di grafico. Valori accettati: true oppure false |
exportButton | Mostra/nasconde il bottone di esportazione che permette agli utenti di scaricare i dati del grafico in un file CSV. Valori accettati: true oppure false |
Note sulle opzioni
- Gli switch che accettano i valori suddetti NON sono case sensitive.
- Il referrerID deve essere il nome utente BullionVault. Per esempio, se il nome utente è MARIOROSSI01, lo stesso deve essere indicato come referrerID.
- Lo switch MiniChartModeAxis non viene accettato a meno che miniChartMode sia 'true'.
- Gli switch di controllo degli elementi (come switchBullion, switchCurrency, switchTimeframe, switchChartType e export) non vengono presi in considerazione se il grafico è in miniChartMode. Tutti gli elementi di controllo sono disattivati in questa modalità.
Esempi di utilizzo
Variante 1: Grafico normale impostato per oro in USD in KG e once, periodo di 1 settimana, modalità linea, dimensione 660x400px E tutti i controlli attivi.
<html>
<head>
<script type="text/javascript" src="https://oro.bullionvault.it/chart/bullionvaultchart.js" ></script>
<script type="text/javascript" >
var options = {
bullion: 'gold',
currency: 'USD',
timeframe: '1w',
chartType: 'line',
miniChartModeAxis : 'oz',
referrerID: 'MARIOROSSI01',
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>
Il grafico risultante è il seguente:

Variante 2: minigrafico integrato impostato per oro in GBP in once, periodo di tempo di un giorno, modalità linea e dimensioni 170x105px.
<html>
<head>
<script type="text/javascript" src="https://oro.bullionvault.it/chart/bullionvaultchart.js" ></script>
<script type="text/javascript" >
var options = {
bullion: 'gold',
currency: 'USD',
timeframe: '1w',
chartType: 'line',
miniChartModeAxis : 'oz',
referrerID: 'MARIOROSSI01',
containerDefinedSize: true,
miniChartMode: true,
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: 105px; width: 170px; "></div>
</body>
</html>
Il grafico risultante è il seguente:
