Google Analytics подобни Sparkline Charts
Публикувано от Nick / Разгледано 1604 пъти / Програмиране / 27 Май 2009
Sparklines са вид информационни графики, характеризиращи се с малкият си размер и плътност на данните или както Edward Tufte описва в своята книга Beautiful Evidence (2006)
малки по размер с висока резолюция графики поставени в контекста на думи, числа, картинки
За един от нашите проекти ние решихме да използваме Sparklines и желанието ни бе те да са със същата визия като тези в Google Analitycs.
След като разгледахме всички параметри предоставени от Google Chart API стигнахме до извода, че има някой недокументирани параметри и най-важният за нас в случая е cht=lfi. Това е така нареченият financial line chart. Благодарение на него x и y координатите остават скрити, т.е. не се изрисуват.
Нека сега да разгледаме и резултата който искаме да получим:
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
