Home forums Using CanvasJS What kind of chart I need for this type of json? Reply To: What kind of chart I need for this type of json?

#29472

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 1 month ago by wer0ckz.