diff options
| -rw-r--r-- | wqflask/wqflask/correlation/corr_scatter_plot.py | 4 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/corr_scatter_plot.html | 84 |
2 files changed, 66 insertions, 22 deletions
diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py index dd98c7d5..f7fbffd2 100644 --- a/wqflask/wqflask/correlation/corr_scatter_plot.py +++ b/wqflask/wqflask/correlation/corr_scatter_plot.py @@ -29,7 +29,7 @@ class CorrScatterPlot(object): try: circle_color = params['circle_color'] except: - circle_color = 'steelblue' + circle_color = '#3D85C6' self.circle_color = circle_color try: @@ -41,7 +41,7 @@ class CorrScatterPlot(object): try: line_color = params['line_color'] except: - line_color = 'red' + line_color = '#FF0000' self.line_color = line_color try: diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html index dd9168a8..490024ec 100644 --- a/wqflask/wqflask/templates/corr_scatter_plot.html +++ b/wqflask/wqflask/templates/corr_scatter_plot.html @@ -6,6 +6,7 @@ <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" /> + <link rel="stylesheet" type="text/css" href="http://bgrins.github.io/spectrum/spectrum.css" /> {% endblock %} {% block content %} @@ -25,24 +26,12 @@ <td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td> </tr> <tr> - <td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td> - <td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td> - <td> - <select name="circle_color" style="width: 100px;"> - <option value="red">Red</option> - <option value="green">Green</option> - <option value="blue">Blue</option> - </select> - </td> - <td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td> - <td> - <select name="line_color" style="width: 100px;"> - <option value="red">Red</option> - <option value="green">Green</option> - <option value="blue">Blue</option> - </select> - </td> - <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td> + <td style="vertical-align:middle;"><input type="text" name="width" value="{{width}}" style="width: 100px; margin: auto;"></td> + <td style="vertical-align:middle;"><input type="text" name="height" value="{{height}}" style="width: 100px; margin: auto;"></td> + <td style="vertical-align:middle;"><input type="text" name="circle_color" id="circle_color" /></td> + <td style="vertical-align:middle;"><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px; margin: auto;"></td> + <td style="vertical-align:middle;"><input type="text" name="line_color" id="line_color" /></td> + <td style="vertical-align:middle;"><input type="text" name="line_width" value="{{line_width}}" style="width: 100px; margin: auto;"></td> </tr> </table> </form> @@ -51,9 +40,64 @@ {% block js %} <script> - js_data = {{ js_data | safe }} - </script> + js_data = {{ js_data | safe }}; + </script> <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> + <script language="javascript" type="text/javascript" src="http://bgrins.github.io/spectrum/spectrum.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script> <script language="javascript" type="text/javascript" src="/static/new/javascript/corr_scatter_plot.js"></script> + <script> + $("#circle_color").spectrum({ + color: "{{circle_color}}", + showInput: true, + className: "circle_color", + showInitial: true, + showPalette: true, + showSelectionPalette: true, + maxPaletteSize: 10, + preferredFormat: "hex", + localStorageKey: "circle_color", + palette: [ + ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"], + ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", + "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], + ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", + "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", + "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", + "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", + "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", + "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", + "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", + "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", + "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", + "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] + ] + }); + $("#line_color").spectrum({ + color: "{{line_color}}", + showInput: true, + className: "line_color", + showInitial: true, + showPalette: true, + showSelectionPalette: true, + maxPaletteSize: 10, + preferredFormat: "hex", + localStorageKey: "line_color", + palette: [ + ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"], + ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", + "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], + ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", + "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", + "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", + "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", + "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", + "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", + "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", + "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", + "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", + "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] + ] + }); + </script> {% endblock %}
\ No newline at end of file |