1   2   3   4   5   6 

Google Chart API — prosty sposób umieszczania wykresów na stronach WWW

5. Kodowanie danych

Dane do wykresu mogą być zakodowane na jeden z czterech sposobów nazywanych:

W kodowaniu tekstowym wymieniamy wartości oddzielając je przecinkami. Dopuszczalnymi wartościami są liczby od 0 do 100. Do podziału danych na kilka serii stosujemy znak |:

chd=t:10.0,58.0,95.0|30.0,8.0,63.0

Kodowanie tekstowe ze skalowaniem pozwala podać minimalne i maksymalne wartości w ciągach danych. Dane zakodowane tekstowo (parametr chd=t:) rozszerzamy o parametr chds, który podaje minimalną wartość w ciągu (w przykładzie: -80) oraz wartość maksymalną (w przykładzie: 140):

chd=t:30,-60,110&chds=-80,140

Obliczamy długość przedziału 140 * 80 = 220, a następnie skalujemy podane wartości:

 30:   30+80 = 110,  110/220 * 100 = 50
-60:  -60+80 =  20,   20/220 * 100 =  9
110:  110+80 = 190,  190/220 * 100 = 86

Zatem podany ciąg możemy przedstawić jako kodowanie tekstowe bez skalowania:

chd=t:50,9,86

W kodowaniu prostym do zapisu wartości liczbowych stosujemy duże i małe litery alfabetu łacińskiego oraz cyfry. Duże litery to wartości od 0 do 25 (A=0, B=1, C=2, ..., Z=25), małe litery kodują liczby od 26 do 51 (a=26, b=27, c=28, ..., z=51), zaś cyfry reprezentują wartości od 52 do 61 (0=52, 1=53, 2=54, ..., 9=61). Najmniejszą liczbą w tym ciągu jest 0, a największą — 61.

Wartość ATB19:

chd=s:ATb19

reprezentuje ciąg 0 (A), 19 (T), 27 (b), 53 (1), 61 (9). Po przeliczeniu:

 0/61 * 100 = 0
19/61 * 100 = 31
27/61 * 100 = 44
53/61 * 100 = 87
61/61 * 100 = 100

otrzymamy następujący kod tekstowy:

chd=t:0,31,44,87,100

W przypadku kodowania prostego serie danych oddzielamy znakiem przecinka, np.:

chd=s:ATb19,Mn5tz 

Ostatni rodzaj kodowania, kodowanie rozszerzone, do reprezentacji wartości liczbowych wykorzystuje dwuznakowe kombinacje liter, cyfr oraz znaków kropki, przecinka, dywizu i podkreślenia. Oto, w jaki sposób kombinacje znaków odpowiadają wartościom liczbowym:

AA =  0,  AB =  1,  ...  AZ = 25,
Aa = 26,  Ab = 27,  ...  Az = 51,
A0 = 52,  A1 = 53,  ...  A9 = 61
A- = 62   A. = 63

BA =  64,  BB =  65,  ... 

...

Wartością najmniejszą jest AA (0), a największą .. (4095). Wartości te przeliczamy podobnie jak kodowanie proste, tym razem jednak liczby dzielimy przez 4095.

Parametr:

chd=e:C99AKA

reprezentuje ciąg wartości 189 (C9), 3904 (9A), 640 (KA). Po przeliczeniu:

189/4095 * 100 = 5
3904/4095 * 100 = 95
640/4095 * 100 = 16

ten sam ciąg możemy zakodować tekstowo:

chd=t:5,95,16

Do konwersji danych liczbowych na kodowanie proste można wykorzystać funkcję simpleEncode() przedstawioną na listingu 1. Sposób konwersji tablicy wartości do kodowania prostego, wykorzystujący funkcję simpleEncode() oraz bibliotekę jQuery został przedstawiony na listingu 2.

var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
function simpleEncode(valueArray, maxValue) {

var chartData = ['s:'];
  for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
    }
      else {
      chartData.push('_');
      }
  }
return chartData.join('');
}

Listing 1. Funkcja simpleEncode()

<head>
  <script type="text/javascript">
  var valueArray = new Array(0,1,4,43,59,65);
  var maxValue = 70; 
  var kod = simpleEncode(valueArray,maxValue);    
  var url = 'http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=' + kod;
    
  $(document).ready(function(){
    $('img').attr('src', url);
  });
  </script>
</head>    

<body>
  <p>
    <img src="" alt="" />
  </p>
</body>

Listing 2. Konwersja tablicy wartości do kodu prostego

 1   2   3   4   5   6