AmSerialChart displays incorrectly, what's the problem?

Question

JavaScript

Hello, I ran into a problem in AmSerialChart, it does not display the date correctly

Instead of going up, the date goes down. The graph goes from left to right
The code itself

jQuery(function() {
   AmCharts.ready(function () {
     var chart = new AmCharts.AmSerialChart();
     chart.dataProvider = [
<?php
// very complex query that looks scarrryyyyyy
$z = 0;
$fetchUsers = $odb->query("
 SELECT
 DAY(FROM_UNIXTIME(date)) as `day`,
 DAYNAME(FROM_UNIXTIME(date)) as `dayname`,
 COUNT(*) as `boots`
 FROM `logs`
 WHERE `date` >= UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 7 DAY))
 GROUP BY DAY(FROM_UNIXTIME(date)), DAYNAME(FROM_UNIXTIME(date))
 ORDER BY `date` ASC
");

while ($row = $fetchUsers->fetch(PDO::FETCH_ASSOC)) {
 echo "{'date':'" . $row['dayname'] . " (" . $row['day'] . ")','boots':'" . $row['boots'] . "'}";
 if ($z <= 7) echo ",";
 $z++;
}
if ($fetchUsers->rowCount() <= 7) {
 for ($i = 0; $i < 7-$fetchUsers->rowCount(); $i++) {
   echo "{'date':'" . date("l (j)", strtotime("-" . $i . " days")) . "','boots':'0'}";
   if ($z <= 7) echo ",";
   $z++;
 }
}
?>
     ];
     chart.pathToImages = "https://www.amcharts.com/lib/3/images/";
     chart.categoryField = "date";
     var categoryAxis = chart.categoryAxis;
     categoryAxis.inside = false;
     categoryAxis.gridAlpha = 0;
     categoryAxis.tickLength = 0;
     categoryAxis.axisAlpha = 0.5;
     categoryAxis.fontSize = 9;
     categoryAxis.axisColor = "rgba(255,255,255,0.8)";
     categoryAxis.color = "rgba(255,255,255,0.8)";
     var valueAxis = new AmCharts.ValueAxis();
     valueAxis.dashLength = 2;
     valueAxis.gridColor = "rgba(255,255,255,0.8)";
     valueAxis.gridAlpha = 0.2;
     valueAxis.axisColor = "rgba(255,255,255,0.8)";
     valueAxis.color = "rgba(255,255,255,0.8)";
     valueAxis.axisAlpha = 0.5;
     valueAxis.fontSize = 9;
     chart.addValueAxis(valueAxis);
     var graph = new AmCharts.AmGraph();
     graph.type = "smoothedLine";
     graph.valueField = "boots";
     graph.lineColor = "#1e5c8a";
     graph.lineThickness = 3;
     graph.bullet = "round";
     //graph.bulletColor = "rgba(0,0,0,0.3)";
     graph.bulletBorderColor = "#fff";
     graph.bulletBorderAlpha = 1;
     graph.bulletBorderThickness = 1;
     graph.bulletSize = 6;
     chart.addGraph(graph);
     var chartCursor = new AmCharts.ChartCursor();
     chart.addChartCursor(chartCursor);
     chartCursor.categoryBalloonAlpha = 0.2;
     chartCursor.cursorAlpha = 0.2;
     chartCursor.cursorColor = 'rgba(255,255,255,.8)';
     chartCursor.categoryBalloonEnabled = false;
     chart.write("chartAttacks");


   });
   });

Answer 1

U.P.