source: trunk/grails-app/views/visualize/index.gsp

Last change on this file was 2135, checked in by tjeerd@…, 11 years ago

VIS-75 and VIS-33, most boxplot issues should be resolved now

File size: 11.0 KB
Line 
1<html>
2<head>
3        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
4        <meta name="layout" content="main"/>
5        <title>Visualization</title>
6       
7        <!--[if lt IE 9]><g:javascript src="jqplot/excanvas.min.js" /><![endif]-->
8        <g:javascript src="jqplot/jquery.jqplot.min.js" />
9        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='jquery.jqplot.min.css' />" />
10       
11        <!-- jqPlot plugins -->
12        <g:javascript src="jqplot/plugins/jqplot.barRenderer.min.js" />
13        <g:javascript src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js" />
14        <g:javascript src="jqplot/plugins/jqplot.pointLabels.min.js" />
15        <g:javascript src="jqplot/plugins/jqplot.canvasTextRenderer.min.js" /> 
16        <g:javascript src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" />
17    <g:javascript src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js" />
18    <g:javascript src="jqplot/plugins/jqplot.boxplotRenderer.js" />
19    <g:javascript src="jqplot/plugins/jqplot.highlighter.min.js" />
20
21        <g:javascript src="visualization.js" />
22        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css'/>"/>
23    <style type="text/css">
24        /** NEEDED FOR RESOURCES PLUGIN **/
25        .menu_seperator {background-image: url(${resource(dir: 'images/visualization', file: 'seperator.gif')}); }
26        .message_error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 5px no-repeat; }
27        .message_warning { background: #eee url(${fam.icon( name: 'information' )}) 10px 5px no-repeat; }
28    </style>
29       
30        <script type="text/javascript">
31                // We store urls here because they depend on the grails configuration.
32                // This way, the URLs are always correct
33                var visualizationUrls = {
34                        "getStudies": "<g:createLink action="getStudies" />",
35                        "getFields": "<g:createLink action="getFields" />",
36                        "getVisualizationTypes": "<g:createLink action="getVisualizationTypes" />",
37                        "getData": "<g:createLink action="getData" />"
38                };
39        </script>
40</head>
41<body>
42
43    <div id="data">
44        <form id="visualizationForm">
45
46            <div id="bottom_container">
47
48                <div id="menu_container">
49                    <div class="menu_item">
50                        <div class="menu_header">
51                            <span class="menu_header_count menu_fill">1</span>
52                            <span class="menu_header_label">Study <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
53                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 1); return false;">clear</a>)</span>
54                            <div class="block_variable">
55                                <g:select from="${studies}" optionKey="id" id="select_study" name="study" onChange="changeStudy();" noSelection="${['':'Select One...']}"/>
56                            </div>
57                        </div>
58                        <div class="menu_header">
59                            <span class="menu_header_count">2</span>
60                            <span class="menu_header_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
61                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 2); return false;">clear</a>)</span>
62                            <div class="block_variable">
63                                <select id="select_columns" name="columns" onChange="changeFields('select_columns');"></select>
64                            </div>
65                        </div>
66                        <div class="menu_header">
67                            <span class="menu_header_count">3</span>
68                            <span class="menu_header_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
69                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 3); return false;">clear</a>)</span>
70                            <div class="block_variable">
71                                <select id="select_rows" name="rows" onChange="changeFields('select_rows');"></select>
72                            </div>
73                        </div>
74                        <div class="menu_header">
75                            <span class="menu_header_count">4</span>
76                            <span class="menu_header_label"><span style="font-size: small">OPTIONAL:</span> Group by <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
77                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 4); return false;">clear</a>)</span>
78                            <div class="block_variable">
79                                <select id="select_groups" name="groups" onChange="changeFields('select_groups');"></select>
80                            </div>
81                        </div>
82                        <div class="menu_header">
83                            <span class="menu_header_count">5</span>
84                            <span class="menu_header_label">Aggregation <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
85                            <div class="block_variable" id="select_aggregation">
86                                <label for="aggr_sum">Sum</label><input type="radio" name="aggregation" id="aggr_sum" value="sum" onClick="changeRadio(this);"/>
87                                <label for="aggr_count">Count</label><input type="radio" name="aggregation" id="aggr_count" value="count" onClick="changeRadio(this);"/>
88                                <label for="aggr_average">Average</label><input type="radio" name="aggregation" id="aggr_average" value="average" onClick="changeRadio(this);"/>
89                                <label for="aggr_median">Median</label><input type="radio" name="aggregation" id="aggr_median" value="median" onClick="changeRadio(this);"/>
90                                <label for="aggr_none">No Aggregation</label><input type="radio" name="aggregation" id="aggr_none" value="none" onClick="changeRadio(this);"/>
91                            </div>
92                        </div>
93                        <div class="menu_header">
94                            <span class="menu_header_count">6</span>
95                            <span class="menu_header_label">Visualization type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
96                            <div class="block_variable" id="select_types">
97                                <label for="vis_barchart">Barchart</label><input type="radio" name="types" id="vis_barchart" value="barchart" onClick="changeRadio(this);"/>
98                                <label for="vis_horizontal_barchart">Horizontal barchart</label><input type="radio" name="types" id="vis_horizontal_barchart" value="horizontal_barchart" onClick="changeRadio(this);"/>
99                                <label for="vis_linechart">Linechart</label><input type="radio" name="types" id="vis_linechart" value="linechart" onClick="changeRadio(this);"/>
100                                <label for="vis_scatterplot">Scatterplot</label><input type="radio" name="types" id="vis_scatterplot" value="scatterplot" onClick="changeRadio(this);"/>
101                                <label for="vis_table">Table</label><input type="radio" name="types" id="vis_table" value="table" onClick="changeRadio(this);"/>
102                                <label for="vis_boxplot">Boxplot</label><input type="radio" name="types" id="vis_boxplot" value="boxplot" onClick="changeRadio(this);"/>
103                            </div>
104                        </div>
105                    </div>
106                    <div class="menu_item" id="menu_go">
107                        <button id="button_visualize" onClick="visualize(); return false;" >
108                            <img src="${resource(dir: 'images/ajaxflow', file: 'spacer.gif')}" class="spinner" />
109                            VISUALIZE
110                            <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />
111                        </button>
112                    </div>
113
114                    <div class="settings">
115                        <a href="#" onclick="$('#dialog_advanced_settings').dialog('open'); return false;"><img src="${fam.icon( name: 'cog' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;advanced settings</a>
116                        <br />
117                        <a href="#" onclick="$('#dialog_messages').dialog('open'); return false;"><img src="${fam.icon( name: 'email_error' )}" style="vertical-align: text-bottom; display: inline-block;"/><span id="messages_link">&nbsp;0 messages</span></a>
118                    </div>
119
120                </div>
121
122               
123                <div id="visualization_container">
124                    <div id="visualization"></div>
125                </div>
126
127                <br clear="all"/>
128
129            </div>
130
131            <div id="dialog_messages">
132                <p class="info">Messages:</p>
133                <div id="message_container">
134                <g:if test="${flash.error}">
135                    <div class="message_box message_error">
136                        ${flash.error.toString().encodeAsHTML()}
137                    </div>
138                </g:if>
139                <g:if test="${flash.message}">
140                    <div class="message_box message_warning">
141                        ${flash.message.toString().encodeAsHTML()}
142                    </div>
143                </g:if>
144                </div>
145            </div>
146             <div id="dialog_advanced_settings">
147                <table>
148                    <tr>
149                        <td><label for="autovis">Visualize the data as soon as enough parameters are known.</label></td>
150                        <td><input type="checkbox" name="autovis" id="autovis" CHECKED/></td>
151                    </tr>
152                    <tr>
153                        <td><label for="showvalues">Always show values in the graph.<br /><span class="settingInfo">(if this box is unchecked, value's are only shown when you hover over a datapoint. Note that hover on a barchart with value 0 isn't possible)</span></label></td>
154                        <td><input type="checkbox" name="showvalues" id="showvalues" CHECKED onClick="changeVis();"/></td>
155                    </tr>
156                    <tr>
157                        <td><label for="anglelabels">Angle labels on the x-axis.<br /><span class="settingInfo">(if this box is checked, labels are shown at a 45&deg; angle)</span></label></td>
158                        <td><input type="checkbox" name="anglelabels" id="anglelabels" CHECKED onClick="changeVis();"/></td>
159                    </tr>
160                    <tr>
161                        <td><label for="legendplacement">Place legend outside the graph.<br /><span class="settingInfo">(legend is only shown when the group-by option is used)</span></label></td>
162                        <td><input type="checkbox" name="legendplacement" id="legendplacement" CHECKED onClick="changeVis();"/></td>
163                    </tr>
164                </table>
165            </div>
166        </form>
167    </div>
168</body>
169</html>
170
171
172
Note: See TracBrowser for help on using the repository browser.