Reputation: 25

AmCharts with datetime axis displaying 12PM after 2PM

I have a chartJson with datetime category axis, with the category values as strings which are parsed to datetime values. The dataDateFormat is provided as "YYYY-MM-DD LL:NN:SS A" as my date is of 12hour format with AM/PM. The values at 12PM are plotted after 2PM values even though 12PM comes before 2PM. How can I fix this?

Link to codepen: https://codepen.io/shank9717/pen/xxxWMMN

Example of data:

"dataProvider": [

{
  "value1": "1",
  "alteredText": "2019-09-20 1...",
  "key": "2019-09-20 12:22:03 pm"
},
{
  "value1": "2",
  "alteredText": "2019-09-20 0...",
  "key": "2019-09-20 01:24:03 pm"
},
{
  "value1": "3",
  "alteredText": "2019-09-26 1...",
  "key": "2019-09-26 12:40:03 am"
},
{
  "value1": "4",
  "alteredText": "2019-10-11 1...",
  "key": "2019-10-11 12:09:09 pm"
},
{
  "value1": "1004",
  "alteredText": "2019-10-11 0...",
  "key": "2019-10-11 02:53:20 pm"
},
{
  "value1": "2004",
  "alteredText": "2019-10-11 0...",
  "key": "2019-10-11 03:35:31 pm"
}]

"dataDateFormat": "YYYY-MM-DD LL:NN:SS A"

Upvotes: 1

Answers (2)

xorspark

Reputation: 16012

AmCharts v3 does not support AM/PM and 12 hour date formats in dataDateFormat. Note the asterisks by LL and A and the following note:

* the formatting codes marked with an asterisk are not supported in dataDateFormat setting. The chart will not be able to parse those from your string-based dates in data.

You either need to convert your data to use a 24 hour format beforehand for AmCharts to parse using dataDateFormat, or use a library like moment.js to parse those dates into Date objects for AmCharts to use. I recommend against using the Date constructor directly as suggested in WhiteHat's answer as the spec only guarantees that either ISO8601 or RFC-2822 timestamps will work, which your format doesn't quite fit.

If you're going to use moment on your array, then the following code will work:

[
  /* your data array */
].map(function(item) {
    return {
      "value1": item.value1,
      "alteredText": item.alteredText,
      "key": moment(item.key, "YYYY-MM-DD hh:mm a").toDate()
    }
  })

Demo below:

var chartData = [];

