AM charts - duration split up in y axis

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