Data visualisation of user agent statistics

In my earlier post I shared the code to collect the website visitors’ device technical specifications. That data is a very helpful in web design as it allows us to target most popular screen sizes, browser types, devices etc, allowing majority of visitors to have best possible user experience without going for a complex and time-consuming responsive layouts.

Today I am posting a code that creates a simple info-graphic visualising most important data – device type, browser, screen size and resolution.

Once you have your MySQL database up and running for some time (I think around 20–30k views should be a reasonable amount), we need to make sense from a raw data collected.

I created those simple queries and php loops to filter and organise the data and then employed Google Charts to do the visualisation work.

All you need to do is create an empty php document, copy and paste the code below.


= 2 ):
$chart_data['x2 + (retina display)'] = $chart_data['x2 + (retina display)'] + $item[1];
break;
case( $item[0] >= 1.5 ):
$chart_data['x1.5 - x2'] = $chart_data['x1.5 - x2'] + $item[1];
break;
case( $item[0] > 1 ):
$chart_data['x1 - x1.5'] = $chart_data['x1 - x1.5'] + $item[1];
break;
default:
$chart_data['x1 (standard display)'] = $chart_data['x1 (standard display)'] + $item[1];
}
}

$chart_str4 ='';
foreach ($chart_data as $key => $value) {
$chart_str4 .= "['". $key . "'," . $value . "],";
}

// / / / / / / / / / / / / / / / / / /

// Screen pixel size (resolution)

// / / / / / / / / / / / / / / / / / /

unset( $arr );
unset( $chart_data );

$query_3 = mysqli_query($conn,"
SELECT width,COUNT(*)
AS count
FROM hitdata
WHERE address_ip NOT
IN (
".$ignore_ip."
)
GROUP BY width
ORDER BY width ASC
");

while($row = mysqli_fetch_array($query_3)) {
$arr['w'][] = array( $row['width'], $row['count'] );
}

$query_4 = mysqli_query($conn,"
SELECT height,COUNT(*)
AS count
FROM hitdata
WHERE address_ip NOT
IN (
".$ignore_ip."
)
GROUP BY height
ORDER BY height ASC
");

while($row = mysqli_fetch_array($query_4)) {
$arr['h'][] = array( $row['height'], $row['count'] );
}

$min = 250;
$max = 2000;
$incr = 15; // increase to have a rougher graph (some values might cause Google Charts to crash, experiment)

$i = $min;
foreach ($arr['w'] as $item) {
if ( $item[0] < $min ) continue; if ( $item[0] > $i ) $i = $i + $incr;
if ( $item[0] > $max ) break;
$chart_data[$i]['w'] = $chart_data[$i]['w'] + $item[1];
}

$i = $min;
foreach ($arr['h'] as $item) {
if ( $item[0] < $min ) continue; if ( $item[0] > $i ) $i = $i + $incr;
if ( $item[0] > $max ) break;
$chart_data[$i]['h'] = $chart_data[$i]['h'] + $item[1];
}

foreach( $chart_data as $size => $count ){
$chart_str7 .= "['". $size . "'," . $count['w'] . "," . $count['h'] . "],";
}

?>




website visitors user-agent statistics

your ip: