AMChart datetime implementation

Question

I would like to create a chart with datetime axis in Amchart.

The minimum period should be in hours, so I added the minPeriod:"hh". The data is inside the HTML, between tags. I tried with the below function, but I get a blank chart (with white bkackground).

What could be the problem? This is how I tried:

JS function:

$(function() {
    var amchart = AmCharts.makeChart("sales-analytics", {
        "type": "serial",
        "theme": "light",
        "marginTop": 0,
        "marginRight": 0,
        "dataProvider": chartvalues,
        "valueAxes": [{
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left"
        }],
        "graphs": [{
            "id": "g1",
            "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
            "bullet": "round",
            "bulletSize": 8,
            "lineColor": "#fe5d70",
            "lineThickness": 2,
            "negativeLineColor": "#fe9365",
            "type": "smoothedLine",
            "valueField": "value"
        }],
        "chartScrollbar": {
            "graph": "g1",
            "gridAlpha": 0,
            "color": "#888888",
            "scrollbarHeight": 55,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "autoGridCount": true,
            "selectedGraphFillAlpha": 0,
            "graphLineAlpha": 0.2,
            "graphLineColor": "#c2c2c2",
            "selectedGraphLineColor": "#888888",
            "selectedGraphLineAlpha": 1

        },
        "chartCursor": {
            "categoryBalloonDateFormat": "YYYY-MM-dd HH:mm:ss",
            "cursorAlpha": 0,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "valueLineAlpha": 0.5,
            "fullWidth": true
        },
        "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
        "categoryField": "year",
        "categoryAxis": {
            "minPeriod": "hh",
            "parseDates": true,
            "gridAlpha": 0,
            "minorGridAlpha": 0,
            "minorGridEnabled": true
        },
        "export": {
            "enabled": true
        }
    });
    amchart.addListener("rendered", zoomChart);
    if (amchart.zoomChart) {
        amchart.zoomChart();
    }

    function zoomChart() {
        amchart.zoomToIndexes(Math.round(amchart.dataProvider.length * 0.4), Math.round(amchart.dataProvider.length * 0.55));
    }
});

Data:

var chartvalues = [
    {
        "year": "2022-01-31 14:12:22",
        "value": 71
    },
    {
        "year": "2022-06-08 16:42:38",
        "value": 50
    },
    {
        "year": "2022-02-21 11:12:48",
        "value": 43
    },
    {
        "year": "2021-04-13 01:49:44",
        "value": 82
    }];

Answer 1

AmCharts expects datetime-based data to be sorted in ascending order (v3 docs). You need to fix your data order or it won't render correctly.

var chartvalues = [{
    "year": "2021-04-13 01:49:44",
    "value": 82
  }, {
    "year": "2022-01-31 14:12:22",
    "value": 71
  },
  {
    "year": "2022-02-21 11:12:48",
    "value": 43
  },
  {
    "year": "2022-06-08 16:42:38",
    "value": 50
  },
];

var amchart = AmCharts.makeChart("sales-analytics", {
  "type": "serial",
  "theme": "light",
  "marginTop": 0,
  "marginRight": 0,
  "dataProvider": chartvalues,
  "valueAxes": [{
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }],
  "graphs": [{
    "id": "g1",
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
    "bullet": "round",
    "bulletSize": 8,
    "lineColor": "#fe5d70",
    "lineThickness": 2,
    "negativeLineColor": "#fe9365",
    "type": "smoothedLine",
    "valueField": "value"
  }],
  "chartScrollbar": {
    "graph": "g1",
    "gridAlpha": 0,
    "color": "#888888",
    "scrollbarHeight": 55,
    "backgroundAlpha": 0,
    "selectedBackgroundAlpha": 0.1,
    "selectedBackgroundColor": "#888888",
    "graphFillAlpha": 0,
    "autoGridCount": true,
    "selectedGraphFillAlpha": 0,
    "graphLineAlpha": 0.2,
    "graphLineColor": "#c2c2c2",
    "selectedGraphLineColor": "#888888",
    "selectedGraphLineAlpha": 1

  },
  "chartCursor": {
    "categoryBalloonDateFormat": "YYYY-MM-dd HH:mm:ss",
    "cursorAlpha": 0,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "valueLineAlpha": 0.5,
    "fullWidth": true
  },
  "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
  "categoryField": "year",
  "categoryAxis": {
    "minPeriod": "hh",
    "parseDates": true,
    "gridAlpha": 0,
    "minorGridAlpha": 0,
    "minorGridEnabled": true
  },
  "export": {
    "enabled": true
  }
});
amchart.addListener("rendered", zoomChart);
if (amchart.zoomChart) {
  amchart.zoomChart();
}

function zoomChart() {
  amchart.zoomToIndexes(Math.round(amchart.dataProvider.length * 0.4), Math.round(amchart.dataProvider.length * 0.55));
}

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="sales-analytics" style="width: 100%; height: 300px;"></div>