console.log(base64) not working in Annotation and Drawing Mode

[debsush]

When I try the code in the below example it works fine
https://www.amcharts.com/tutorials/export-charts-advanced/

Now when I use the "Annotation" mode in the setExport property, the hand drawn shapes etc. do not get logged into the base64 data. I used the rendered event listener like below:

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.toJPG({}, function(base64) {

      // LOG IMAGE DATA
      console.log(base64);

      // CREATE LINK TO OPEN BASE64 IMAGE IN NEW TAB
      var a = document.createElement("a");
      a.setAttribute("href", base64);
      a.setAttribute("target", "_blank");
      a.setAttribute("style", "display: block; margin-top: 150px;");
      a.innerHTML = "Open embedded base64-image";

      var div = document.createElement("div");
      div.setAttribute("style", "position: absolute; width: 100%; top:0; bottom: 0; background-color: rgba(255,255,255,.9); z-index: 1337; display: block;text-align: center;");
      div.appendChild(a);

      this.setup.chart.div.appendChild(div);
    });
  });
}

}, 100);
});

How can I log the hand drawn shapes as I am trying to use the base64 and save it in a JPG in the server.

Thank you
SD

[maertz]

Hi SD,

It's not necessary to call the capture method again, If you already entered the annotation mode, just if you wish to replace it's context. Therefore you just need to call the "toJPG" method directly like following:

// SAVE TO JPG
chart["export"].toJPG( {}, function( base64 ) {

  // LOG IMAGE DATA
  console.log( base64 );

  // CREATE LINK TO OPEN BASE64 IMAGE IN NEW TAB
  var a = document.createElement( "a" );
  a.setAttribute( "href", base64 );
  a.setAttribute( "target", "_blank" );
  a.setAttribute( "style", "display: block; margin-top: 150px;" );
  a.innerHTML = "Open embedded base64-image";

  var div = document.createElement( "div" );
  div.setAttribute( "style", "position: absolute; width: 100%; top:0; bottom: 0; background-color: rgba(255,255,255,.9); z-index: 1337; display: block;text-align: center;" );
  div.appendChild( a );

  this.setup.chart.div.appendChild( div );
} );

In addition following flag indicates if the chart is currently in annotation mode or not:

chart.export.drawing.buffer.enabled

[debsush]

Hi,

Your method worked. I changed chart["export"].toJPG to this.toJPG to make it work. However, I am unable to make use of the flag

When I try console.log(chart.export.drawing.buffer.enabled); just to check the result when in Annotation Mode, I get the following error
Uncaught ReferenceError: chart is not defined
When I try console.log(this.chart.export.drawing.buffer.enabled);
Cannot read property 'export' of undefined
When I try console.log(this.export.drawing.buffer.enabled);
Uncaught TypeError: Cannot read property 'drawing' of undefined

Please suggest since I would like to use the below logic

if (chart.export.drawing.buffer.enabled == TRUE) {
logic1;
} else {
logic2;
}

[maertz]

Please ensure your chart has been initiated / created and the export is ready to be able to check this flag. Following function does that, you just need to pass the instance you want to check:

    function chartInAnnotationMode( chart ) {
        var plugin = chart["export"] || {
            drawing: {
                buffer: {
                    enabled: false
                }
            }
        };
        var inAnnotationMode = plugin.drawing.buffer.enabled ? true : false;

        return chart.chartCreated && inAnnotationMode;
    }

[kthangabalu]

Hi ,
I couldn't reset the annotations mode.
if (chart.export.drawing.buffer.enabled === true) {
}
I am using the above condition to check whether the chart is in annotations. once the annotated chart is exported , i just want to reset the annotations mode. Could somebody please let me know how to do that?

[martynasma]

Try this:

chart["export"].drawing.handler.done();