amCharts: How to gracefully manage lack of data fr

问题:

I am using amCharts to generate graphs and such by pulling data via dataLoader capability.

I have been mulling my brain as to how to gracefully handle lack of data that gets passed from API from time to time so that graph shows a message such as "No Data Available".

Example chart code:

var chart = new AmCharts.AmSerialChart();

chart.dataLoader = { url: "/api/blobs"};
chart.categoryField = "site";
chart.type="serial";
chart.theme = "light";

var graph = new AmCharts.AmGraph();
graph.valueField = "visit";
graph.type = "column";
graph.fillAlphas = 1;
graph.lineAlpha = 0;

var valuesAxis = new AmCharts.ValueAxis();
valuesAxis.integersOnly = true;

graph.balloonText = "[[category]]: <b>Total: [[value]]</b>";
chart.depth3D = 45;
chart.angle = 45;
chart.addGraph(graph);
chart.addValueAxis(valuesAxis);

chart.write("blob_chart"); 

Anyone have a clue how I can manage to check if dataLoader returns null and if so write a plan "No Data Available" on the chart instead?

回答1:

You can use Data Loader's postProcess handler to check whether the data is empty, and then add relative label. postProcess is a custom function that the loaded data is passed into before passed to chart.

At that point you can modify it as well as perform any other tasks based on it, such as adding "No data" label.

I.e.:

chart.dataLoader = {
  url: "/api/blobs",
  postProcess: function(data, options) {
    if (data === null) {
      data = [];
      options.chart.addLabel("50%", "50%", "No Data Available");
    }
    return data;
  }
};