Dashboard was working in 1.4.1, then upgraded to 1.5.1 and dashboard graphs are blank now. Today upgraded to 1.6.0 - still no luck. Installed 1.6.0 from a scratch on another machine, which has PHP 5.3.1 - still dashboards are all blank. I believe there is some problem with JavaScript code?
Here is the generated code:
Code:
<td width="33%" valign="top" class="tableBodyRight">
<div class="dashbox">
<div class="dashtitle" >
CALLS INFO TODAY </div>
Total Calls : <font style="color:#EE6564;" > 1 </font> <br/>
:: Answered : 1 :: Busy : 0 :: Unanswered : 0<br/>
:: Cancelled : 0 :: Congestion : 0 :: Unavailable : 0<br/>
<br/>
Sell : <font style="color:#EE6564;" >
0.006667 </font> aud <br/>
Cost : <font style="color:#EE6564;" >
0.00067 </font> aud <br/>
Profit : <font style="color:#EE6564;" >
0.005997 </font> aud <br/>
Duration : <font style="color:#EE6564;" >
4 </font> sec <br/>
<br/>
<center><b>Report by</b></center><br/>
<center>Days <input id="view_call_day" type="radio" class="period_calls_graph" name="view_call" value="day" >
Months <input id="view_call_month" type="radio" class="period_calls_graph" name="view_call" value="month"></center> <br/>
<b>Call type :</b><br/>
<input id="call_answer" type="radio" class="update_calls_graph" name="mode_call" value="answered"> Answered
<input id="call_incomplet" type="radio" class="update_calls_graph" name="mode_call" value="incomplet"> Incomplete
<input id="call_times" type="radio" class="update_calls_graph" name="mode_call" value="times"> Duration <br/>
<input id="call_sell" type="radio" class="update_calls_graph" name="mode_call" value="sell"> Sell
<input id="call_buy" type="radio" class="update_calls_graph" name="mode_call" value="buy"> Cost
<input id="call_profit" type="radio" class="update_calls_graph" name="mode_call" value="profit"> Profit<br/>
<br/>
<div id="call_graph" class="dashgraph" style="margin-left: auto;margin-right: auto;"></div>
<script id="source" language="javascript" type="text/javascript">
$(document).ready(function () {
var format = "";
var x_format = "";
var width= Math.min($("#call_graph").parent("div").width(),$("#call_graph").parent("div").innerWidth());
var period_val="";
$("#call_graph").width(width-10);
$("#call_graph").height(Math.floor(width/2));
$('.update_calls_graph').click(function () {
$.getJSON("modules/calls_lastmonth.php", { type: this.id , view_type : period_val },
function(data){
var graph_max = data.max;
var graph_data = new Array();
for (i = 0; i < data.data.length; i++) {
graph_data[i] = new Array();
graph_data[i][0]= parseInt(data.data[i][0]);
graph_data[i][1]= data.data[i][1]
}
//alert(graph_data);
format = data.format;
plot_graph_calls(graph_data,graph_max);
});
});
$('.period_calls_graph').change(function () {
period_val = $(this).val();
if($(this).val() == "month" ) x_format ="%b";
else x_format ="%d-%m";
$('.update_calls_graph:checked').click();
});
$('#view_call_day').click();
$('#view_call_day').change();
function plot_graph_calls(data,max){
var d= data;
var max_data = (max+5-(max%5));
var min_month = 1250431200000;
var max_month = 1267362000000;
var min_day = 1265677920000;
var max_day = 1266411600000;
if(period_val=="month"){
var min_graph = min_month;
var max_graph = max_month;
var bar_width = 28*24 * 60 * 60 * 1000;
}else{
var min_graph = min_day;
var max_graph = max_day;
var bar_width = 24 * 60 * 60 * 1000;
}
$.plot($("#call_graph"), [
{
data: d,
bars: { show: true,
barWidth: bar_width,
align: "centered"
}
}
],
{ xaxis: {
mode: "time",
timeformat: x_format,
ticks :6,
min : min_graph,
max : max_graph
},
yaxis: {
max:max_data,
minTickSize: 1,
tickDecimals:0
},selection: { mode: "y" },
grid: { hoverable: true,clickable: true}
});
}
$('#call_profit').click();
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#call_graph").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
if (format=="time"){
var y = item.datapoint[1].toFixed(0);
var hour= Math.floor(y/3600);
var min= Math.floor(y/60)%60;
var sec= y%60;
showTooltip(item.pageX, item.pageY, hour+"h "+min+"m "+sec+"s<br/>("+y+" sec)");
}else if(format=="money"){
var y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, y+" aud");
}else{
var y = item.datapoint[1].toFixed(0);
showTooltip(item.pageX, item.pageY, y);
}
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
});
</script>
<br/>
</div>
Any ideas?