javascript - How to Calculate Average Time to Complete?

I am trying to create a line chart that captures average time to complete durations, grouped by month. On the y-axis I need to measure the time to complete and the x-axis should display the month. The data looks like the following,

  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" },
  ]

The time values translate "41 23:13:20" -> 41 Days, 23 Hours, 13 minutes, 20 seconds

I've been trying to convert to milliseconds for plotting the values, but the big numbers are being rounded when translated to scientific notion. Ideally the y-axis would display a range dynamically rendering to encapsulate the provided plotted values.

Any advice is greatly appreciated.

<script src=".11.3/jquery.min.js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>


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

$(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
    },
  })
})

  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" },
  ]

The time values translate "41 23:13:20" -> 41 Days, 23 Hours, 13 minutes, 20 seconds

Any advice is greatly appreciated.

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


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

$(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
    },
  })
})

https://jsfiddle/tfischer7103/4opLc7uz/27/

Share Improve this question edited 14 hours ago DarkBee 15.5k8 gold badges72 silver badges117 bronze badges asked yesterday Tim 111 bronze badge New contributor Tim is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1 Please edit to provide minimal reproducible example. External links shouldn't be used as an alternative to minimal reproducible example – TheMaster Commented yesterday
Your question is about javascript and highcharts, please remove the unused tags. – JasonB Commented yesterday
Please see How to Ask, then revise your title to ask a clear, specific question. – isherwood Commented yesterday

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

I've used your code to create this snippet. The large numbers weren't being rounded, they are just large numbers - billions of milliseconds. This example snippet uses your millisecond conversion for data precision but then divides those values by milliseconds per day to put the data into a range that is more consumable.

$(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
    },
  })
})

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

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


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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to Calculate Average Time to Complete? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)