AmCharts: Exported charts has only background grid

Question

I have a js file that generates a bar chart and I want to convert it to base64. I'm using AmCharts 3 for this. So far the bar chart do get rendered correctly, but the base64 output shows only background grid.

For some reason the bars are translated to the far right.

Here is my js file:

var dataProvider = randomYear();
var chart = AmCharts.makeChart("chartdiv",
    {
        "type": "serial",
        "categoryField": "category",
        "startDuration": 1,
        "export": {
            "enabled": true,
        },
        "categoryAxis": {
            "gridPosition": "start"
        },
        "trendLines": [],
        "graphs": [
            {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "fillAlphas": 1,
                "id": "AmGraph-1",
                "title": "Latest year",
                "type": "column",
                "valueField": "column-1"
            },
            {
                "balloonText": "[[title]] of [[category]]:[[value]]",
                "fillAlphas": 1,
                "id": "AmGraph-2",
                "title": "Previous year",
                "type": "column",
                "valueField": "column-2"
            }
        ],
        "guides": [],
        "valueAxes": [
            {
                "id": "ValueAxis-1",
                "title": "Pax"
            }
        ],
        "allLabels": [],
        "balloon": {},
        "legend": {
            "enabled": true,
            "useGraphSettings": true
        },
        "titles": [
            {
                "id": "Title-1",
                "size": 15,
                "text": ""
            }
        ],
        "dataProvider": dataProvider
    }
);

chart.addListener( "rendered", function( e ) {

    // WAIT FOR FABRIC
    var interval = setInterval( function() {
      if ( window.fabric ) {
        clearTimeout( interval );

        // CAPTURE CHART
        e.chart["export"].capture( {}, function() {

          // SAVE TO JPG
          this.toPNG( {}, function( data ) {
            // LOG IMAGE DATA
            console.log( data );
          } );
        } );
      }
    }, 100 );

  } );

randomYear is just a function that generates random data that will be shown in the grid.

Since export is enabled, when I click on download button I get the correct bar chart that was rendered, but when I copy the base64 text file from the console and check it out I only get the background grid.

So What am I doing wrong?

EDIT Here is randomYear function:

function randomYear() {
    var years = ["JAN", "FEB", "MAR", "APR", "MAI", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
    var year = [];
    for (var j = 0; j < 12; j++) {
        year.push(


            {
                "category": years[j],
                "column-1": Math.floor((Math.random() * 1000) + 100),
                "column-2": Math.floor((Math.random() * 1000) + 100)
            });
    }
    return year;
}

Answer 1

The issue is due to the animation in your chart. rendered doesn't mean that the animation is finished, it just means that the rendering process is done while other things are still going on (including animation). You need to either set your interval to account for it (startDuration * 1000) or use the animationFinished event instead. Also I highly recommend putting events like rendered, drawn and animationFinished inside the makeChart call as makeChart runs asynchronously as well, and you might run into issues where your handler gets added after it triggered:

AmCharts.makeChart("...", {
 // ...
 "listeners": [{
  "event": "animationFinished",
  "method": function(e) {
    // WAIT FOR FABRIC
    var interval = setInterval( function() {
      if ( window.fabric ) {
        clearTimeout( interval );

        // CAPTURE CHART
        e.chart["export"].capture( {}, function() {

          // SAVE TO JPG
          this.toPNG( {}, function( data ) {
            // LOG IMAGE DATA
            console.log( data );
          } );
        } );
      }
    }, e.chart.startDuration * 1000);
  }
});