var chart = AmCharts.makeChart( "chartdiv", 
{
  "categoryAxis": {
    "axisAlpha": 1,
    "gridAlpha": 0,
    "parseDates": true,
    "gridPosition": "start",
    "minPeriod": "ss",
    "labelsEnabled": false,
    "position": "bottom",
    "autoWrap": true,
    "title": "xaxis"
  },
  "rotate": false,
  "balloon": {
    "adjustBorderColor": false,
    "offsetX": 0,
    "offsetY": 0,
    "fixedPosition": true,
    "cornerRadius": 0,
    "maxWidth": 130
  },
  "allLabels": [
    {
      "size": 13,
      "x": "8",
      "y": "-1",
      "bold": true,
      "text": "",
      "align": "left"
    }
  ],
  "valueAxes": [
    {
      "gridAlpha": 0,
      "axisAlpha": 1,
      "offset": 0,
      "usePrefixes": true,
      "precision": 0,
      "labelsEnabled": true,
      "logarithmic": false,
      "position": "left",
      "id": "series1",
      "title": "yaxis"
    }
  ],
  "numberFormatter": {
    "precision": 0,
    "thousandsSeparator": ""
  },
  "titles": [],
  "type": "serial",
  //"dataDateFormat": "YYYY-MM-DD LL:NN:SS A",
  "chartScrollbar": {
    "oppositeAxis": false,
    "scrollbarHeight": 4
  },
  "categoryField": "key",
  "graphs": [
    {
      "valueAxis": "series1",
      "maxBulletSize": 0,
      "lineColorField": "color1",
      "bulletSize": 5,
      "thickness": 2,
      "lineThickness": 2,
      "bulletColor": "#FFFFFF",
      "fillColorsField": "color1",
      "precision": 0,
      "lineColor": "#ef7b31",
      "useLineColorForBulletBorder": true,
      "fillColors": "#ef7b31",
      "valueField": "value1",
      "title": "clf_id",
      "balloonText": "<span style='font-size:11px'><b>[[value]]</b></span>",
      "minBulletSize": 0,
      "legendValueText": " ",
      "bulletBorderAlpha": 1,
      "hideBulletCount": 50,
      "noStepRisers": false,
      "bullet": "round",
      "labelRotation": 0,
      "connect": true
    }
  ],
  "fontFamily": "Arial",
  "responsive": {
    "enabled": true
  },
  "usePrefixes": false,
  "theme": "light",
  "fontSize": 11,
  "dataProvider": [
    {
      "value1": "1",
      "alteredText": "2019-09-20 1...",
      "key": "2019-09-20 12:22:03 pm"
    },
    {
      "value1": "2",
      "alteredText": "2019-09-20 0...",
      "key": "2019-09-20 01:24:03 pm"
    },
    {
      "value1": "3",
      "alteredText": "2019-09-26 1...",
      "key": "2019-09-26 12:40:03 am"
    },
    {
      "value1": "4",
      "alteredText": "2019-10-11 1...",
      "key": "2019-10-11 12:09:09 pm"
    },
    {
      "value1": "1004",
      "alteredText": "2019-10-11 0...",
      "key": "2019-10-11 02:53:20 pm"
    },
    {
      "value1": "2004",
      "alteredText": "2019-10-11 0...",
      "key": "2019-10-11 03:35:31 pm"
    },
    {
      "value1": "3004",
      "alteredText": "2019-10-12 0...",
      "key": "2019-10-12 03:06:21 pm"
    },
    {
      "value1": "4004",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 03:57:25 pm"
    },
    {
      "value1": "5004",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 04:33:30 pm"
    },
    {
      "value1": "6004",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 04:57:14 pm"
    },
    {
      "value1": "14009",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 06:50:11 pm"
    },
    {
      "value1": "7006",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 07:35:02 pm"
    },
    {
      "value1": "8004",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 11:49:04 am"
    },
    {
      "value1": "8005",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:00:19 pm"
    },
    {
      "value1": "16013",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:07:20 pm"
    },
    {
      "value1": "18009",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:31:28 pm"
    },
    {
      "value1": "9006",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:41:22 pm"
    },
    {
      "value1": "20009",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 01:00:22 pm"
    },
    {
      "value1": "22009",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 02:19:18 pm"
    },
    {
      "value1": "12004",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 03:59:39 pm"
    },
    {
      "value1": "13004",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 07:10:26 pm"
    },
    {
      "value1": "13005",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 07:24:20 pm"
    },
    {
      "value1": "14004",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 07:42:55 pm"
    },
    {
      "value1": "15004",
      "alteredText": "2019-10-15 1...",
      "key": "2019-10-15 10:09:20 am"
    },
    {
      "value1": "30011",
      "alteredText": "2019-10-15 1...",
      "key": "2019-10-15 10:18:20 am"
    },
    {
      "value1": "15007",
      "alteredText": "2019-10-15 1...",
      "key": "2019-10-15 10:22:20 am"
    },
    {
      "value1": "16004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 01:04:33 pm"
    },
    {
      "value1": "17004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 03:22:05 pm"
    },
    {
      "value1": "18004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 08:06:00 pm"
    },
    {
      "value1": "18005",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 08:13:22 pm"
    },
    {
      "value1": "19004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 08:31:22 pm"
    },
    {
      "value1": "20004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:04:32 pm"
    },
    {
      "value1": "21004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:25:24 pm"
    },
    {
      "value1": "21005",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:34:19 pm"
    },
    {
      "value1": "21006",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:44:19 pm"
    },
    {
      "value1": "22004",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 09:52:22 am"
    },
    {
      "value1": "23004",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 06:31:26 pm"
    },
    {
      "value1": "23005",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 06:45:58 pm"
    },
    {
      "value1": "23006",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 06:50:01 pm"
    },
    {
      "value1": "24004",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 07:15:59 pm"
    },
    {
      "value1": "24005",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 07:19:01 pm"
    },
    {
      "value1": "48013",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 07:28:59 pm"
    },
    {
      "value1": "25004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 09:02:50 am"
    },
    {
      "value1": "25005",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 09:08:02 am"
    },
    {
      "value1": "26004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 05:11:58 pm"
    },
    {
      "value1": "27004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 07:39:58 pm"
    },
    {
      "value1": "28004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 08:55:58 pm"
    }
  ].map(function(item) {
    return {
      "value1": item.value1,
      "alteredText": item.alteredText,
      "key": moment(item.key, "YYYY-MM-DD hh:mm a").toDate()
    }
  }),
  "prefixesOfBigNumbers": [
    {
      "number": "1000",
      "prefix": " K"
    },
    {
      "number": "1000000",
      "prefix": " Mn"
    },
    {
      "number": "1000000000",
      "prefix": " Bn"
    }
  ],
  "chartCursor": {
    "valueBalloonsEnabled": true,
    "oneBalloonOnly": true,
    "categoryBalloonEnabled": true,
    "cursorAlpha": 0
  },
  "addClassNames": true,
  "export": {
    "fileName": "Line Chart",
    "columnNames": {
      "key": "clf_polled_dttm"
    },
    "exportFields": [
      "key",
      "value1"
    ],
    "enabled": true
  },
  "marginTop": 50
}
);

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

