Home forums Chart Support What kind of chart I need for this type of json?

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #29343

    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

    #29377

    @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

    #29389

    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.

    #29397

    @wer0ckz,

    Please take a look at this JSFiddle.

    —-
    Manoj Mohan
    Team CanvasJS

    #29409

    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

    #29420

    @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

    #29440

    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?

    #29468

    @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

    #29471

    Hi Manoj ,

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

    #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 5 months, 4 weeks ago by wer0ckz.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.