Do you know that
Google Code provides a lot of APIs to do very cool stuff. In this blog, I am going to show you how you can dynamically embed chart in your webpage using
Google Chart.
In my previous blog I wrote an AWK program to summarise the HTTP status codes and tabluated the result. Now I am modifying my program to output the source http in the <img> tag to dynamically generate the HTTP status chart. First colour used is green (00ff00) represents HTTP code 200, blue represents 302 and red represent 304. Look under the query string name value pair, "chco".
This is the modified AWK program
#! /bin/bash
if [ $# -ne 1 ]; then
echo "Usage: $0 <access_log>"
exit 1
fi
log=$1
if [ ! -f "$log" ]; then
echo "Error. $log does not exist"
exit 2
fi
file $log | grep "gzip compressed data" > /dev/null 2>&1
if [ $? -eq 0 ]; then
cmd="zcat"
else
cmd="cat"
fi
echo -n "<img src=\"http://chart.apis.google.com/chart?"
# chart type: bvs - bar vertical
echo -n "cht=bvs&"
# chart colours
echo -n "chco=00ff00,0000ff,ff0000,00ffff,ff00ff,ffff00,008800,000088,880000&"
# chart title
echo -n "chtt=HTTP+Status+Code&"
# chart size
echo -n "chs=600x200&"
# bar width
echo -n "chbh=12&"
$cmd $log | gawk '
function chd()
{
printf("chd=t:")
for ( c=1 ; c<=nc ; ++c ) {
for ( d=1 ; d<=nd ; ++d ) {
printf("%d", a_cd[a_date[d],a_code[c]])
if ( d<nd ) {
printf(",")
} else {
if ( c!=nc ) {
printf("|")
}
}
}
}
printf("&")
}
function chxl() {
# find max total per date
max=0
for ( d=1 ; d<=nd ; ++d ) {
total=0
for ( c=1 ; c<=nc ; ++c ) {
total+=a_cd[a_date[d],a_code[c]]
}
if ( total>max ) {
max=total
}
}
# per 10,000
m10k=int(max/10000)+1
printf("chxl=0:|")
for ( d=1 ; d<=nd ; ++d ) {
split(a_date[d],x,"/")
printf("%s|", x[1])
}
printf("1:|")
for ( m=0 ; m<=m10k ; ++m ) {
printf("%d|", m*10000)
}
printf("&")
# chart axis 0=x, 1=y
printf("chxt=x,y&")
# data scaling
printf("chds=0,%d&",m10k*10000)
}
$(NF-1)>=100 && $(NF-1)<=505 {
date=substr($4,2,11)
code=$(NF-1)
a_code[code]=code
a_date[date]=date
a_cd[date,code]++
}
END {
nc=asort(a_code)
nd=asort(a_date)
chd()
chxl()
}'
echo -n "\">"
And the output is:
(I introduced line-break for ease of reading)
<img src="http://chart.apis.google.com/chart?cht=bvs&chco=00ff00,0000ff,ff0000,00ffff,ff00ff,ffff00,008800,000088,880000&
chtt=HTTP+Status+Code&chs=600x200&chbh=12&chd=t:22038,30732,31988,23525,21865,29891,30866,32001,33043,34076,23703,21811,
30458,32659,34758,32477,33215,23717,21947,33129,32149,34153,32234,34076,23917,22046,32851,36528,36627,33731,20741|8,499,
529,81,1,184,370,608,586,438,63,17,341,348,539,457,406,90,0,378,493,477,312,533,98,0,329,447,664,522,213|290,11427,11718,
2199,246,7874,10107,12380,14069,12374,2604,393,7867,10302,13515,13728,10919,1275,42,11618,14163,13045,10560,12402,1724,6,
12652,14036,14179,10825,6473|0,0,0,0,1,2,4,1,0,0,0,0,1,0,2,0,0,0,0,0,0,1,0,10,0,0,0,0,0,0,0|2,14,14,3,0,0,11,24,42,28,0,1,
18,9,15,22,15,0,0,15,8,9,5,12,4,0,17,6,9,8,12|0,10,6,2,1,5,8,22,11,14,1,1,12,11,13,11,8,3,0,24,18,9,6,4,2,1,8,8,18,10,6|
0,100,203,1,0,60,23,67,151,128,5,3,89,65,79,924,75,80,54,102,78,82,77,70,106,46,58,83,97,87,55&chxl=0:|01|02|03|04|05|06|
07|08|09|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|1:|0|10000|20000|30000|40000|50000|60000|&
chxt=x,y&chds=0,60000&">
And the dynamic chart is shown below (actually generated by Google, not a static image):
Labels: awk, shell script
