jqplot number of events per hour

Question

I have an array fetched from

<div style='hidden' id=dataHours data-hours='{"08":3,"10":3,"11":1,"12":1,"14":2,"16":2,"18":1}'>

It is converted to json array.

I would like to use jqplot to create an matrix with x-axis as hours an y-axis as number of events.

I currently tries this code:

        var json_data = $('#dataHours').data('hours');
    var dateHoursArray = $.map(json_data, function(value, index) {
                return [[index,value]];
            });

    
    console.log(dateHoursArray);
    $.jqplot('maindiv', dateHoursArray, {
        legend: {
            show:true,
            location : 'ne'
        },
        title: 'Tickets created per hour',
        animate: true,
        animateReplot: true,
        axes: {
            xaxis: {
                label:'Hours',
                autoscale: true,
                min:0,
                max:23,
                rendererOptions: {
                    tickRenderer:$.jqplot.CanvasAxisTickRenderer
                },
                tickOptions: {
                    formatString:'%.0f'
                }
            },
            yaxis: {
                label:'Tickets',
                autoscale: true
            }
        },
        highlighter: {
            sizeAdjust: 7.5
        },
        cursor: {
            show: false
        },
        grid: {
            gridLineColor: '#cccccc',
            background: '#fff',
            borderColor: '#000',
            borderWidth: 2.0,
            shadow: false,
        }
    });

But it does not work as I would like to expect.

Anyone?

Answer 1

Logic.

Created an array of 24 hours and walked through array to increase counter on matching hour:

    /*
Calculate max tickets per hour on 24 hours using tickets within specific period
*/
$date_sums = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // 24 hours of 0
if(!empty($ticket_array)) {
    foreach ($ticket_array AS $ticket) {
        $hour = date("G", strtotime($ticket["ticket_created_date"]));
        if (!empty($ticket["ticket_created_date"])) {
            $date_sums[$hour] += 1;
        } // end if
    } // end foreach
    foreach ($date_sums AS $sum => $value) {
        $dates_sum[] = $value;
    }
} // end if

Then Javascripted the base64_encoded json_encoded $dates_sum array:

        var json_data = $('#dataHours').data('hours');
    var json_data = JSON.parse(atob(json_data));  //base64 decode and make into javascript object
    var dateHoursArray = [Array.from(json_data)];       

Took me a few trial and errors on the last line of Array.from;)