JSFiddle - React, Tailwind, and code Playground

by jmcausing

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>

<div id="chartContainer-hourly" style="height: 300px; width: 100%;"></div>

JavaScript

// 24 hours Ajax Logging Chart -- End
// #####
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: 2,
          intervalType: "hour",
          minimum:  start.setHours(0,0,0,0)

        },
        toolTip:  {
            shared: true
        },
        data: []
    });
    $.getJSON("https://api.jsonbin.io/b/5ed6e5297741ef56a566e32f", 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]) {
            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(); 
    });



 }
     
 });
// 24 hours Ajax Logging Chart -- End
// #####