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="http://code.highcharts.com/highcharts.js"></script>


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

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 valsFormatted = vals.map(function (val) {
    newVal = val
    newVal.y = toMilli(val.y)
    return newVal
  })

  Highcharts.chart("container", {
    title: {
      text: "Average Time to Complete",
      align: "left",
    },

    yAxis: {
      type: "datetime",
      dateTimeLabelFormats: {
        second: "%H:%M:%S",
        minute: "%H:%M",
        hour: "%H:%M",
        day: "%e. %b",
        week: "%e. %b",
        month: "%b '%y",
        year: "%Y",
      },
    },

    xAxis: {
      type: "categories",
    },

    legend: {
      layout: "vertical",
      align: "right",
      verticalAlign: "middle",
    },

    plotOptions: {
      series: {
        label: {
          connectorAllowed: false,
        },
      },
    },

    series: [
      {
        name: "Time",
        data: valsFormatted,
      },
    ],

    responsive: {
      rules: [
        {
          condition: {
            maxWidth: 500,
          },
          chartOptions: {
            legend: {
              layout: "horizontal",
              align: "center",
              verticalAlign: "bottom",
            },
          },
        },
      ],
    },
  })
})