/******************************************************************************************
Copyright (c) 2016 Christopher W. Olsen <cwolsen@uBixStudios.com>
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this list of
conditions, the following disclaimer and the list of authors. Redistributions in binary
form must reproduce the above copyright notice, this list of conditions, the following
disclaimer and the list of authors in the documentation and/or other materials provided
with the distribution. Neither the name of the uBix Cube Project nor the names of its
contributors may be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
$Id: index.js 76 2015-11-25 03:10:10Z reddawg $
*****************************************************************************************/
var call_radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(179,181,198,0.2)",
strokeColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(255,99,132,0.2)",
strokeColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
var call_lineChartData = {
labels : ['No Data'],
datasets : [
{
label: "Total Calls",
fillColor : "rgba(180,210,222,0.2)",
strokeColor : "rgba(203,13,15,1)",
pointColor : "rgba(203,13,15,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [0]
},
{
label: "Outbound Calls",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(244,6,7,1)",
pointColor : "rgba(244,6,7,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [0]
},
{
label: "Inbound Calls",
fillColor : "rgba(51,87,25,0.2)",
strokeColor : "rgba(238,90,91,1)",
pointColor : "rgba(238,90,91,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [0]
}
]
}
var ytd_lineChartData = {
labels : ['No Data'],
datasets : [
{
label: "Total Calls",
fillColor : "rgba(180,210,222,0.2)",
strokeColor : "rgba(203,13,15,1)",
pointColor : "rgba(203,13,15,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [0]
},
{
label: "Outbound Calls",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(244,6,7,1)",
pointColor : "rgba(244,6,7,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [0]
},
{
label: "Inbound Calls",
fillColor : "rgba(51,87,25,0.2)",
strokeColor : "rgba(238,90,91,1)",
pointColor : "rgba(238,90,91,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [0]
}
]
}
var ext_options = {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li style=\"display:inline-block;padding-right:10px;\"><span style=\"background-color:<%=datasets[i].fillColor%>\">‣ <%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
}
var ext_ctx = $("#call_historyExt").get(0).getContext("2d");
var ext_chart = new Chart(ext_ctx).Radar(call_radarChartData, ext_options);
$("#call_historyExtLegend").html(ext_chart.generateLegend());
var call_options = {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li style=\"display:inline-block;padding-right:10px;\"><span style=\"background-color:<%=datasets[i].fillColor%>\">‣ <%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
}
/*
var call_ctx = $("#call_history").get(0).getContext("2d");
var call_chart = new Chart(call_ctx).Line(call_lineChartData, call_options);
$("#call_historyLegend").html(call_chart.generateLegend());
*/
var ytd_options = {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li style=\"display:inline-block;padding-right:10px;\"><span style=\"background-color:<%=datasets[i].fillColor%>\">‣ <%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
}
var ytd_ctx = $("#ytd_history").get(0).getContext("2d");
var ytd_chart = new Chart(ytd_ctx).Line(ytd_lineChartData, ytd_options);
$("#ytd_historyLegend").html(ytd_chart.generateLegend());
function populateCallHistory(data) {
/* This is Done */
call_radarChartData.labels = data.labels;
var i = 0;
for (var k in data.ext ) {
call_radarChartData.datasets[i] = {
label: "EXT " + k,
fillColor: "rgba(" + (i * 12) + "," + k + ",51,0.4)",
strokeColor: "rgba(" + k + "," + (i * 12) + ",51,1)",
data: data.ext[k].total_calls
};
//call_radarChartData.datasets[i].label = k;//data.ext[k].label;
//call_radarChartData.datasets[i].data = data.ext[k].total_calls;
i++;
}
ext_chart.destroy();
ext_chart = new Chart(ext_ctx).Radar(call_radarChartData, ext_options);
$("#call_historyExtLegend").html(ext_chart.generateLegend());
return;
call_lineChartData.labels = data.labels;
call_lineChartData.datasets[0].data = data.total_calls;
call_lineChartData.datasets[1].data = data.outbound_calls;
call_lineChartData.datasets[2].data = data.inbound_calls;
/* Redraw The Line Graph */
call_chart.destroy();
call_chart = new Chart(call_ctx).Line(call_lineChartData, call_options);
$("#call_historyLegend").html(call_chart.generateLegend());
}
function populateYTDHistory(data) {
ytd_lineChartData.labels = data.labels;
ytd_lineChartData.datasets[0].data = data.total_calls;
ytd_lineChartData.datasets[1].data = data.outbound_calls;
ytd_lineChartData.datasets[2].data = data.inbound_calls;
/* Redraw The Line Graph */
ytd_chart.destroy();
ytd_chart = new Chart(ytd_ctx).Line(ytd_lineChartData, ytd_options);
$("#ytd_historyLegend").html(ytd_chart.generateLegend());
}
function _start() {
_AJAX(
"/user/voip/breakdown_json.php",
"data[req]=call_history&data[days]=30",
function(data) {
populateCallHistory(data);
},
function(data) {
alert('There was a problem loading call data');
}
);
_AJAX(
"/user/voip/breakdown_json.php",
"data[req]=ytd_history",
function(data) {
populateYTDHistory(data);
},
function(data) {
alert('There was a problem loading call data');
}
);
}
Christopher W. Olsen