116 lines
2.2 KiB
JavaScript
116 lines
2.2 KiB
JavaScript
|
// Function to clear the cache.
|
||
|
|
function updateChart() {
|
||
|
|
jQuery.post(ajaxurl, {
|
||
|
|
action: 'tptn_chart_data',
|
||
|
|
security: tptn_chart_data.security,
|
||
|
|
from_date: jQuery('#datepicker-from').val(),
|
||
|
|
to_date: jQuery('#datepicker-to').val()
|
||
|
|
}, function (data) {
|
||
|
|
var date = [];
|
||
|
|
var visits = [];
|
||
|
|
|
||
|
|
for(var i in data) {
|
||
|
|
date.push(data[i].date);
|
||
|
|
visits.push(data[i].visits);
|
||
|
|
}
|
||
|
|
console.log(date);
|
||
|
|
console.log(visits);
|
||
|
|
window.top10chart.data.labels = date;
|
||
|
|
window.top10chart.data.datasets.forEach((dataset) => {
|
||
|
|
dataset.data = visits;
|
||
|
|
});
|
||
|
|
window.top10chart.update();
|
||
|
|
}, 'json');
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery(document).ready(function($) {
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
dataType: 'json',
|
||
|
|
url: ajaxurl,
|
||
|
|
data: {
|
||
|
|
action: 'tptn_chart_data',
|
||
|
|
security: tptn_chart_data.security,
|
||
|
|
from_date: $('#datepicker-from').val(),
|
||
|
|
to_date: $('#datepicker-to').val()
|
||
|
|
},
|
||
|
|
success: function(data) {
|
||
|
|
var date = [];
|
||
|
|
var visits = [];
|
||
|
|
|
||
|
|
for(var i in data) {
|
||
|
|
date.push(data[i].date);
|
||
|
|
visits.push(data[i].visits);
|
||
|
|
}
|
||
|
|
|
||
|
|
var ctx = $("#visits");
|
||
|
|
var config = {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: date,
|
||
|
|
datasets : [
|
||
|
|
{
|
||
|
|
label: tptn_chart_data.datasetlabel,
|
||
|
|
backgroundColor: '#70c4e1',
|
||
|
|
borderColor: '#70c4e1',
|
||
|
|
hoverBackgroundColor: '#ffbf00',
|
||
|
|
hoverBorderColor: '#ffbf00',
|
||
|
|
data: visits
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
plugins: [ChartDataLabels],
|
||
|
|
options: {
|
||
|
|
plugins: {
|
||
|
|
title: {
|
||
|
|
text: tptn_chart_data.charttitle,
|
||
|
|
display: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
display: false,
|
||
|
|
position: 'bottom'
|
||
|
|
},
|
||
|
|
datalabels: {
|
||
|
|
color: '#000000',
|
||
|
|
anchor: 'end',
|
||
|
|
align: 'top'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
type: 'time',
|
||
|
|
time: {
|
||
|
|
tooltipFormat: 'll',
|
||
|
|
unit: 'day',
|
||
|
|
displayFormats: {
|
||
|
|
day: 'DD MMM YY'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scaleLabel: {
|
||
|
|
display: false,
|
||
|
|
labelString: 'Date'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
grace: '5%',
|
||
|
|
suggestedMin: 0,
|
||
|
|
scaleLabel: {
|
||
|
|
display: true,
|
||
|
|
labelString: tptn_chart_data.datasetlabel
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
window.top10chart = new Chart(ctx, config);
|
||
|
|
},
|
||
|
|
error: function(data) {
|
||
|
|
console.log(data);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|