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

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

VIS-47, advanced setting for angles x-labels added. Default value is ON

File size: 9.5 KB
RevLine 
[1981]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.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       
[1983]11        <!-- jqPlot plugins -->
12        <g:javascript src="jqplot/plugins/jqplot.barRenderer.min.js" />
13        <g:javascript src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js" />
[1991]14        <g:javascript src="jqplot/plugins/jqplot.pointLabels.min.js" />
15        <g:javascript src="jqplot/plugins/jqplot.canvasTextRenderer.min.js" /> 
[2034]16        <g:javascript src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" />
[2070]17    <g:javascript src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js" />
[2034]18    <g:javascript src="jqplot/plugins/jqplot.ohlcRenderer.min.js" />
19    <g:javascript src="jqplot/plugins/jqplot.highlighter.min.js" />
[1991]20
21        <g:javascript src="visualization.js" />
22        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css' />" />
[2003]23    <style type="text/css">
24        /** NEEDED FOR RESOURCES PLUGIN **/
[2051]25        .menu_seperator {background-image: url(${resource(dir: 'images/visualization', file: 'seperator.gif')}); }
[2017]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; }
[2003]28    </style>
[1983]29       
[1981]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>
[2051]42
[1996]43    <div id="data">
[2051]44        <form id="visualizationForm">
45            <div id="top_container">
46
47                <span class="menu_seperator">&nbsp;</span>
48
49                <span class="topmenu_item" id="menu_study">
[2055]50                    <div class="topmenu_item_label"><img src="${fam.icon( name: 'report' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Study<img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />:</div>
51                    <div class="topmenu_item_info">no study selected</div>
[2051]52                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
[2019]53                    <div class="formulier">
[2051]54                        <p class="info">Select a study from the list below.</p>
55                        <p>
[2057]56                            <g:select from="${studies}" size="10" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
[2051]57                        </p>
[2019]58                    </div>
[2051]59                </span>
60
[2055]61                <span class="menu_seperator">&nbsp;</span>
[2051]62
[2055]63                <span class="topmenu_item" id="menu_aggregation">
64                    <span class="topmenu_item_label"><img src="${fam.icon( name: 'server_chart' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Aggregation:</span>
65                    <span class="topmenu_item_info">AVERAGE</span>
66                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
67                    <div class="formulier">
68                        <p class="info">Select a way to aggregate the data.</p>
69                        <p>
70                            <select name="aggregation" size="5" onchange="$('#menu_aggregation').children('.topmenu_item_info').html($(this).val().toUpperCase()); changeVis();">
71                                <option value="average" SELECTED>Average</option>
72                                <option value="count">Count</option>
73                                <option value="median">Median</option>
74                                <option value="none" disabled>No aggregation</option>
75                                <option value="sum">Sum</option>
76                            </select>
77                        </p>
78                    </div>
79                </span>
80
[2051]81                <span class="menu_seperator">&nbsp;</span>
82
83                <span class="topmenu_item" id="menu_advanced">
84                    <span class="topmenu_item_label"><img src="${fam.icon( name: 'cog' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Advanced settings</span>
85                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
[2019]86                    <div class="formulier">
[2055]87                        <table>
88                            <tr>
[2061]89                                <td><label for="autovis">Visualize the data as soon as enough parameters are known.</label></td>
[2055]90                                <td><input type="checkbox" name="autovis" id="autovis" CHECKED/></td>
91                            </tr>
92                            <tr>
[2062]93                                <td><label for="showvalues">Always show values in the graph.<br />(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)</label></td>
94                                <td><input type="checkbox" name="showvalues" id="showvalues" CHECKED onClick="changeVis();"/></td>
[2061]95                            </tr>
[2070]96                            <tr>
97                                <td><label for="anglelabels">Angle labels on the x-axis.<br />(if this box is checked, labels are shown at a 45&deg; angle)</label></td>
98                                <td><input type="checkbox" name="anglelabels" id="anglelabels" CHECKED onClick="changeVis();"/></td>
99                            </tr>
[2055]100                        </table>
[2019]101                    </div>
[2051]102                </span>
103
104                <span class="menu_seperator">&nbsp;</span>
105
106                <span class="topmenu_item" id="message_counter" onClick="; return false;">
107                    <span class="topmenu_item_label"><img src="${fam.icon( name: 'email_error' )}" style="vertical-align: text-bottom; display: inline-block;"/>&nbsp;Messages:</span>
108                    <span class="topmenu_item_info">0</span>
109                    <img src="${fam.icon( name: 'bullet_arrow_down' )}" style="vertical-align: text-bottom; display: inline-block;"/>
[2019]110                    <div class="formulier">
[2051]111                        <p class="info">Messages:</p>
112                        <div id="message_container">
113                        <g:if test="${flash.error}">
114                            <div class="message_box message_error">
115                                ${flash.error.toString().encodeAsHTML()}
116                            </div>
117                        </g:if>
118                        <g:if test="${flash.message}">
119                            <div class="message_box message_warning">
120                                ${flash.message.toString().encodeAsHTML()}
121                            </div>
122                        </g:if>
123                        </div>
[2019]124                    </div>
[2051]125                </span>
[1983]126
[2051]127                <span class="menu_seperator">&nbsp;</span>
128                   
129            </div>
[1996]130
[2051]131            <div id="bottom_container">
[1996]132
[2051]133                <div id="menu_container">
134                    <div class="menu_item" id="menu_column">
135                        <div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
136                        <p class="info">Select a field for the X-Axis from the list below. This field will be visible as columns in the table visualization.</p>
137                        <p>
138                            <select id="columns" name="columns" size="6" onChange="changeFields('menu_column');"></select>
139                        </p>
[2017]140                    </div>
[2051]141                    <div class="menu_item" id="menu_row">
142                        <div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
143                        <p class="info">Select a field for the Y-Axis from the list below. This field will be visible as rows in the table visualization.</p>
144                        <p>
145                            <select id="rows" name="rows" size="6" onChange="changeFields('menu_row');"></select>
146                        </p>
[2017]147                    </div>
[2051]148                    <div class="menu_item" id="menu_vis">
149                        <div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
150                        <p class="info">Select visualization type.</p>
151                        <p>
152                            <select id="types" name="types"  size="3" onChange="changeVis();"></select>
153                        </p>
154                    </div>
155                    <div class="menu_item" id="menu_go">
156                        <button id="button_visualize" onClick="visualize(); return false;" >
157                            VISUALIZE
158                        </button>
159                    </div>
160                </div>
161               
162                <div id="visualization_container">
163                    <div id="visualization"><div style="padding: 30px">Select a study to start.</div>
164                    </div>
165                </div>
[1996]166
[2051]167                <br clear="all"/>
168
[1996]169            </div>
[2051]170        </form>
[1996]171    </div>
[1981]172</body>
173</html>
174
175
176
Note: See TracBrowser for help on using the repository browser.