Annotation Callback 'onMove'

What I’m trying to do is set up an API call to my DB that allows users to add, edit, move, remove (etc.) annotations from the plot in their report. (I’ll need x/y coordinates, arrow info etc. to recreate from the DB on next run).

I’m having a hard time understanding the event handlers. (Sorry for the code formatting).

I set the plot with:

$( document ).ready(function() {
	Plotly.newPlot('main_graph{{key}}',
	                        main_data{{key}},
				main_layout{{key}},
				{displayModeBar: false,
				edits:{annotationPosition: true,
					 annotationText: true,
					 annotationTail: true}},
				);
});

And I have a button on the page to add a new default annotation

function addAnnotation(
    var myPlot{{key}} = document.getElementById('main_graph{{key}}');
    var annotate_text = 'New Annotation';
    var annotation = {
        text: annotate_text,
	x: 1,
	y: 15
    }

    var annotations = myPlot{{key}}.layout.annotations || [];
    annotations.push(annotation);
    var update = {  annotations: annotations  };
	
    Plotly.relayout('main_graph{{key}}', update);

    $(".annotation").bind("click mouseup mouseleave",function(e) { 
		var annotations_list = myPlot{{key}}.getElementsByClassName("annotation");
		var ann_list = Array.prototype.slice.call( annotations_list );
		var annot_number = this.getAttribute('data-index')
		var annot = ann_list[annot_number]
		var x = myPlot{{key}}.layout.annotations[annot_number]['x']
			console.log('well something happened', annot)
		});	
	};

The event prints to console until I move (drag and drop) an annotation…then nothing prints when I mouseup or mouseleave the new annotation location.

Ideally I would like an event to fire that I can tie to AJAX to update DB anytime an annotation is modified…re-positioned, renamed, etc.

[mitja-p]

You should use plotly_relayout event which will send you the changes after annotation change is finished.

[etpinard]

Closing.