Your IP : 216.73.216.79
<?php
use Yii\helpers\Url;
$home = URL::home();
$flot =
<<<SOL
var options = {
xaxis: {
mode: 'time',
tickSize: [3, 'day'],
tickLength: 0,
axisLabel: 'Date',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: '#d5d5d5'
},
yaxes: [{
position: 'left',
// max: 10,
color: '#d5d5d5',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 3
}, {
position: 'right',
clolor: '#d5d5d5',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: ' Arial',
axisLabelPadding: 67
}
],
legend: {
noColumns: 1,
labelBoxBorderColor: '#000000',
position: 'nw'
},
grid: {
// hoverable: true,
clickable: false,
borderWidth: 0,
// hoverable: true,
clickable: true,
},
tooltip: true,
tooltipOpts: {
content: "x: %x, y: %y"
},
series: {
stack: true,
},
};
var ajx = function(urlParam=null){
$.ajax({
dataType: "json",
url: '$home?r=site/flot-data&'+urlParam,
success: function(data){
console.log('i hv been recalled');
jsonObj = JSON.parse(data);\n
/* datasource */
{$dataSource}
/* data set */
{$dataSet}
$.plot($("#flot-dashboard-chart"), dataset, options);
/* tooltips */
function showTooltip(x, y, contents) {
$('<div id="tooltip" class="label label-default">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border:'1px solid #6a6375',
padding: '2px',opacity: 0.80
}).appendTo("body").fadeIn(200);
}
$('#flot-dashboard-chart').bind('plotclick', function (event, pos, item) {
$('#tooltip').remove();
if (item) {
console.log(item.dataIndex);
var x = gdt(item.datapoint[0]),y = item.datapoint[1]-item.datapoint[2];
showTooltip(item.pageX, item.pageY, y + ' '+item.series.label +' pada '+ x);
}
});
},
error: function(err)
{
console.log('%c ajax error.','background:#ff1616;color:#fff;');
}
});
}
/* init */
ajx();
/* date */
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
function padZero(number) {
if (number < 10) {
number = "0" + number;
}
return number;
}
function gdt(time) {
dateObject = new Date(time),
temp = [];
temp.push(padZero(dateObject.getUTCDate()));
temp.push(padZero(dateObject.getUTCMonth() + 1));
temp.push(dateObject.getUTCFullYear().toString());
return temp.join("-");
}
/* date pick for select month */
$('#datepick').datepicker({
startView: 1,
minViewMode:1,
orientation: "top right",
keyboardNavigation: false,
forceParse: false,
autoclose: true,
format: "dd/mm/yyyy"
});
$('#datepick').on('changeMonth', function(e) {
$('#datepick').datepicker('hide');
ajx('start='+formatDate(e.date));
});
function formatDate(d)
{
date = new Date(d)
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm};
return d =yyyy+'-'+mm+'-'+dd
}
SOL;
$this->registerJs($flot);
?>