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.