How to pre zoom to the current day on timestamp

I'm trying to pre-zoom my charts to show the current day. Here is my graph :

    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.dataSource.url = "https://api.myjson.com/bins/vz0pg";
    chart.dataSource.events.on("parseended", function(ev) {
        var data = ev.target.data;
        data.sort(function(lhs, rhs) {
            return lhs.time - rhs.time;
        });
        data.forEach(function(item) {
            item.time *= 1000;
        });
    });
    chart.numberFormatter.numberFormat = "#.0b";
    chart.dateFormatter.inputDateFormat = "x";
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.dateFormats.setKey("minute", "d MMM, \nHH:mm");
    dateAxis.periodChangeDateFormats.setKey("minute", "d MMM, \nHH:mm");
    dateAxis.dateFormats.setKey("hour", "d MMM, \nHH:mm");
    dateAxis.periodChangeDateFormats.setKey("hour", "d MMM, \nHH:mm");
    dateAxis.startLocation = 0.5;
    dateAxis.endLocation = 0.5;
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "time";
    series.name = "Traffic out";
    series.dataFields.valueY = "outDiffFormatted";
    series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series.tooltipText = "[#000]{valueY.value}[/]";
    series.tooltip.background.fill = am4core.color("#FFF");
    series.tooltip.getStrokeFromObject = true;
    series.tooltip.background.strokeWidth = 3;
    series.tooltip.getFillFromObject = false;
    series.fillOpacity = 0.6;
    series.strokeWidth = 2;
    series.stacked = false;
    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.dateX = "time";
    series2.name = "Traffic in";
    series2.dataFields.valueY = "inDiffFormatted";
    series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
    series2.tooltipText = "[#000]{valueY.value}[/]";
    series2.tooltip.background.fill = am4core.color("#FFF");
    series2.tooltip.getFillFromObject = false;
    series2.tooltip.getStrokeFromObject = true;
    series2.tooltip.background.strokeWidth = 3;
    series2.sequencedInterpolation = true;
    series2.fillOpacity = 0.5;
    series2.stacked = false;
    series2.strokeWidth = 2;
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.lineY.opacity = 0;
    chart.cursor.xAxis = dateAxis;
    chart.scrollbarX = new am4charts.XYChartScrollbar();
    chart.scrollbarX.series.push(series);
    chart.legend = new am4charts.Legend();
    chart.legend.position = "top";

    chart.events.on("ready", function () {
      dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
      );
    });

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;
}

<!DOCTYPE html>
    <html>
        <head>
        <style>

        </style>
        </head>
        <body>
            <script src="https://www.amcharts.com/lib/4/core.js"></script>
            <script src="https://www.amcharts.com/lib/4/charts.js"></script>
            <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
            <div id="chartdiv"></div>
        </body>
    </html>

Here is the code I added :

chart.events.on("ready", function () {
    dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
    );
});

I expect to zoom from 3 May 2019 at 00:00 to 4 May 2019 at 23:59

Solution

You're loading data externally. This means that the data is not yet available when "ready" event kicks in, so your zoomToDates() call is "firing blank".

You're better off using "datavalidated" event, which will kick in when data is loaded and ready, so it's a good moment to pre-zoom your chart.

chart.events.on("datavalidated", function () {
    dateAxis.zoomToDates(
        new Date(2019, 5, 02),
        new Date(2019, 5, 03)
    );
});