Upvotes: 0

WhiteHat

Reputation: 61275

change the date strings to actual date values.
assign the chart data to a variable.
change each date string to a date,
then assign the variable to the data provider in the chart options.

assign the chart data to a variable.

var chartData = [
    {
      "value1": "1",
      "alteredText": "2019-09-20 1...",
      "key": "2019-09-20 12:22:03 pm"
    },
    {
      "value1": "2",
      "alteredText": "2019-09-20 0...",
      "key": "2019-09-20 01:24:03 pm"
    },
    {
      "value1": "3",
      "alteredText": "2019-09-26 1...",
      "key": "2019-09-26 12:40:03 am"
    },
    ...

change each date string to a date

chartData.forEach(function (row, index) {
  row.key = new Date(row.key);
  chartData[index] = row;
});

then assign the variable to the data provider in the chart options.

"dataProvider": chartData,

see following working snippet...

var chartData = [
    {
      "value1": "1",
      "alteredText": "2019-09-20 1...",
      "key": "2019-09-20 12:22:03 pm"
    },
    {
      "value1": "2",
      "alteredText": "2019-09-20 0...",
      "key": "2019-09-20 01:24:03 pm"
    },
    {
      "value1": "3",
      "alteredText": "2019-09-26 1...",
      "key": "2019-09-26 12:40:03 am"
    },
    {
      "value1": "4",
      "alteredText": "2019-10-11 1...",
      "key": "2019-10-11 12:09:09 pm"
    },
    {
      "value1": "1004",
      "alteredText": "2019-10-11 0...",
      "key": "2019-10-11 02:53:20 pm"
    },
    {
      "value1": "2004",
      "alteredText": "2019-10-11 0...",
      "key": "2019-10-11 03:35:31 pm"
    },
    {
      "value1": "3004",
      "alteredText": "2019-10-12 0...",
      "key": "2019-10-12 03:06:21 pm"
    },
    {
      "value1": "4004",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 03:57:25 pm"
    },
    {
      "value1": "5004",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 04:33:30 pm"
    },
    {
      "value1": "6004",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 04:57:14 pm"
    },
    {
      "value1": "14009",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 06:50:11 pm"
    },
    {
      "value1": "7006",
      "alteredText": "2019-10-13 0...",
      "key": "2019-10-13 07:35:02 pm"
    },
    {
      "value1": "8004",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 11:49:04 am"
    },
    {
      "value1": "8005",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:00:19 pm"
    },
    {
      "value1": "16013",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:07:20 pm"
    },
    {
      "value1": "18009",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:31:28 pm"
    },
    {
      "value1": "9006",
      "alteredText": "2019-10-14 1...",
      "key": "2019-10-14 12:41:22 pm"
    },
    {
      "value1": "20009",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 01:00:22 pm"
    },
    {
      "value1": "22009",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 02:19:18 pm"
    },
    {
      "value1": "12004",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 03:59:39 pm"
    },
    {
      "value1": "13004",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 07:10:26 pm"
    },
    {
      "value1": "13005",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 07:24:20 pm"
    },
    {
      "value1": "14004",
      "alteredText": "2019-10-14 0...",
      "key": "2019-10-14 07:42:55 pm"
    },
    {
      "value1": "15004",
      "alteredText": "2019-10-15 1...",
      "key": "2019-10-15 10:09:20 am"
    },
    {
      "value1": "30011",
      "alteredText": "2019-10-15 1...",
      "key": "2019-10-15 10:18:20 am"
    },
    {
      "value1": "15007",
      "alteredText": "2019-10-15 1...",
      "key": "2019-10-15 10:22:20 am"
    },
    {
      "value1": "16004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 01:04:33 pm"
    },
    {
      "value1": "17004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 03:22:05 pm"
    },
    {
      "value1": "18004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 08:06:00 pm"
    },
    {
      "value1": "18005",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 08:13:22 pm"
    },
    {
      "value1": "19004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 08:31:22 pm"
    },
    {
      "value1": "20004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:04:32 pm"
    },
    {
      "value1": "21004",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:25:24 pm"
    },
    {
      "value1": "21005",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:34:19 pm"
    },
    {
      "value1": "21006",
      "alteredText": "2019-10-15 0...",
      "key": "2019-10-15 09:44:19 pm"
    },
    {
      "value1": "22004",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 09:52:22 am"
    },
    {
      "value1": "23004",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 06:31:26 pm"
    },
    {
      "value1": "23005",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 06:45:58 pm"
    },
    {
      "value1": "23006",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 06:50:01 pm"
    },
    {
      "value1": "24004",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 07:15:59 pm"
    },
    {
      "value1": "24005",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 07:19:01 pm"
    },
    {
      "value1": "48013",
      "alteredText": "2019-10-16 0...",
      "key": "2019-10-16 07:28:59 pm"
    },
    {
      "value1": "25004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 09:02:50 am"
    },
    {
      "value1": "25005",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 09:08:02 am"
    },
    {
      "value1": "26004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 05:11:58 pm"
    },
    {
      "value1": "27004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 07:39:58 pm"
    },
    {
      "value1": "28004",
      "alteredText": "2019-10-17 0...",
      "key": "2019-10-17 08:55:58 pm"
    }
  ];

chartData.forEach(function (row, index) {
  row.key = new Date(row.key);
  chartData[index] = row;
});

var chart = AmCharts.makeChart( "chartdiv",
{
  "categoryAxis": {
    "axisAlpha": 1,
    "gridAlpha": 0,
    "parseDates": true,
    "gridPosition": "start",
    "minPeriod": "ss",
    "labelsEnabled": false,
    "position": "bottom",
    "autoWrap": true,
    "title": "xaxis"
  },
  "rotate": false,
  "balloon": {
    "adjustBorderColor": false,
    "offsetX": 0,
    "offsetY": 0,
    "fixedPosition": true,
    "cornerRadius": 0,
    "maxWidth": 130
  },
  "allLabels": [
    {
      "size": 13,
      "x": "8",
      "y": "-1",
      "bold": true,
      "text": "",
      "align": "left"
    }
  ],
  "valueAxes": [
    {
      "gridAlpha": 0,
      "axisAlpha": 1,
      "offset": 0,
      "usePrefixes": true,
      "precision": 0,
      "labelsEnabled": true,
      "logarithmic": false,
      "position": "left",
      "id": "series1",
      "title": "yaxis"
    }
  ],
  "numberFormatter": {
    "precision": 0,
    "thousandsSeparator": ""
  },
  "titles": [],
  "type": "serial",
  "dataDateFormat": "YYYY-MM-DD LL:NN:SS A",
  "chartScrollbar": {
    "oppositeAxis": false,
    "scrollbarHeight": 4
  },
  "categoryField": "key",
  "graphs": [
    {
      "valueAxis": "series1",
      "maxBulletSize": 0,
      "lineColorField": "color1",
      "bulletSize": 5,
      "thickness": 2,
      "lineThickness": 2,
      "bulletColor": "#FFFFFF",
      "fillColorsField": "color1",
      "precision": 0,
      "lineColor": "#ef7b31",
      "useLineColorForBulletBorder": true,
      "fillColors": "#ef7b31",
      "valueField": "value1",
      "title": "clf_id",
      "balloonText": "<span style='font-size:11px'><b>[[value]]</b></span>",
      "minBulletSize": 0,
      "legendValueText": " ",
      "bulletBorderAlpha": 1,
      "hideBulletCount": 50,
      "noStepRisers": false,
      "bullet": "round",
      "labelRotation": 0,
      "connect": true
    }
  ],
  "fontFamily": "Arial",
  "responsive": {
    "enabled": true
  },
  "usePrefixes": false,
  "theme": "light",
  "fontSize": 11,
  "dataProvider": chartData,
  "prefixesOfBigNumbers": [
    {
      "number": "1000",
      "prefix": " K"
    },
    {
      "number": "1000000",
      "prefix": " Mn"
    },
    {
      "number": "1000000000",
      "prefix": " Bn"
    }
  ],
  "chartCursor": {
    "valueBalloonsEnabled": true,
    "oneBalloonOnly": true,
    "categoryBalloonEnabled": true,
    "cursorAlpha": 0
  },
  "addClassNames": true,
  "export": {
    "fileName": "Line Chart",
    "columnNames": {
      "key": "clf_polled_dttm"
    },
    "exportFields": [
      "key",
      "value1"
    ],
    "enabled": true
  },
  "marginTop": 50
}
);

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

Upvotes: 1

AmCharts with datetime axis displaying 12PM after 2PM

Answers (2)

Related Questions