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

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

VIS-33, first attempt. Using CanvasXpress? for the boxplots

File size: 11.2 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.ohlcRenderer.min.js" />
19    <g:javascript src="jqplot/plugins/jqplot.highlighter.min.js" />
20
21    <!-- canvasXpress for boxplots -->
22    <!--[if IE]><g:javascript src="canvasxpress/excanvas.js" /><![endif]-->
23    <g:javascript src="canvasxpress/canvasXpress.min.js" />
24
25        <g:javascript src="visualization.js" />
26        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css'/>"/>
27    <style type="text/css">
28        /** NEEDED FOR RESOURCES PLUGIN **/
29        .menu_seperator {background-image: url(${resource(dir: 'images/visualization', file: 'seperator.gif')}); }
30        .message_error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 5px no-repeat; }
31        .message_warning { background: #eee url(${fam.icon( name: 'information' )}) 10px 5px no-repeat; }
32    </style>
33       
34        <script type="text/javascript">
35                // We store urls here because they depend on the grails configuration.
36                // This way, the URLs are always correct
37                var visualizationUrls = {
38                        "getStudies": "<g:createLink action="getStudies" />",
39                        "getFields": "<g:createLink action="getFields" />",
40                        "getVisualizationTypes": "<g:createLink action="getVisualizationTypes" />",
41                        "getData": "<g:createLink action="getData" />"
42                };
43        </script>
44</head>
45<body>
46
47    <div id="data">
48        <form id="visualizationForm">
49
50            <div id="bottom_container">
51
52                <div id="menu_container">
53                    <div class="menu_item">
54                        <div class="menu_header">
55                            <span class="menu_header_count menu_fill">1</span>
56                            <span class="menu_header_label">Study <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
57                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 1); return false;">clear</a>)</span>
58                            <div class="block_variable">
59                                <g:select from="${studies}" optionKey="id" id="select_study" name="study" onChange="changeStudy();" noSelection="${['':'Select One...']}"/>
60                            </div>
61                        </div>
62                        <div class="menu_header">
63                            <span class="menu_header_count">2</span>
64                            <span class="menu_header_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
65                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 2); return false;">clear</a>)</span>
66                            <div class="block_variable">
67                                <select id="select_columns" name="columns" onChange="changeFields('select_columns');"></select>
68                            </div>
69                        </div>
70                        <div class="menu_header">
71                            <span class="menu_header_count">3</span>
72                            <span class="menu_header_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
73                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 3); return false;">clear</a>)</span>
74                            <div class="block_variable">
75                                <select id="select_rows" name="rows" onChange="changeFields('select_rows');"></select>
76                            </div>
77                        </div>
78                        <div class="menu_header">
79                            <span class="menu_header_count">4</span>
80                            <span class="menu_header_label">Group by <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
81                            <span class="menu_header_clear">(<a href='#' onclick="clearSelect(this, 4); return false;">clear</a>)</span>
82                            <div class="block_variable">
83                                <select id="select_groups" name="groups" onChange="changeFields('select_groups');"></select>
84                            </div>
85                        </div>
86                        <div class="menu_header">
87                            <span class="menu_header_count">5</span>
88                            <span class="menu_header_label">Aggregation <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
89                            <div class="block_variable" id="select_aggregation">
90                                <label for="aggr_sum">Sum</label><input type="radio" name="aggregation" id="aggr_sum" value="sum" onClick="changeRadio(this);"/>
91                                <label for="aggr_count">Count</label><input type="radio" name="aggregation" id="aggr_count" value="count" onClick="changeRadio(this);"/>
92                                <label for="aggr_average">Average</label><input type="radio" name="aggregation" id="aggr_average" value="average" onClick="changeRadio(this);"/>
93                                <label for="aggr_median">Median</label><input type="radio" name="aggregation" id="aggr_median" value="median" onClick="changeRadio(this);"/>
94                                <label for="aggr_none">No Aggregation</label><input type="radio" name="aggregation" id="aggr_none" value="none" onClick="changeRadio(this);"/>
95                            </div>
96                        </div>
97                        <div class="menu_header">
98                            <span class="menu_header_count">6</span>
99                            <span class="menu_header_label">Visualization type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></span>
100                            <div class="block_variable" id="select_types">
101                                <label for="vis_barchart">Barchart</label><input type="radio" name="types" id="vis_barchart" value="barchart" onClick="changeRadio(this);"/>
102                                <label for="vis_horizontal_barchart">Horizontal barchart</label><input type="radio" name="types" id="vis_horizontal_barchart" value="horizontal_barchart" onClick="changeRadio(this);"/>
103                                <label for="vis_linechart">Linechart</label><input type="radio" name="types" id="vis_linechart" value="linechart" onClick="changeRadio(this);"/>
104                                <label for="vis_scatterplot">Scatterplot</label><input type="radio" name="types" id="vis_scatterplot" value="scatterplot" onClick="changeRadio(this);"/>
105                                <label for="vis_table">Table</label><input type="radio" name="types" id="vis_table" value="table" onClick="changeRadio(this);"/>
106                                <label for="vis_boxplot">Boxplot</label><input type="radio" name="types" id="vis_boxplot" value="boxplot" onClick="changeRadio(this);"/>
107                            </div>
108                        </div>
109                    </div>
110                    <div class="menu_item" id="menu_go">
111                        <button id="button_visualize" onClick="visualize(); return false;" >
112                            <img src="${resource(dir: 'images/ajaxflow', file: 'spacer.gif')}" class="spinner" />
113                            VISUALIZE
114                            <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />
115                        </button>
116                    </div>
117
118                    <div class="settings">
119                        <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>
120                        <br />
121                        <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>
122                    </div>
123
124                </div>
125
126               
127                <div id="visualization_container">
128                    <div id="visualization"></div>
129                    <br clear="all" />
130                </div>
131
132                <br clear="all"/>
133
134            </div>
135
136            <div id="dialog_messages">
137                <p class="info">Messages:</p>
138                <div id="message_container">
139                <g:if test="${flash.error}">
140                    <div class="message_box message_error">
141                        ${flash.error.toString().encodeAsHTML()}
142                    </div>
143                </g:if>
144                <g:if test="${flash.message}">
145                    <div class="message_box message_warning">
146                        ${flash.message.toString().encodeAsHTML()}
147                    </div>
148                </g:if>
149                </div>
150            </div>
151             <div id="dialog_advanced_settings">
152                <table>
153                    <tr>
154                        <td><label for="autovis">Visualize the data as soon as enough parameters are known.</label></td>
155                        <td><input type="checkbox" name="autovis" id="autovis" CHECKED/></td>
156                    </tr>
157                    <tr>
158                        <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>
159                        <td><input type="checkbox" name="showvalues" id="showvalues" CHECKED onClick="changeVis();"/></td>
160                    </tr>
161                    <tr>
162                        <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>
163                        <td><input type="checkbox" name="anglelabels" id="anglelabels" CHECKED onClick="changeVis();"/></td>
164                    </tr>
165                    <tr>
166                        <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>
167                        <td><input type="checkbox" name="legendplacement" id="legendplacement" CHECKED onClick="changeVis();"/></td>
168                    </tr>
169                </table>
170            </div>
171        </form>
172    </div>
173</body>
174</html>
175
176
177
Note: See TracBrowser for help on using the repository browser.