Google Analytics подобни Sparkline Charts

Sparklines са вид информационни графики, характеризиращи се с малкият си размер и плътност на данните или както Edward Tufte описва в своята книга  Beautiful Evidence (2006)
малки по размер с висока резолюция графики поставени в контекста на думи, числа, картинки
За един от нашите проекти ние решихме да използваме Sparklines и желанието ни бе те да са със същата визия като тези в Google Analitycs.
След като разгледахме всички параметри предоставени от Google Chart API стигнахме до извода, че има някой недокументирани параметри и най-важният за нас в случая  е cht=lfi. Това е така нареченият financial line chart. Благодарение на него x и y координатите остават скрити, т.е. не се изрисуват.
Нека сега да разгледаме и резултата който искаме да получим:

Sparkline Example


http://chart.apis.google.com/chart?cht=lfi&chs=75x18&chco=0077CC&chm=B,E6F2FA,0,1,0&chd=s:AAAAAFGBXTAAAAAAAAAAOXPSMI9QJ

Където:
chs=75x18 е размера на графиката в пиксели
chco=0077CC е цвета на линията на графиката в RRGGBB формат
chm=B,E6F2FA,0,1,0 това е параметъра описващ запълването на графиката. B означава - запълни цялото пространство под линията
chd=s:..... е определител за елементарно енкодване на данните
По-подробно описанието на Всеки един от параметрите може да намерите, като разгледате Google Chart API.

За нашите цели създадохме специална PHP функция която да извършва нужното ни енкодване на данните:


function simpleEncode($valueArray,$maxValue) 
{
    $simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    
    $chartData = array ();
    for ($i = 0; $i < count($valueArray); $i++) {
       $currentValue = $valueArray[$i];
       if ($currentValue >= 0 && !is_null($currentValue)) { 
           array_push($chartData, $simpleEncoding{round(((strlen($simpleEncoding)-1) * $currentValue /$maxValue))});
       }
       else 
       {
           array_push($chartData, '_');
       }
    }
  
  return join('',$chartData);
}


Тази фукция извършва, т.н. Simple encoding, при който се използват букви и цифри за представяне на данните(A - Z, a - z и 0 - 9), където A представя 0, B представя 1 и така нататък до числото 9 което представя 61. Този тип енкодване на данните дава като резултат сравнително кратък запис от символи.

Сега нека свържем нещата заедно


function src_minPreview($data)
{
    $max = max($data);
    $code = simpleEncode($data,$max);
    $link = "http://chart.apis.google.com/chart?cht=lfi&chs=75x18&chco=0077CC&chm=B,E6F2FA,0,1,0&chd=s:".$code;
    
    return $link;
}
$data = array(0,0,0,0,0,24,34,4,124,100,0,0,0,0,0,0,0,0,0,0,74,120,82,95,66,44,323,85,47);

echo "<img src='".src_minPreview($data)."' />";



Търсене в статиите

Loading

Блог категории

  1. SEO ( 3 )

  2. Фирмена идентичност ( 1 )

  3. Достъпност ( 1 )

  4. Програмиране ( 3 )