What kind of chart I need for this type of json?

[wer0ckz]

Hi guys,

I’ve been trying for hours now and I tried multiple examples but I cannot seem to find any good example or demo that fits for my json file here:

https://gist.github.com/jmcausing/8c1c3cd626faeaf832a0aeb61d3e22cc

Can anyone help me please point me to the right direction?

You see that my json file has a multiple duplicates like ajax_actio: loadmore

I just need them to count how many entries in the chart links to their date.

Thanks in advanced

[Manoj Mohan]

@wer0ckz,

Do you mean showing the number of occurrences of ajax_action (loadmore, blg_preview_action, heartbeat, etc) in chart? If so, then please take a look at this JSFiddle.

In case this doesn’t fulfill your requirement, kindly brief us further about your requirements so that we can understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[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.

[Manoj Mohan]

@wer0ckz,

Please take a look at this JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[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

[Manoj Mohan]

@wer0ckz,

The code you provided converts to millisecond and it does not identify the time from my json timestamp.

The timestamp present in the JSON that you have shared is in UNIX timestamp because of which it has been converted to JavaScript timestamp.

Is it possible you can give me an example of a chart that uses 24 hours?

You can group it according to your requirement either by day or hour. Please take a look at this JSFiddle for an example on grouping the data by an hour.

—-
Manoj Mohan
Team CanvasJS

[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?

[Manoj Mohan]

@wer0ckz,

minimum sets the minimum value for axis. Values smaller than minimum in axis are clipped. However, when you pass the dataPoints in options, chart will consider all the dataPoint to render it. If you like to display dataPoints only for a certain range, you can filter and remove all the dataPoints beyond the required range.

—-
Manoj Mohan
Team CanvasJS

[wer0ckz]

Hi Manoj ,

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

[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 4 years, 6 months ago by wer0ckz.