Average Time to Complete HighChart

by tfischer7103

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; margin: 0 auto"></div>

CSS

#container {
    min-width: 310px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

$(function () {
  function toMilli(timeStr) {
    // Split the input string into days, hours, minutes, and seconds
    const [days, time] = timeStr.split(" ")
    const [hours, minutes, seconds] = time.split(":")

    // Convert each part to milliseconds
    const daysInMillis = parseInt(days) * 24 * 60 * 60 * 1000
    const hoursInMillis = parseInt(hours) * 60 * 60 * 1000
    const minutesInMillis = parseInt(minutes) * 60 * 1000
    const secondsInMillis = parseInt(seconds) * 1000

    // Return the total time in milliseconds
    return daysInMillis + hoursInMillis + minutesInMillis + secondsInMillis
  }

  var vals = [
    { x: "Jan/2025", y: "5 16:00:00" },
    { x: "Feb/2025", y: "23 17:00:00" },
    { x: "Mar/2025", y: "41 23:13:20" },
  ]
    
  var rowData = vals.map((val) => [val.x, toMilli(val.y)/(1000*60*60*24)])
    
  var rows =  [
    [null, '2025'],
    ...rowData,
  ]
    
  Highcharts.chart("container", {
    chart: {
        type: 'line'
    },
    
    yAxis: {
        title: {
        text: "Days"
      }
    },
    
    title: {
      text: "Average Time to Complete",
      align: "left",
    },
    
    data: {
      rows: rows
    },
  })
})