amcharts - load ajax data - ajax

Question

I am using AMcharts to show the JSON data returned by my web server. I am thinking of using the option like
chart.dataProvider : getData() { ... },
Here, I will make ajax call and return whatever data that the server sends. But the ajax call being asynchronous, I don't know know to how to supply the response data from the success function to the chart.
I contemplated on using dataLoader plugin, by supplying the url option like below..
"dataLoader" : {
"url": "my_server_url"
...
}
but this approach won't work for me, as I have to send some additional auth headers to my webserver, which I can do in my own ajax call.
DataLoader plugin's ajax request doesn't seem to fire my global ajax before send callback, so I cannot hook it to send auth token.
Any help here...

Answer 1

Building off what #martynasma said, here's a sample code snippet that worked for me...
return jQuery.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: 'https://www.example.com/endpoint', //replace with your endpoint url
beforeSend: function(xhr) {
// Add your parameters here
},
})
.done( function( data ) {
// Create the chart with data
var chart = am4core.create( 'chartdiv', am4charts.PieChart );
chart.data = data;
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "liters";
pieSeries.dataFields.category = "country";
})
.fail( function ( err ) {
console.log( err );
})
}
create_chart();