nsinnovations/fusionpbx
2
0
Fork 0
mirror of https://github.com/fusionpbx/fusionpbx.git synced 2026-01-06 11:43:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace old chart with Chartjs (#6094)

Browse Source
This commit is contained in:
AlexC
2021-11-04 10:22:14 -06:00
committed by GitHub
parent ff60086480
commit 42cf0b7068
1 changed files with 102 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
app/xml_cdr/xml_cdr_statistics.php
View File

@@ -154,107 +154,117 @@
echo "<br /><br />\n"; echo "<br /><br />\n";
?> ?>
<script src='/resources/chartjs/chart.min.js'></script>
<script src='/resources/chartjs/chartjs-adapter-date-fns.bundle.min.js'></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="<?php echo PROJECT_PATH; ?>/resources/jquery/flot/excanvas.min.js"></script><![endif]--> <div align='center' style="justify-content: center;">
<script language="javascript" type="text/javascript" src="<?php echo PROJECT_PATH; ?>/resources/jquery/flot/jquery.flot.js"></script> <div style="max-width: 100%; width: 800px; height: 280px;">
<script language="javascript" type="text/javascript" src="<?php echo PROJECT_PATH; ?>/resources/jquery/flot/jquery.flot.time.js"></script> <canvas id="cdr_stats_chart" style="width: 100%; height: 100%;"></canvas>
<div align='center'> </div>
<table>
<tr>
<td align='left' colspan='2'>
<div id="placeholder-legend" style="padding:2px;margin-bottom: 8px;border-radius: 3px 3px 3px 3px;border: 1px solid #E6E6E6;display: inline-block;margin: 0 auto;"></div>
</td>
</tr>
<tr>
<td align='left'>
<div id="placeholder" style="width:700px;height:180px;margin-right:25px;"></div>
</td>
<td align='left' valign='top'>
<p id="choices"></p>
</td>
</tr>
</table>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(function () { var ctx = document.getElementById("cdr_stats_chart").getContext('2d');
var datasets = {
"volume": { const cdr_stats_data = {
label: "Volume", datasets: [
data: <?php echo json_encode($graph['volume']); ?> {
}, label: "Volume",
"minutes": { data: <?php echo json_encode($graph['volume']); ?>,
label: "Minutes", backgroundColor: "#EDC240",
data: <?php echo json_encode($graph['minutes']); ?> borderColor: "#EDC240",
}, fill: false
"call_per_min": { },
label: "Calls Per Min", {
data: <?php echo json_encode($graph['call_per_min']); ?> label: "Minutes",
}, data: <?php echo json_encode($graph['minutes']); ?>,
"missed": { backgroundColor: "#AFD8F8",
label: "Missed", borderColor: "#AFD8F8",
data: <?php echo json_encode($graph['missed']); ?> fill: false
}, },
"asr": { {
label: "ASR", label: "Calls Per Min",
data: <?php echo json_encode($graph['asr']); ?> data: <?php echo json_encode($graph['call_per_min']); ?>,
}, backgroundColor: "#CB4B4B",
"aloc": { borderColor: "#CB4B4B",
label: "ALOC", fill: false
data: <?php echo json_encode($graph['aloc']); ?> },
}, {
label: "Missed",
data: <?php echo json_encode($graph['missed']); ?>,
backgroundColor: "#4DA74D",
borderColor: "#4DA74D",
fill: false
},
{
label: "ASR",
data: <?php echo json_encode($graph['asr']); ?>,
backgroundColor: "#9440ED",
borderColor: "#9440ED",
fill: false
},
{
label: "ALOC",
data: <?php echo json_encode($graph['aloc']); ?>,
backgroundColor: "#BD9B33",
borderColor: "#BD9B33",
fill: false
}
]
}; };
// hard-code color indices to prevent them from shifting as const cdr_stats_config = {
// countries are turned on/off type: 'line',
var i = 0; data: cdr_stats_data,
$.each(datasets, function(key, val) { options: {
val.color = i; responsive: true,
++i; maintainAspectRatio: false,
}); plugins: {
legend: {
// insert checkboxes display: true,
var choiceContainer = $("#choices"); labels: {
$.each(datasets, function(key, val) { usePointStyle: true,
choiceContainer.append('<br /><span style="white-space: nowrap;"><input type="checkbox" name="' + key + pointStyle: 'rect',
'" checked="checked" id="id' + key + '">&nbsp;' + color: '#444',
'<label for="id' + key + '">' boxWidth: 15
+ val.label + '</label></span>'); }
}); }
choiceContainer.find("input").on('click', plotAccordingToChoices); },
scales: {
function plotAccordingToChoices() { x: {
var data = []; type: "time",
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
});
if (data.length > 0)
$.plot($("#placeholder"), data, {
legend:{
show: true,
noColumns: 10,
container: $("#placeholder-legend"),
placement: 'outsideGrid',
}, },
yaxis: { min: 0 }, y: {
<?php min: 0
if ($hours <= 48) {
echo "xaxis: {mode: \"time\",timeformat: \"%d:%H\",minTickSize: [1, \"hour\"]}";
} }
else if ($hours > 48 && $hours < 168) { },
echo "xaxis: {mode: \"time\",timeformat: \"%m:%d\",minTickSize: [1, \"day\"]}"; elements: {
line: {
tension: 0.3
} }
else { }
echo "xaxis: {mode: \"time\",timeformat: \"%m:%d\",minTickSize: [1, \"month\"]}"; },
scales: {
<?php
if ($hours <= 48) {
echo "xAxes: {type: \"time\",timeFormat: \"%d:%H\",minTickSize: [1, \"hour\"]}";
}
else if ($hours > 48 && $hours < 168) {
echo "xAxes: {type: \"time\",timeFormat: \"%m:%d\",minTickSize: [1, \"day\"]}";
}
else {
echo "xAxes: {type: \"time\",timeFormat: \"%m:%d\",minTickSize: [1, \"month\"]}";
}
?>,
yAxes: [{
ticks: {
beginAtZero: true
} }
?> }]
}); }
} };
plotAccordingToChoices(); const cdr_stats_chart = new Chart(ctx, cdr_stats_config);
});
</script> </script>
<?php <?php
@@ -326,4 +336,4 @@
//include the footer //include the footer
require_once "resources/footer.php"; require_once "resources/footer.php";
?> ?>