Ajax Calls in highchart.js

Question

Hello there to all developers :-)

I want to ask a question about making Ajax Calls in the highchart.js library

I have some values which I am returning via Ajax based on the information I am giving to the back-end (its an MVC .NET project) and then I want to render a new chart in each div with the class gainChart (I am adding Ids for other purposes,so don't bother them :-) )

        var iteratorJs = 0;
    $(".gainChart").each(function (i) {
        $(this).attr('id', "gainChart" + (i + 1));

            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: this,
                    type: 'line',
                    margin: 0,
                    backgroundColor: 'rgba(255,255,255,0.3)'
                },
                colors: ['#2E5430'],
                xAxis: {
                    lineWidth: 0,
                    minorGridLineWidth: 0,
                    lineColor: 'green',
                    //type: 'datetime',
                    labels: {
                        enabled: false
                    },
                    categories: [
                        $.ajax({
                            type: "POST",
                            url: "forex-copy-points-days",
                            data: { page: 0, perPage: 5, iterator: iteratorJs },
                            dataType: 'json',
                            async: false,
                            success: function (data) {
                                var daysArr = data.days;
                                JSON.stringify(daysArr);
                                categories = daysArr;
                                console.log(daysArr);
                           }
                        })
                    ]
                },
                tooltip: {
                    formatter: function () {
                        var text = '';
                        text = this.y + '$';
                        return text;
                    }
                },
                credits: { enabled: false },
                title: { text: null },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        pointWidth: 10
                    }
                },
                series: [{
                    name: 'Balance',
                    showInLegend: true,
                    legendMarkerColor: "green",
                    legendText: "Profit for account",
                    data: [
                        $.ajax({
                            type: "POST",
                            url: "forex-copy-points-balance",
                            data: { page: 0, perPage: 5, iterator: iteratorJs },
                            dataType: 'json',
                            async: false,
                            success: function (balances) {
                                var balArr = balances.balances;
                                JSON.stringify(balArr);
                                data = balArr;
                                console.log(balArr);
                            }
                        })
                    ]
                }],
                exporting: {
                    enabled: false
                },
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 600
                        },
                        chartOptions: {
                            legend: {
                                enabled: false
                            }
                        }
                    }]
                }
            });
            iteratorJs++;           
        });

The returning data is as it is supposed to be (different strings), yet nothing is displayed - only the background of the chart. Can someone give me a clue how to solve this and what to change in order to solve my problem.

Thanks in advance!

Answer 1

The jQuery $.ajax method call doesn't return the data that results from this call, so you can't write myData = $.ajax() . You have to use the success callback to get the data, and then use it.

So for example, instead of writing this:

categories: [
    $.ajax({
        type: "POST",
        url: "forex-copy-points-days",
        data: { page: 0, perPage: 5, iterator: iteratorJs },
        dataType: 'json',
        async: false,
        success: function (data) {
            var daysArr = data.days;
            JSON.stringify(daysArr);
            categories = daysArr;
            console.log(daysArr);
       }
    })
]

You should write something like this:

$.ajax({
    type: "POST",
    url: "forex-copy-points-days",
    data: { page: 0, perPage: 5, iterator: iteratorJs },
    dataType: 'json',
    async: false,
    success: function (data) {
        // create graph from AJAX call results
        var chart = new Highcharts.Chart({
            xAxis: {
                categories: JSON.stringify(data.days)
            },
            series: [{
                data: JSON.stringify(balances.balances)
            }]
        });
   }
});