Search code examples
javascriptamcharts

AmCharts 4 DataSource: Force chart to wait for all external data to load

I'm using AmCharts 4 to create a scatter plot with external data, using this code to point to the external URL:

dataURL = 'http://somesite.com/page?params=1234';
ScatterChart.dataSource.disableCache = true;
ScatterChart.dataSource.url = dataURL;

The chart loads; however, each time I load the chart, it is giving me a different set of data, and it always is missing significant chunks of the data I am expecting. When I go to dataURL the external data downloads onto into its URL over a period of approximately 20 seconds. I think it is not waiting for the data source page to finish downloading information before graphing.

Is there a way to force AmCharts to wait for a data source to finish loading before graphing a chart?

Here is a screenshot of the network view of dataURL:

screenshot of the network view

Solution

  • Stepped away from this project for a while, but started again recently and determined that the reason the chart was only showing certain data points was due to the sort order of the data, not any sort of timeout on data loading.

    In this case, I will describe what happened when I was building a scatter XY chart with a date X axis and a value Y axis.

    The documentation says that order can be important for a Line Series due to the confusing way in which the lines will be connected, but it doesn't say that out of order data wouldn't be shown. When I was experimenting, I saw that this is not necessarily the case.

    When I sorted by date X axis ascending, all the data shows.

    data = data.sort((a, b) => a['DateX'] < b['DateX'] ? -1 : a['DateX'] < b['DateX'] ? 1 : 0)

    Ascending Sort

    When I did not sort my data by date, it would show only some of my information.

    No Sort

    When I sorted by my date column descending it only showed one data point on my chart.

    data = data.sort((a, b) => a['DateX'] > b['DateX'] ? -1 : a['DateX'] > b['DateX'] ? 1 : 0) Descending Sort

    So in the end, if this happens to you, make sure to sort your data prior to sending it to the chart.