HTTP Status Codes Summary, The Google Chart Way

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):