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

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

First "working" prototype of the visualization controller

File size: 6.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.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        <script type="text/javascript">
12                // We store urls here because they depend on the grails configuration.
13                // This way, the URLs are always correct
14                var visualizationUrls = {
15                        "getStudies": "<g:createLink action="getStudies" />",
16                        "getFields": "<g:createLink action="getFields" />",
17                        "getVisualizationTypes": "<g:createLink action="getVisualizationTypes" />",
18                        "getData": "<g:createLink action="getData" />"
19                };
20
21                function showError( message ) {
22                        $( '#ajaxError' ).text( message );
23                        $( '#ajaxError' ).show();
24                }
25
26                /**
27                 * Gathers data for the given request type from the form elements on the page
28                 * @param type  String  Can be 'getStudies', 'getFields', 'getVisualizationType' or 'getData'
29                 */
30                function gatherData( type ) {
31                        var data = new Array();
32               
33                        // different types of request require different data arrays
34                        // However, some data is required for all types. For that reason,
35                        // the fallthrough option in the switch statement is used.
36                        switch( type ) {
37                                case "getData":
38                                        var typeElement = $( '#type' );
39                                        data[ "type" ] = { "id": typeElement.val() };                                   
40                                case "getVisualizationTypes":
41                                        var rowsElement = $( '#rows' );
42                                        var columnsElement = $( '#columns' );
43                                        data[ "rows" ] = [
44                                                { "id": rowsElement.val() }
45                                        ];                                     
46                                        data[ "columns" ] = [
47                                                        { "id": columnsElement.val() }
48                                        ];                                     
49                                case "getFields":
50                                        var studyElement = $( '#study' );
51                                        data[ "studies" ] = [
52                                                { "id": studyElement.val() }
53                                        ];                                     
54                                       
55                                case "getStudies":
56                        }
57
58                        return data;
59                }
60               
61                function changeStudy() {
62                        var data = gatherData( "getFields" );
63                       
64                        // Retrieve a new list of fields from the controller
65                        // based on the study we chose
66                        $.ajax({
67                                url: visualizationUrls[ "getFields" ],
68                                data: data,
69                                dataType: "json",
70                                success: function( data, textStatus, jqXHR ) {
71                                        // Remove all previous entries from the list
72                                        $( '#rows, #columns' ).empty();
73
74                                        // Add all fields to the lists
75                                        $.each( data, function( idx, field ) {
76                                                $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
77                                        });
78                                       
79                                        $( "#step2" ).show();
80                                        $( "#step3" ).hide();
81                                },
82                                error: function( jqXHR, textStatus, errorThrown ) {
83                                        // An error occurred while retrieving fields from the server
84                                        showError( "An error occurred while retrieving variables from the server. Please try again or contact a system administrator." );
85                                }
86                        });
87                }
88
89                function changeFields() {
90                        var data = gatherData( "getVisualizationTypes" );
91                       
92                        // Retrieve a new list of visualization types from the controller
93                        // based on the study and fields we chose
94                        $.ajax({
95                                url: visualizationUrls[ "getVisualizationTypes" ],
96                                data: data,
97                                dataType: "json",
98                                success: function( data, textStatus, jqXHR ) {
99                                        // Remove all previous entries from the list
100                                        $( '#types' ).empty();
101
102                                        // Add all fields to the lists
103                                        $.each( data, function( idx, field ) {
104                                                $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) );
105                                        });
106
107                                        $( "#step3" ).show();
108                                },
109                                error: function( jqXHR, textStatus, errorThrown ) {
110                                        // An error occurred while retrieving fields from the server
111                                        showError( "An error occurred while retrieving visualization types from the server. Please try again or contact a system administrator." );
112                                }
113                        });
114                }
115
116                function visualize() {
117                        var data = gatherData( "getData" );
118
119                        // Retrieve the data for visualization from the controller
120                        // based on the study, fields and type we chose
121                        $.ajax({
122                                url: visualizationUrls[ "getData" ],
123                                data: data,
124                                dataType: "json",
125                                success: function( data, textStatus, jqXHR ) {
126                                        // TODO: create a chart based on the data that is sent by the user and the type of chart
127                                        // chosen by the user
128                                       
129                                        var plot1 = $.jqplot ('visualization', data);
130                                        $( "#visualization" ).show();
131                                },
132                                error: function( jqXHR, textStatus, errorThrown ) {
133                                        // An error occurred while retrieving fields from the server
134                                        showError( "An error occurred while retrieving data from the server. Please try again or contact a system administrator." );
135                                }
136                        });
137                       
138                }
139               
140        </script>
141        <style type="text/css">
142                #step2, #step3 { display: none; }
143                #ajaxError {
144                        display: none;
145                        border: 1px solid #f99; /* #006dba; */
146                        margin-bottom: 10px;
147                        margin-top: 10px;
148               
149                        background: #ffe0e0 url(${fam.icon( name: 'error' )}) 10px 10px no-repeat;
150                        padding: 10px 10px 10px 33px;           
151        </style>
152</head>
153<body>
154       
155        <h1>Visualize your study</h1>
156       
157        <g:if test="${flash.error}">
158                <div class="errormessage">
159                        ${flash.error.toString().encodeAsHTML()}
160                </div>
161        </g:if>
162        <g:if test="${flash.message}">
163                <div class="message">
164                        ${flash.message.toString().encodeAsHTML()}
165                </div>
166        </g:if>
167       
168        <div id="ajaxError">
169        </div> 
170       
171        <form id="visualizationForm">
172                <h3><span class="nummer">1</span>Studies</h3>
173                <p class="explanation">
174                        Choose a study to visualize
175                </p>
176                <g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
177               
178                <div id="step2">
179                        <h3><span class="nummer">2</span>Variables</h3>
180                        <p>
181                                <label for="rows">Rows</label> <select id="rows" name="rows" onChange="changeFields();"></select>
182                                <label for="columns">Columns</label> <select id="columns" name="columns" onChange="changeFields();"></select>
183                        </p>
184                </div>
185       
186                <div id="step3">
187                        <h3><span class="nummer">3</span>Visualization type</h3>
188                        <p>
189                                <select id="types" name="types"></select>
190                                <input type="button" value="Visualize" onClick="visualize();"/>
191                        </p>
192                </div>
193        </form>
194       
195        <div id="visualization">
196        </div>
197</body>
198</html>
199
200
201
Note: See TracBrowser for help on using the repository browser.