Using charts with times as values
Hi,
I have an admin area setup with Metronic8 and everything is working great. I'm after some help with Graphs.
I have set up an area where I record people's race times. I want to be able to display these times in a graph to show how they have improved over a period of time but im struggling to get the values into any kind of graph that is included with Metronic.
Ideally, this would be a line graph. The times recorded are in the format of 00:00:00.00 (HH:MM:SS.ss). I can get this to work if i convert this time into seconds, ie 124.56 seconds but would really like this to be displayed as 00:02:04.56.
Any help on this would be very much appreciated.
Thanks
Paul
Replies (9)
Any help on this at all please???
Hi,
Apologies for the late reply. It seems we missed your case and accidentally marked it as replied.
May I know which chart library are you using? Could you please provide your HTML/JS code via gist.github.com and we will debug your code on your end? We will get back to you with advice once we get the above details.
Regards.
HI,
Many thanks for getting back to me. I have created a page here
https://gist.github.com/wilkesy123/4a11674561d390e77b20141499eb55e1
Not sure if I have everything you want but I can change it if needed.
What I'm looking for is a series data
data: [47.69,46.63,46.01,44.37,44.51,41.88,43.39,41.38,43.44,41.84,41.65] }],
to be able to be used like this
data: [00:00:47.69,00:00:46.63,00:00:46.01,00:00:44.37,00:00:44.51,00:00:41.88,00:00:43.39,00:00:41.38,00:00:43.44,00:00:41.84,00:00:41.65] }],
This will mean I can then view the graph in the correct data format.
Many thanks
Hi,
Please try to add a custom formatting for the y-axis as shown below:
yaxis: {
labels: {
formatter: function(val) {
return "00:00:" + val;
},
style: {
colors: labelColor,
fontSize: "12px"
}
}
},For any further info, you can check the Apex Charts Docs.
Regards.
Hi Sean,
Thanks, this kinda works but unfortunately not the solution.
I have done a screenshot and hopefully, you will be able to see the issue more clearly. https://www.trackaswim.com/chart1.jpg
In the screenshot, you will see that I have had to convert the time of 00:03:41.31 into total seconds, 221.31 seconds so that i am able to produce the graph. Ideally, I would like to be able to use the actual times of 00:03:41.31 as this is what people associate with rather than 221.31 seconds.
Hope that makes sense??
Appreciate your help
Paul
Hi,
Unfortunately, I could not find any API method or config for that. Can you please try to reach the plugin author and its community Apexchart Github? If we have any workarounds we will let you know as well.
Regards.
Many thanks, Sean, I have posted in the forum so let's see what happens.
Many thanks
Paul
You are welcome! Hopefully, some Apexchart exports will revert. All the best with your projects!
Hello Paul,
To display players' times in a line chart, you can use a JavaScript library like Chart.js time calculator or D3.js to create a chart based on their timing data. First, you need to convert the HH:MM:SS.ss time format to seconds to use in the chart. You can then create a line chart using this library and display the time as HH:MM:SS.ss on the x-axis.
If you need more specific assistance on how to do this in Metronic or with JavaScript, let me know so I can assist you in more detail.
Good luck!
