function ScatterplotDialog(column) { this._column = column; this._plot_method = "lin"; this._createDialog(); this._active = true; } ScatterplotDialog.prototype._createDialog = function() { var self = this; var frame = DialogSystem.createDialog(); frame.width("1100px"); var header = $('
').addClass("dialog-header").text('Scatterplot Matrix' + ((typeof this._column == "undefined") ? "" : " (focusing on '" + this._column + "')")).appendTo(frame); var body = $('
').addClass("dialog-body").appendTo(frame); var footer = $( '
' + '' + '' + '' + '
' + '
' ).appendTo(frame); $('
' + '
' + '
').appendTo(body); var left_footer = footer.find(".left"); var right_footer = footer.find(".right"); $('').text("Close").click(function() { self._dismiss(); }).appendTo(right_footer); $('
' + '' + '' + '' + '' + '
' + '
' + '' + '' + '
' + '
' + '
' + '' + '' + '' + '
' + '
' + '
' + '' + '' + '' + '
' + '
' + '
').appendTo(left_footer); this._elmts = DOM.bind(frame); this._elmts.plotSelector.buttonset().change(function() { self._plot_method = $(this).find("input:checked").val(); self._renderMatrix(); }); this._elmts.rotationSelector.buttonset().change(function() { self._rotation = $(this).find("input:checked").val(); self._renderMatrix(); }); this._elmts.dotSelector.buttonset().change(function() { var dot_size = $(this).find("input:checked").val(); if (dot_size == "small") { self._dot_size = 0.4; } else if (dot_size == "big") { self._dot_size = 1.4; } else { self._dot_size = 0.8; } self._renderMatrix(); }); this._level = DialogSystem.showDialog(frame); this._renderMatrix(); }; ScatterplotDialog.prototype._renderMatrix = function() { var self = this; var container = this._elmts.tableContainer.html( '
Processing...
' ); if (theProject.columnModel.columns.length > 0) { var params = { project: theProject.id }; $.getJSON("/command/get-columns-info?" + $.param(params),function(data) { if (data === null || typeof data.length == 'undefined') { container.html("Error calling 'get-columns-info'"); return; } var columns = []; for (var i = 0; i < data.length; i++) { if (data[i].is_numeric) { columns.push(data[i]); } } if (typeof self._plot_size == 'undefined') { self._plot_size = Math.max(Math.floor(500 / columns.length / 5) * 5,20); self._dot_size = 0.8; } var table = ''; var createScatterplot = function(cx, cy) { var title = cx + ' (x) vs. ' + cy + ' (y)'; var link = ''; var plotter_params = { 'cx' : cx, 'cy' : cy, 'l' : self._plot_size, 'dot': self._dot_size, 'dim_x': self._plot_method, 'dim_y': self._plot_method, 'r': self._rotation }; var params = { project: theProject.id, engine: JSON.stringify(ui.browsingEngine.getJSON()), plotter: JSON.stringify(plotter_params) }; var url = "/command/get-scatterplot?" + $.param(params); var attrs = [ 'width="' + self._plot_size + '"', 'height="' + self._plot_size + '"', 'src2="' + url + '"' ]; return link + ''; }; for (var i = 0; i < columns.length; i++) { table += ''; var div_class = "column_header"; if (columns[i].name == self._column) div_class += " current_column"; table += ''; for (var j = i + 1; j < columns.length; j++) { var cx = columns[i].name; var cy = columns[j].name; var div_class = "scatterplot"; var current = cx == self._column || cy == self._column; if (current) div_class += " current_column"; table += ''; } table += ''; } table += "
' + columns[i].name + '
' + createScatterplot(cx,cy) + '
"; var width = container.width(); container.empty().css("width", width + "px").html(table); container.find("a").click(function() { var options = { "name" : $(this).attr("title"), "cx" : $(this).attr("cx"), "cy" : $(this).attr("cy"), "l" : 150, "ex" : "value", "ey" : "value", "dot" : self._dot_size, "dim_x" : self._plot_method, "dim_y" : self._plot_method, 'r': self._rotation }; ui.browsingEngine.addFacet("scatterplot", options); self._dismiss(); }); var load_images = function(data) { if (self._active) { data.batch = 0; var end = Math.min(data.index + data.batch_size,data.images.length); for (; data.index < end; data.index++) { load_image(data); } } }; var load_image = function(data) { var img = $(data.images[data.index]); var src2 = img.attr("src2"); if (src2) { img.attr("src", src2); img.removeAttr("src2"); img.load(function() { data.batch++; if (data.batch == data.batch_size) { load_images(data); } }); } }; load_images({ index : 0, batch_size: 4, images : container.find(".scatterplot img") }); }); } else { container.html( '
There are no columns in this dataset
' ); } }; ScatterplotDialog.prototype._dismiss = function() { this._active = false; DialogSystem.dismissUntil(this._level - 1); };