Tramite questo web tools a differenza del widget normale che elenca gli ultimi aggiornamenti in una tabellina personalizzabile è possibile visualizzare sul proprio sito web o blog un prospetto grafico per quanto riguarda le serie storiche collegate all’indice selezionato. Una volta visualizzato il grafico si potrà anche accedere al foglio elettronico della serie storica in formato google docs, molto utile per una consultazione rapida ma anche utile per scaricare e convertire automaticamente la serie storica in differenti formati come PDF, Open Office e Microsoft Excel.
Per i più esigenti sono state previste delle variabili di personalizzazione che permettono una maggiore integrazione con il layout del proprio sito, come ad esempio grandezze e colori. In ogni caso consiglio sempre di usare un aspetto molto semplice, in quanto risulta il preferito dalla maggioranza dei visitatori. Iniziamo con l’inserimento più semplice, avete uno spazio sul vostro sito dove volete pubblicare il widget Euribor/Eurirs con Grafico? Prendete il codice sottostante e inseritelo nella pagina HTML nel punto in cui volete che questo sia posizionato, il widget per default avrà una altezza di 400(px) e una larghezza di 600(px):
<script type="text/javascript" src="http://startbyzero.com/static/finance/graphs/widget.js"></script>
Una volta inserito il codice vi dovrebbe apparire il widget nella forma che vedete nell’immagine allegata a seguire. Infatti il widget per default visualizza il grafico Euribor per tutto lo storico dati disponibile, ma volendo, tramite le varie opzioni che trovate in fondo alla documentazione, potete ottenere un grafico di un’indice differente e personalizzare tutti i colori che riguardano le sezioni del grafico, sempre tramite le opzioni potete cambiare anche le dimensioni del grafico.
Widget Euribor/Eurirs – esempi di personalizzazione
==> SE VOLETE SVILUPPARE IL CODICE DA SOLI ANDATE SU AMCHARTS.COM
Adesso vediamo come possiamo selezionare un solo indice da visualizzare ad esempio supponiamo che ci interessa solo il grafico EURIRS, solo l’anno 2011 e con qualche colore diverso. In questo caso dovremo aggiungere un blocco di codice con la definizione delle opzioni che vogliamo cambiare nel nostro caso ci interessa l’opzione (sz_graph) che possiamo impostare ad euribor, eurirs, euribor-vs-eurirs, eurirs-vs-euribor, e l’opzione (sz_year) = 2011.
<script type="text/javascript"><!-- sz_graph = "eurirs"; sz_width = "600"; sz_year = "2011"; sz_back_label = "4b9af3"; sz_back_label_s = "b1d3f9"; sz_color_label = "ffffff"; sz_color_graph = "4b9af3"; sz_color_legend = "4b9af3"; sz_color_label_s = "4b9af3"; //--> </script> <script type="text/javascript" src="http://startbyzero.com/static/finance/graphs/widget.js"></script>
Per sapere tutti i parametri e opzioni di configurazione disponibili basta vedere la tabella riepilogativa qui di seguito. Notate che tutti i valori che dovranno essere specificati per le varie opzioni devo essere indicati come stringa quindi opzione = valore dove valore è sempre specificato tra doppi apici. Altrimenti l’opzione non viene considerata e viene impostato il valore di default.
Parametri di personalizzazione widget
| Descrizione | Opzione | Default | Valori ammessi |
|---|---|---|---|
| Tipo grafico | sz_graph | euribor |
euribor, eurirs, bce,
euribor-vs-eurirs,
eurirs-vs-euribor
|
| Larghezza | sz_width | 600 | valore px (da 220 a 900) |
| Altezza | sz_height | 400 | valore px (da 200 a 700) |
| Anno di selezione | sz_year | all | all o anno di riferimento |
| Link a spreadsheet | sz_link_table | yes | yes, no (width<420 = no) |
| Selezione per date | sz_range_date | yes | yes, no (width<400 = no) |
| Selezione periodo | sz_period_select | yes | yes, no |
| Scroller su grafico | sz_scroller | yes | yes, no |
| Comparazione | sz_compare | yes | yes, no (width<300 = no) |
| Trend lines | sz_trend_lines | yes | yes, no |
| Colore testo | sz_color | a1a6a6 | valore RGB in ESA |
| Colore label | sz_color_label | sz_color | valore RGB in ESA |
| Colore label select | sz_color_label_s | sz_color_label | valore RGB in ESA |
| Colore legenda | sz_color_legend | sz_color | valore RGB in ESA |
| Colore grafico | sz_color_graph | 3366CC | valore RGB in ESA |
| Background | sz_back | ffffff | valore RGB in ESA |
| Background area | sz_back_area | sz_back | valore RGB in ESA |
| Background scroller | sz_back_scroll | sz_back | valore RGB in ESA |
| Background label | sz_back_label | ffffff | valore RGB in ESA |
| Background label sel | sz_back_label_s | dddddd | valore RGB in ESA |
