NBRed5.com - Red5 Analytics Demo - A brief overview and links to a demo of Red5 Analytics

Red Analytics Demo

Page 1, 2, 3, 4, 5

Google Visualization API

Although Open Flash Chart 2 was chosen for the majority of the charts it does not as yet contain any GEO Map charts, so for that I turned to the Google Visualization API.

A simple example is shown below:

<html>
<head>
  <script type='text/javascript' src='http://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addRows(6);
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Popularity');
      data.setValue(0, 0, 'Germany');
      data.setValue(0, 1, 200);
      data.setValue(1, 0, 'United States');
      data.setValue(1, 1, 300);
      data.setValue(2, 0, 'Brazil');
      data.setValue(2, 1, 400);
      data.setValue(3, 0, 'Canada');
      data.setValue(3, 1, 500);
      data.setValue(4, 0, 'France');
      data.setValue(4, 1, 600);
      data.setValue(5, 0, 'RU');
      data.setValue(5, 1, 700);

      var options = {};
      options['dataMode'] = 'regions';
	  options['width'] = '100%';
	  options['height'] = '250px';
	  
      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
  };
  </script>
</head>

<body>
  <div id='map_canvas'></div>
</body>

</html>

Google Charts API

Unlike Open Flash Chart 2 the Google Visualization API does not currently have the option to export the image of the chart. So for the GEO Map image I required for the PDF Reports I turned to the Google Chart API which was used to return an image of a GEO Map.

The Google Chart API was also used to easily produce the sparklines used in the application, an example shown below:

An example spark line

include './inc/analytics_api.php';

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

$email=xyz@abc.com;
$passwd=xxxxxx;
$id = 11212213;
$startdate = false;
$enddate = false;
//echo 'Not Logged In';
$api = new analytics_api();
if($api->login($email, stripslashes(base64_decode($passwd)))) {
	//echo 'Logged In';
   $results = $api->data($id, 'ga:date', 'ga:visits', 'ga:date', $startdate, $enddate, 100);
   foreach($results as $key => &$value){
		$visits_values[] = (int)$value["ga:visits"];
   }
   $url_visits = 'http://chart.apis.google.com/chart?cht=ls&chs=75x15&chco=3764A0&chls=1,1,0&chm=B,CCD6EC,0,0,0&chd='.simpleEncode($visits_values, max($visits_values) + 10);
}
<html>
	<head></head>
	<body>
		<img src=<?php echo $url_visits; ?> />
	</body>
</html>

Page 1, 2, 3, 4, 5

Links:

Red5 Analytics Demo

Ext 2.2.1 API

Ext JS Home

Ext JS Forums

Google Gears

Google Analytics Data Export API

Google Analytics API PHP Class

Open Flash Chart 2

Google Visualization API

Google Chart API

FPDF Library

Red Analytics Demo

Google Visualization API

Google Charts API

Links:

Bookmark with: