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

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

jqPlot boxplot (VIS-33) added. some minor issues remain (see comment of VIS-33)

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">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                    <br clear="all" />
126                </div>
127
128                <br clear="all"/>
129
130            </div>
131
132            <div id="dialog_messages">
133                <p class="info">Messages:</p>
134                <div id="message_container">
135                <g:if test="${flash.error}">
136                    <div class="message_box message_error">
137                        ${flash.error.toString().encodeAsHTML()}
138                    </div>
139                </g:if>
140                <g:if test="${flash.message}">
141                    <div class="message_box message_warning">
142                        ${flash.message.toString().encodeAsHTML()}
143                    </div>
144                </g:if>
145                </div>
146            </div>
147             <div id="dialog_advanced_settings">
148                <table>
149                    <tr>
150                        <td><label for="autovis">Visualize the data as soon as enough parameters are known.</label></td>
151                        <td><input type="checkbox" name="autovis" id="autovis" CHECKED/></td>
152                    </tr>
153                    <tr>
154                        <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>
155                        <td><input type="checkbox" name="showvalues" id="showvalues" CHECKED onClick="changeVis();"/></td>
156                    </tr>
157                    <tr>
158                        <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>
159                        <td><input type="checkbox" name="anglelabels" id="anglelabels" CHECKED onClick="changeVis();"/></td>
160                    </tr>
161                    <tr>
162                        <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>
163                        <td><input type="checkbox" name="legendplacement" id="legendplacement" CHECKED onClick="changeVis();"/></td>
164                    </tr>
165                </table>
166            </div>
167        </form>
168    </div>
169</body>
170</html>
171
172
173
Note: See TracBrowser for help on using the repository browser.