diff options
4 files changed, 35 insertions, 18 deletions
diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css new file mode 100644 index 00000000..a0bdc159 --- /dev/null +++ b/wqflask/wqflask/static/new/css/marker_regression.css @@ -0,0 +1,7 @@ +.manhattan_plot_segment +{ + height:400px; + width:150px; + float: right; + clear: none; +}
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee index 2f653f98..3483f7eb 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee +++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee @@ -83,13 +83,16 @@ $ -> @plot_points.push([mb, lrs]) display_graph: -> + div_name = 'manhattan_plot_' + @name + console.log("div_name:", div_name) + x_axis_max = Math.ceil(@max_mb/25) * 25 x_axis_ticks = [] x_tick = 0 while (x_tick <= x_axis_max) x_axis_ticks.push(x_tick) x_tick += 25 - $.jqplot('manhattan_plot', [@plot_points], + $.jqplot(div_name, [@plot_points], title: @name seriesDefaults: showLine: false @@ -116,11 +119,7 @@ $ -> tickOptions: showGridline: false ) - - - - - + class Manhattan_Plot constructor: -> @chromosomes = {} # Hash of chromosomes @@ -141,7 +140,7 @@ $ -> #if mb > @max_mb # @max_mb = mb - #@plot_points.push([mb, result.lrs]) + #@plot_points.push([mb, result.lrs]) display_graphs: -> ### Call display_graph for each chromosome ### @@ -157,11 +156,14 @@ $ -> numbered_keys.sort(sort_number) extra_keys.sort() - keys = numbered_keys + extra_keys + keys = numbered_keys.concat(extra_keys) console.log("keys are:", keys) - for chromosome in key - @chromosomes[chromosome].display_graph() + for key in keys + html = """<div id="manhattan_plot_#{ key }" class="manhattan_plot_segment"></div>""" + console.log("html is:", html) + $("#manhattan_plots").append(html) + @chromosomes[key].display_graph() diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js index 7553721c..0844cc12 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.js +++ b/wqflask/wqflask/static/new/javascript/marker_regression.js @@ -88,7 +88,9 @@ }; Chromosome.prototype.display_graph = function() { - var x_axis_max, x_axis_ticks, x_tick; + var div_name, x_axis_max, x_axis_ticks, x_tick; + div_name = 'manhattan_plot_' + this.name; + console.log("div_name:", div_name); x_axis_max = Math.ceil(this.max_mb / 25) * 25; x_axis_ticks = []; x_tick = 0; @@ -96,7 +98,7 @@ x_axis_ticks.push(x_tick); x_tick += 25; } - return $.jqplot('manhattan_plot', [this.plot_points], { + return $.jqplot(div_name, [this.plot_points], { title: this.name, seriesDefaults: { showLine: false, @@ -164,7 +166,7 @@ /* Call display_graph for each chromosome */ - var chromosome, extra_keys, key, keys, numbered_keys, _i, _len, _results; + var extra_keys, html, key, keys, numbered_keys, _i, _len, _results; numbered_keys = []; extra_keys = []; for (key in this.chromosomes) { @@ -176,12 +178,15 @@ } numbered_keys.sort(sort_number); extra_keys.sort(); - keys = numbered_keys + extra_keys; + keys = numbered_keys.concat(extra_keys); console.log("keys are:", keys); _results = []; - for (_i = 0, _len = key.length; _i < _len; _i++) { - chromosome = key[_i]; - _results.push(this.chromosomes[chromosome].display_graph()); + for (_i = 0, _len = keys.length; _i < _len; _i++) { + key = keys[_i]; + html = "<div id=\"manhattan_plot_" + key + "\" class=\"manhattan_plot_segment\"></div>"; + console.log("html is:", html); + $("#manhattan_plots").append(html); + _results.push(this.chromosomes[key].display_graph()); } return _results; }; diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index 68effbd5..b052d4a3 100644 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -2,6 +2,7 @@ {% block title %}Marker Regression{% endblock %} {% block css %} <link rel="stylesheet" type="text/css" href="/static/packages/jqplot/jquery.jqplot.min.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" /> {% endblock %} {% block content %} <!-- Start of body --> @@ -14,7 +15,9 @@ </div> </header> - <div id="manhattan_plot" style="height:400px;width:150px; "></div> + <!--<div id="manhattan_plot_1" style="height:400px;width:150px; "></div>--> + <div id="manhattan_plots"></div> + <div id="permutation_histogram" style="height:400px;width:900px; "></div> |