AM charts - duration split up in y axis - amcharts

Question

In am Charts, i have users list as category and duration (hh:mm:ss) in value axis graph. I had set grid count to 24 but, its not working as expected (1 hr * 24 steps). Its being set as 2000 secs steps. I tried changing a lot of parameter.
My sample data : https://live.amcharts.com/iMWNh/
Here, the duration split up is not working as expected in 1 hr split ups of 24 grids. My input data is in seconds.
Any advice ?

Answer 1

This helped me ! Hope someone finds it useful.
Hi,
Unfortunately, what you require would be impossible to implement using
Live Editor, due to some of its limitation.
However, it's possible using amCharts.
I have made necessary changes here:
https://codepen.io/team/amcharts/pen/55fe695a57e33657e9d5feb33423d481?editors=0010
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"backgroundAlpha": 0.8,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Online(secs)",
"type": "column",
"valueField": "Online(sec)"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Offline(secs)",
"type": "column",
"valueField": "Offline(sec)"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"maximum": 86400000,
"stackType": "regular",
"strictMinMax": true,
"autoGridCount": false,
"autoRotateCount": 0,
"gridCount": 24,
"labelRotation": 50.4,
"title": "",
"titleRotation": 0,
"type": "date",
"minPeriod": "hh",
"boldPeriodBeginning": false,
"markPeriodChange": false
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "Diana",
"Online(sec)": 7200000,
"Offline(sec)": 79200000
},
{
"category": "Clarke",
"Online(sec)": 18000000,
"Offline(sec)": 68400000
},
{
"category": "Bruce",
"Online(sec)": 3600000,
"Offline(sec)": 7200000
}
]
});
There were quite a few changes:
1) Remove the duration from value axis, and set its type: "date;
2) Make values in data non-string (remove quotes around them) and convert
to milliseconds, since JavaScript deals in milliseconds;
3) Similarly convert maximum in valueAxis to milliseconds as well;
4) Set the following two settings for valueAxis: (so that it does not try to
format the first hour differently)
"boldPeriodBeginning": false, "markPeriodChange": false
5) Finally, set AmCharts.useUTC = false before chart code. (this ensures that
timestamps are not being recalculated to local time zone)
I hope you find this useful.
Yours sincerely,
Martynas Majeris
amCharts