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",
      },
      labels: {
        formatter: function (val) {
          return Highcharts.dateFormat(
            "%Hh %Mm %Ss",
            this.value,
          )
        },
      },
    },

    title: {
      text: "Average Time to Complete",
      align: "left",
    },

    data: {
      rows: rows,
    },
  })
})