Getting the most out of net.load utility

This tutorial walks through advanced uses of the net.load utility, which is used to load data in external URLs.

Prerequisites

We're assuming that you are familiar with what net.load utility is, what is it used for, and how. For basic usage refer to the "External data" section in "Data" tutorial.

Specifying data user

net.load utility is completely standalone, but we can pass in its intended data user via second parameter.

Doing so will not modify it, or set data on it, but will rather contain reference to it in all success/error handlers, so we can use generic load handler functions. E.g.:

function dataLoaded(result) {
  // Set data on all series of the chart
  const data = am5.JsonParser.parse(result.response);
  result.target.series.each(function(series) {
    series.data.setAll(data);
  });
}

am5.net.load("/data/mydata.json", chart).then(dataLoaded);
function dataLoaded(result) {
  // Set data on all series of the chart
  var data = am5.JsonParser.parse(result.response);
  result.target.series.each(function(series) {
    series.data.setAll(data);
  });
}

am5.net.load("/data/mydata.json", chart).then(dataLoaded);

HTTP request options

It's possible to pass in options to the HTTP request via third parameter to the net.load() function.

Supported properties are as follows:

OptionComment
requestHeadersAn object of key-value pairs to pass as a HTTP(S) request headers.
responseTypeA response type expected from the server. (more info)
withCredentialsWhether to pass in web authentication credentials with the request. (more info)
function dataLoaded(result) {
  // Set data on all series of the chart
  const data = am5.JsonParser.parse(result.response);
  result.target.series.each(function(series) {
    series.data.setAll(data);
  });
}

am5.net.load("/data/mydata.json", chart, {
  requestHeaders: {
    "x-user-token": "123456789"
  }
}).then(dataLoaded);
function dataLoaded(result) {
  // Set data on all series of the chart
  var data = am5.JsonParser.parse(result.response);
  result.target.series.each(function(series) {
    series.data.setAll(data);
  });
}

am5.net.load("/data/mydata.json", chart, {
  requestHeaders: {
    "x-user-token": "123456789"
  }
}).then(dataLoaded);

Result object

The result object passed in to load handler function contains much more than the response:

FieldComment
xhrThe original XMLHttpRequest object used to make HTTP(S) request. (more info)
responseA string response loaded from the web server.
blobResponse Blob if responseType in request options was set to "blob".
typeA response type. (more info)
errorfalse if loaded successfully; true if error occurred when loading.
targetA target data user object if it was specified. (more info)