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 (8)
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.
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!
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
