Asterisk Call Center Stats Compare Answered Unanswered Calls Example

Рассмотрим пример создания Column Chart и Table Chart для визуализации данных лога очереди Asterisk.
Для примера получим данные о принятых и пропущенных вызовах и произведем сравнение для каждой очереди в отдельности.

PHP

Т.к. пример для Asterisk Call Center Stats,
предполагается что мы имеем назначенные переменные с данными для очередей: $queue, диапазоном дат для выборки: $start и $end и $connection с данными для подключения mydql.

<?php
require_once "config.php";
include "sesvars.php";
//query answered
$q_ans = "SELECT queuename as col FROM $DBTable
WHERE time >= '$start' AND time <= '$end' AND event IN ('COMPLETECALLER', 'COMPLETEAGENT')
AND queuename IN ($queue)";
//query unanswered
$q_uns = "SELECT queuename as col FROM $DBTable
WHERE time >= '$start' AND time <= '$end' AND event IN ('ABANDON', 'EXITWITHTIMEOUT') AND queuename IN ($queue)";
 
function array_mesh() {
	$numargs = func_num_args();
	$arg_list = func_get_args();
	$out = array();
	for ($i = 0; $i < $numargs; $i++) {
		$in = $arg_list[$i];
		foreach ($in as $key => $value) {
			if (array_key_exists($key, $out)) {
				$sum = $in[$key] + $out[$key];
				$out[$key] = $sum;
			} else {
				$out[$key] = $in[$key];
			}
		}
	}
	return $out;
}
 
function array_min() {
	$numargs = func_num_args();
	$arg_list = func_get_args();
	$out = array();
	for ($i = 0; $i < $numargs; $i++) {
		$in = $arg_list[$i];
		foreach ($in as $key => $value) {
			if (array_key_exists($key, $out)) {
				$sum = $in[$key] - $out[$key];
				$out[$key] = $sum;
			} else {
				$out[$key] = $in[$key];
			}
		}
	}
	return $out;
}
 
function arr_cnt($res) {
	$out = array();
	$i = 0;
	foreach ($res as $key => $row) {
		$i = $i + 1;
		$count[$i] = $row['col'];
	}
	$out = array_count_values($count);
	return $out;
}
 
//queue
$ques = explode(',', $queue);
sort($ques, SORT_STRING);
foreach ($ques as $r => $v) {
	$ques2[] = trim($v, "'");
}
$qpattern = array_flip($ques2);
$qpattern2 = array_min($qpattern, $qpattern);
 
$resans = $connection->query($q_ans);
$queueans = arr_cnt($resans);
ksort($queueans, SORT_STRING);
$queueans = array_mesh($queueans, $qpattern2);
ksort($queueans, SORT_STRING);
 
$resuns = $connection->query($q_uns);
$queueuns = arr_cnt($resuns);
ksort($queueuns, SORT_STRING);
$queueuns = array_mesh($queueuns, $qpattern2);
ksort($queueuns, SORT_STRING);
 
$queueall = array_mesh($queueans, $queueuns);
ksort($queueall, SORT_STRING);
 
$head_q = array('Очереди', 'Всего', 'Отвеч.', 'Пропущ.');
 
$compare_column = array();
$compare_table = array();
$compare_column = array_map(null, $ques, $queueall, $queueans, $queueuns);
$compare_table = array_map(null, $ques, $queueall, $queueans, $queueuns);
 
array_unshift($compare_column, $head_q);
$percent = array();
foreach ($compare_table as $key => $val) {
	$que = $val[0];
	$percent[$que] = round($val[3] * 100 / ($val[1] + $val[3]), 2);
	$compare_per[] = array($val[0], $val[1], $val[2], $val[3], $percent[$que] . "%");
}
 
$resans->free();
$resuns->free();
$connection->close();
?>

HTML и Google JsApi

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Asterisk Call Center Stats</title>
      <style type="text/css" media="screen">@import "css/basic.css";</style>
      <style type="text/css" media="screen">@import "css/tab.css";</style>
      <style type="text/css" media="screen">@import "css/table.css";</style>
      <style type="text/css" media="screen">@import "css/fixed-all.css";</style>
      <style>tr.google-visualization-table-tr-head{background-color: #607D8B;}</style>
    <script type="text/javascript" src="js/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChartQueue);
 
      function drawChartQueue() {
        var data = google.visualization.arrayToDataTable(
         <?php print_r(json_encode($compare_column));?>
          );
 
        var options = {
          chart: {
            title: 'По очередям',
            subtitle: '<?php echo $start . " - " . $end ?>'
          },
            colors: ['#82E0AA', '#85C1E9', '#FCF3CF']
        };
 
        var chart = new google.charts.Bar(document.getElementById('columnchart_queue'));
 
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
 
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTableQueue);
 
      function drawTableQueue() {
 
        var options = {
          data: {
            allowHtml: true
          }
        };
 
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Очередь');
        data.addColumn('number', 'Всего');
        data.addColumn('number', 'Отвеч.');
        data.addColumn('number', 'Проп.');
        data.addColumn('string', 'Проц. проп.');
        data.addRows(
            <?php print_r(json_encode($compare_per));?>
          );
        var table = new google.visualization.Table(document.getElementById('tableQueue'));
 
        table.draw(data, {showRowNumber: true, width: '800px', height: '400px'});
      }
    </script>
</head>
<body>
<?php include "menu.php";?>
<div id="main">
    <div id="contents">
      <div id="columnchart_queue" style="width: 800px; height: 400px;"></div>
       <br/>
      <div id="tableQueue"></div>
      <br/>
    </div>
</div>
 
<div id='footer'><a href='https://asterisk-pbx.ru'>Asterisk-pbx.ru</a> 2018</div>
</body>
</html>

Получим такой симпатичный чарт и таблицу

compare_asterisk_call_center_stats

Только авторизованные участники могут оставлять комментарии.
  • blog/пример_визуализации_данных_лога_очереди_при_помощи_google_charts.txt
  • Последние изменения: 2018/09/28