Nevermind. I got it.
I filtered it this way
jQuery(document).ready(function ($) {
// get calculate yesterday as a date
var start = new Date();
start.setHours(0,0,0,0);
if (jQuery('#chartContainer-hourly').length == 1) {
var chart = new CanvasJS.Chart("chartContainer-hourly",{
title:{
text:"Ajax action logs - 24 hours"
},
axisX: {
valueFormatString: "HH:mm",
// interval: 1,
intervalType: "hour",
minimum: start.setHours(0,0,0,0),
},
toolTip: {
shared: true
},
data: []
});
$.getJSON("/wp-content/uploads/ajax-log.json", function(data) {
chart.options.data = [];
var occurrences = data.reduce( (acc, obj) => {
// date = (obj.timestamp - (obj.timestamp % (24 * 60 * 60)))*1000; // to group by date
date = (obj.timestamp - (obj.timestamp % (24 * 60 * 60))); // to group by date
// date = obj.timestamp;
// console.log(obj.timestamp);
acc[obj.ajax_action] = acc[obj.ajax_action] ? acc[obj.ajax_action] : {};
acc[obj.ajax_action][date] = (acc[obj.ajax_action][date] || 0)+1
return acc;
}, {} )
for(var actions in occurrences) {
var dataPoints = [];
for(var key in occurrences[actions]) {
// check if timestamp is today
var inputDate = new Date(parseInt(key));
var todaysDate = new Date();
if (inputDate.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)) {
console.log("TODAY IS TODAY");
dataPoints.push({ x: parseInt(key), y: occurrences[actions][key]});
}
}
chart.options.data.push({
type: "line",
showInLegend: true,
name: actions,
xValueType: "dateTime",
xValueFormatString: "HH mm",
dataPoints: dataPoints
});
}
chart.render();
});
}
});
Screenshot: https://www.screencast.com/t/XftpmDAkZJX
Thank you again for all of your help! YOu are the best!
Hi Manoj ,
Is it possible you can provide an example please? Thank you sooooo much!!!!
Hi Manoj,
Thanks for your help.
Here’s my JSFiddle
Screenshot: https://www.screencast.com/t/nERwSO7rq
My problem now is that in my 24 hour chart, I set ‘minimum’ to display 24 hours chart but it still detects other data in the past 24 months.. You see the screenshot link above it shows a long line coming from beyond 24 hours. How can I fix that?
How can I display data that it is only in 24 hours?
Thank you so much! It worked.
1 more thing please. The code you provided converts to millesecond and it does not identify the time from my json timestamp. It converts just to date.
Is it possible you can give me an example of a chart that uses 24 hours? The one you gave me is by ‘day’. Is it possible to set it to hours? I tried ‘intervalType: day” or hour but it doesn’t work because of this conversation from the code you gave:
date = (obj.timestamp – (obj.timestamp % (24 * 60 * 60)))*1000; // to group by date
Hi Manoj,
Thank you so much for your reply.
Yes those seem correct but
I need the numbers too those are dates.
My goal is to know or track how many occurrences those fields in a specific date. Not sure which graph that fits for that.
Example see this screenshot: https://www.excel-easy.com/examples/images/line-chart/line-chart.png
Instead of “Bears” in the screenshot, it should be my data like loadmore or blg_preview.
So it counts how many entries occurred on that specific date.
I hope that’s possible.