<docere>

Accesând link-ul SitSco de pe coloana din dreapta, se pot sesiza diverse completări ale aplicaţiei, între care şi reprezentarea grafică a unor statistici asupra mediilor. Diagramele respective sunt "realizate" invocând un serviciu-web oferit de Google, anume Google Chart.

Google Chart API răspunde la un URL corespunzător, returnând o imagine în format PNG. În URL trebuie specificate: dimensiunea imaginii, tipul diagramei şi datele necesare (alte atribute sunt opţionale: culori, etichete, titlu, etc.).

Identificatorii prevăzuţi pentru atribute încep de obicei cu ch (de la "chart"); astfel, chs=300x100 identifică "size" (dimensiune), asignând 300 pixels pentru width (lăţime) şi 100 pentru height (înălţime); chd=t:20,30,40,10 identifică datele de construcţie a diagramei, specificând ca tip de codificare a acestora text: valori numerice pozitive între 0.0 şi 100.0 ("floating point"), separate prin virgulă; cht=p specifică tipul diagramei (p pentru "pie", adică diagramă circulară obişnuită; p3 pentru diagramă circulară "3D"; v pentru diagramă Venn; etc.).

URL-ul poate fi transmis şi din bara de adresă a browserului (selectaţi de aici, Copy, Paste în bara de adresă):
           http://chart.apis.google.com/chart?chs=400x150&chd=t:20,30,40,10&cht=p3
unde ?chs=... indică parametrii cererii, separaţi prin & (formula obişnuită pentru QUERY STRING).

Dar mai obişnuit este ca diagrama returnată să fie inclusă într-un document HTML existent; în acest scop, URL-ul necesar trebuie specificat în atributul src (de la "source") al unui element <img> (de la "image").

Pentru un exemplu concret, fie A mulţimea elevilor care au 10, fie B mulţimea elevilor care au 10 la Matematică şi C - a acelora care au 10 la Informatică; să zicem că ştim |A| = 100, |B| = 20, |C| = 40 şi |A∩B| = 10, |A∩C| = 20, |B∩C| = 15, iar |A∩B∩C| = 5. Putem obţine diagrama Venn corespunzătoare prin:

<img src="http://chart.apis.google.com/chart?cht=v&amp;chd=t:100,20,40,10,20,15,5&amp;chs=200x100&amp;chdl=A|B|C" />
(se recomandă ca în <img> să se folosească "referinţa" &amp; şi nu direct caracterul &; parametrul chdl specifică "legenda")

Să presupunem că s-a apelat funcţia med_gen() (vezi II - realizarea aplicaţiei), obţinând tabelul cu ID = "situatie", conţinând elevii şi mediile generale corespunzătoare. Următoarea funcţie (apelată fie din med_gen() în final, fie prin intermediul unui <button> corespunzător) obţine o reprezentare grafică a situaţiei mediilor pe grupe de valori.

to_chart = function(dest) {
   var dest = document.getElementById(dest); // dest.innerHTML = '';
   var size = '400x150';
   var gourl = 'http://chart.apis.google.com/chart?cht=p3&chs=' + size + '&chd=t:';
   var labels = ['5-6', '6-7', '7-8', '8-9', '9-10']; 
   var data = [0, 0, 0, 0, 0]; // nr. medii 5-6, 6-7, 7-8, 8-9, repectiv 9-10

   var t = document.getElementById('situatie');
   var tds = t.getElementsByTagName('tbody')[0].getElementsByTagName('td');
   var i;
   for(i = 0; tds[i]; i += 2) {
      media = tds[i+1].innerHTML; // ca şir de caractere
      switch(media.charAt(0)) { // contorizează nr. medii, funcţie de "prima cifră"
         case '5': data[0]++; break;  // nr. medii 5-6 (încep cu cifra '5')
         case '6': data[1]++; break;
         case '7': data[2]++; break;
         case '8': data[3]++; break;
         case '9': data[4]++; break;
         case '1': data[4]++; break;  // dacă începe cu '1'... n-o fi media 1, ci 10
      }
   }

   for(i = 0; i < 5; i++) labels[i] += ' (' + data[i] + ')'; 

   var chart = document.createElement('img');
   chart.setAttribute('src', gourl + data.join(',') + '&chl=' + labels.join('|'));
   chart.setAttribute('alt', 'diagrama');
   
   dest.appendChild(chart);
}

În variabila tds se obţine tabloul tuturor elementelor <td> din <tbody>, în ordinea în care apar acestea în tabel; fiecare al doilea <td> conţine o medie, iar switch(media.charAt(0)) "repartizează" media în funcţia de prima cifră a ei, într-una dintre grupele 5-6, 6-7, etc. (instrucţiunea switch are sintaxa şi semantica obişnuite în C şi în alte limbaje). În final, se creează elementul <img>, se setează corespunzător atributele necesare şi se înscrie în DOM (drept "child" al elementului "dest" primit ca parametru iniţial).