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

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

VIS-41. Changed default behaviour: values are always shown, hover can be activated in the advanced settings.

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