amcharts - load ajax data

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();