[wer0ckz]

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!

• This reply was modified 3 years, 10 months ago by wer0ckz.

[wer0ckz]

Hi Manoj ,

Is it possible you can provide an example please? Thank you sooooo much!!!!

[wer0ckz]

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?

[wer0ckz]

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

[wer0ckz]

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.