Scopo dello script
Quello che voglio proporVi in questa pagina è una modalità per generare dei veri e propri grafici in tempo reale, utilizzando Active Server Pages.
Cosa occorre per la realizzazione
Per realizzare questo script occorre un'immagine su cui lavorare e delle voci su cui realizzare il grafico. Ho da fare una nota sulla scelta dell'immagine che ho usato per la realizzazione di questo script. L'immagine ha una dimensione di un pixel per un pixel. Grazie alla sua ridottissima dimensione (quella minima consentita per far esistere tale immagine) si ottiene un caricamento della stessa molto veloce. Infatti il suo peso e di solo 43 byte.
Riflessione
A questo punto sorge del tutto spontanea ( e anche corretta ) una domanda : "ma con un'immagine così piccola, come sarà possibile effettuare il grafico ? Si vedrà ? " Certamente ! Poichè il grafico viene elaborato dinamicamente, non possiamo mai sapere in fase di realizzazione dello script quant'è il valore da rappresentare. È appunto per questo motivo che si utilizza un'immagine di dimensioni molto ridotte. Sarà infatti sulle sue proprietà che andremo a "giocare" per effettuare la barra. Ripassiamo innanzitutto le proprietà dell'immagine : nome , altezza e lunghezza. Formulando queste tre proprietà nel linguaggio del web otteniamo:
<img src="nome_immagine.gif" width="20" height="20">
Nel nostro caso, il nome dell'immagine sarà barra.gif, width verrà deciso di volta in volta ( lo spiegherò dopo unitamente allo script ) e height sarà 5 ( valore personalizzabile senza nessun problema )
Codice script
<%
function disegna_grafico(descrizione,valore)
response.write("<tr>")
response.write("<td width=200>")
response.write("<center>"&descrizione&"</center>")
response.write("</td>")
response.write("<td>")
response.write("<img src=barra.gif height=5 width="&valore&">")
response.write("</td>")
response.write("<td width=150>")
response.write("<center>"&valore&"</center>")
response.write("</td>")
response.write("</tr>")
end function
%>
<html>
<head>
<title>Generazione Dinamica Grafici</title>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td valign="middle">
<center>
<table>
<%
call disegna_grafico("riga1","20")
call disegna_grafico("riga2","40")
call disegna_grafico("riga3","60")
call disegna_grafico("riga4","80")
call disegna_grafico("riga5","100")
%>
</table>
<br>
Script offerto da : <font size="2"><a href="http://www.innovatel.it"
target="_blank"><b>Tele-Com Service S.n.c.</b></a></fotn>
</center>
</td>
</tr>
</table>
</body>
</html>
Spiegazione script
La maggior parte del lavoro di questo script viene eseguito dalla function disegna_grafico(descrizione,valore) : essa ci permette di disegnare il grafico ogni volta che lo desideriamo. Infatti per ogni colonnina desiderata, basterà chiamare la funzione con la stringa disegna_grafico(descrizione,valore) [ es. call disegna_grafico("riga1","20") ] ed essa verrà eseguita. Adesso illustriamo il suo interno. Internamente viene creata una riga con tre colonne. La prima contiene la descrizione, la seconda la barra del grafico e la
terza il suo valore reale.
Cosa otterremo?
Dopo l'elaborazione delle parti di pagina scritte tramite Active Server Page, il Server invierà al browser dell'utente finale del codice html "puro". Dopo che anche quest'ultimo verrà elaborato, otterremo a video la seguente visione:
