Solved: How can the user get his requested data be loaded in amChart dynamically, with ajax

How do I dynamically load data in amChart,

I have a ajax file that collects all the requested data,

The issue is to load it in the amChart.

error

amChart.inc.php:269 Uncaught ReferenceError: chart is not defined
    at Object.success (amChart.inc.php:269)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

Open in new window

html:

<div>
    <h2>amChart update</h2>
    <form action="" method="get" id="period_selection_high_chart">
        <label for="date_from">Search period:</label>
        <input type="date" id="date_from" name="date_from">

        <label for="date_untill"> t/m </label>
        <input type="date" id="date_untill" name="date_untill">

        <button id="submit" name="submit" value="search">search</button>
    </form>
    <div id="chartdiv"></div>
</div>

Open in new window

script:

am4core.ready(function() {

// Themes begin
        am4core.useTheme(am4themes_animated);
// Themes end

        const chart = am4core.create("chartdiv", am4charts.XYChart);
        chart.paddingRight = 20;
        // Load data from mySQL
        let myChartData = <?= $chart_data_json; ?>;
        console.log("amChart",myChartData);

        chart.data = myChartData;

        let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location = 0;
        dateAxis.minZoomCount = 5;

        // chart.dateFormatter.dateFormat = "yyyy-MM-dd";
// this makes the data to be grouped
        dateAxis.groupData = true;
        dateAxis.groupCount = 500;

        // dateAxis.dateFormats.setKey("day", { "year": "numeric", "month": "short", "day": "numeric" });

        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = "date";
        series.dataFields.valueY = "value";
        series.tooltipText = "{valueY}";
        series.tooltip.pointerOrientation = "vertical";
        series.tooltip.background.fillOpacity = 0.5;

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.xAxis = dateAxis;

        let scrollbarX = new am4core.Scrollbar();
        scrollbarX.marginBottom = 20;
        chart.scrollbarX = scrollbarX;
    }); // end am4core.ready()

        $("#period_selection_high_chart").on('submit', function(e){
            e.preventDefault();

            let date_from = new Date($('#date_from').val());
            let day_from = date_from.getDate() < 9 ? '0' + (date_from.getDate()) : date_from.getDate();
            // let day_from = date_from.getDate();
            let month_from = date_from.getMonth() < 9 ? '0' + (date_from.getMonth() + 1) : date_from.getMonth() + 1 ;
            // let month_from = date_from.getMonth() + 1;
            let year_from = date_from.getFullYear();

            //get date until
            let date_untill = new Date($('#date_untill').val());
            let day_untill = date_untill.getDate() < 9 ? '0' + (date_untill.getDate()) : date_untill.getDate();
            // let day_untill = date_untill.getDate();
            let month_untill = date_untill.getMonth() + 1 < 9 ? '0' + (date_untill.getMonth() + 1) : date_untill.getMonth() + 1 ;
            // let month_untill = date_untill.getMonth() + 1;
            let year_untill = date_untill.getFullYear();
            // let from = [day_from, month_from, year_from].join('/');
            let format_start_date = [year_from, month_from, day_from].join('');
            let start_date = String(format_start_date);
            // let untill = [day_untill, month_untill, year_untill].join('/');
            let format_end_date = [year_untill, month_untill, day_untill].join('');
            let end_date = String(format_end_date);
            let items = {start: start_date, end: end_date};

            function getArrayMax(array){
                return Math.max.apply(null, array);
            }
            function getArrayMin(array){
                return Math.min.apply(null, array);
            }

            console.log(items);
            $.ajax({
                url: '/xx/xxxx/xxxx/amChart.ajax.php', //?start='+start_date+'&end='+end_date,
                method: "GET",
                data: items,
                dataType: "JSON",
                success: function(response){
                    console.log("stringify", JSON.stringify(response));
                    console.log("regular", response);
                    // collect dates

                    chart.dataProvider = response;
                    // chart.validateData();


                    // chart.validateData();
                    // chart.validateData();

                },
                error: function (e) {
                    alert('Something went wrong with uploading the data');
                    console.log("Unsuccessful:", e);
                }
            });
        });

Open in new window

ajax:

[{"date":"2019-01-01","value":"1234567.89"},{"date":"2019-02-25","value":"1234567.90"},{"date":"2019-03-15","value":"1234567.91"},{"date":"2019-04-15","value":"1234567.92"},{"date":"2019-05-15","value":"1234567.93"},{"date":"2019-06-15","value":"1234567.94"},{"date":"2019-07-30","value":"1234567.95"}]

Open in new window