Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Cannot get newPlot to work on empty <div> in plotly.js

I am able to successfully use newPlot one time (after emptying a div in which I had a plot created using Ploty.plot), but cannot seem to get newPlot working subsequent times! I am new to Javascript/jQuery and receiving no support for it at work, so any help would be appreciated!

I am currently calling .empty() on the div containing my plot, then calling Plotly.newPlot on it - the div is emptied, but no new plot appears!

Thanks for trying out plotly.js!

Can you share a code snippet of what you attempted to help us debug? Thanks in advance.

Many thanks for your reply!

I am coding a tool that is being deployed to a div in an existing visualisation framework, so my code is not written in the classic html, css, js file structure.

To plot my plotly plots (scatter3d), I have written two jQuery plugins: one that calls Plotly.plot() and another that calls Plotly.newPlot(). The following is the code for the plugin calling Plotly.plot():

(function($) {
	$.scatterPlot = function(el, data, layout, options) {
    	var _this = this;
    	this.el = el;
    	this.$el = $(el);
    	this.$el.data("scatterPlot", this);
    	this.init = function() {
			_this.$el.addClass('scatterPlot');
			Plotly.plot(_this.el, data, layout);
    		return _this;
		};
		return this.init();
	};
	$.fn.scatterPlot = function(data, layout, options) {
		return $.each(this, function(i, el) {
			var $el, instanceOptions;
			$el = $(el);
			if (!$el.data('scatterPlot')) {
				instanceOptions = $.extend({}, options, $el.data());
        		return $el.data('scatterPlot', new $.scatterPlot(el, data, layout, instanceOptions));
      		}
		});
	};
	return void 0;
})(jQuery);

The second plugin is exactly the same, except it calls Plotly.newPlot(), and is called $.reScatterPlot().

The following is from my main code, which calls these two functions:

var dataObj = jQuery.parseJSON(str);
if (dataObj.status == true) {
     // set dimensions of thisRef (the div to which the tool is being deployed)
     thisRef.css({
       	width: 1200,
        height: 500,
     });
     thisRef.append('
') $("#pca_wrapper").append('
'); $("#canvas_div").scatterPlot(dataObj.datasets, dataObj.layout); $("#pca_wrapper").append("
" + '
'+ '
' + '
' + ''+ 'Marker Name:' + '' + '
'+ '
' + ''+ 'Threshold:' + '' + 'Below' + 'Between' + 'Above' + '' + '
'+ '
' + ''+ 'Expression Value:' + '
'+ '' + '' + '
'+ '
'+ '
'+ '
'+ ' Add another marker ' + ' Remove marker
' + ' Re-plot with Markers ' + ' Revert to original plot ' + '
'); $('#original_plot').click(function(){ $("#canvas_div").empty(); $("#canvas_div").reScatterPlot(dataObj.datasets, dataObj.layout); $(this).attr('disabled', true); }); $('#replot').click(function(){ var markers_array=[]; //get what was input by the user for(i=1; i<=$('.markers_input').length;i++){ if($("#ID" + i + "_threshold_type").val()=="BETWEEN"){ var marker={"name":$("#ID" + i + "_marker_name").val(), "threshold_type":$("#ID" + i + "_threshold_type").val(), "expression_value":[$("#ID" + i + "_evalue_lower").val(), $("#ID" + i + "_evalue_upper").val()] }; markers_array.push(marker); }else{ var marker={"name":$("#ID" + i + "_marker_name").val(), "threshold_type":$("#ID" + i + "_threshold_type").val(), "expression_value":[$("#ID" + i + "_evalue_lower").val()] }; markers_array.push(marker); } } var input = {"gene_markers": markers_array}; var jsonString = JSON.stringify(input); $("#canvas_div").empty(); $("#canvas_div").addClass("loadingSpinnerPlotlyPCA"); settings.serverObject.replotData(str, jsonString, { callback:function(str2){ $("#canvas_div").removeClass("loadingSpinnerPlotlyPCA"); var replotDataObj = jQuery.parseJSON(str2); if (replotDataObj.status == true) { $("#canvas_div").reScatterPlot(replotDataObj.datasets, replotDataObj.layout); $('#original_plot').attr('disabled', false); }else{ alert("Error Loading: "+ dataObj.error); } } }); $('#original_plot').attr('disabled', false); }); } // if it's not ok alert an error else { alert("Error Loading: "+dataObj.error); } }

The idea is that we start off with a scatter plot plotted using Plotly.plot(). When the user inputs some values in the input boxes and clicks the #replot button, a new scatter plot is generated using Plotly.newPlot(). (serverObject is the Java server that performs the analysis and generates the plot data). Up until this point it all works as it should. The issue appears when the user clicks the #replot button another time, or clicks the #original_plot button (which is meant to replot the original plot).

I have tried calling the Plotly functions directly in my main code, but I get a error stating “r.getAttribute is not a function. (In ‘r.getAttribute(“class”)’, ‘r.getAttribute’ is undefined)”.

Hope this is all clear!

Many thanks in advance for your help.