Context Navigation

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.

Download in other formats:

Original Format