Changeset 1996
- Timestamp:
- Sep 5, 2011, 5:44:05 PM (11 years ago)
- Location:
- trunk
- Files:
-
- 3 added
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/grails-app/views/visualize/index.gsp
r1991 r1996 32 32 <body> 33 33 34 <h1>Visualize your study</h1> 35 36 <g:if test="${flash.error}"> 37 <div class="errormessage"> 38 ${flash.error.toString().encodeAsHTML()} 39 </div> 40 </g:if> 41 <g:if test="${flash.message}"> 42 <div class="message"> 43 ${flash.message.toString().encodeAsHTML()} 44 </div> 45 </g:if> 46 47 <div id="ajaxError"> 48 </div> 49 50 <p class="explanation"> 51 Choose a study to visualize 52 </p> 34 <div id="data"> 35 <div id="menu_container"> 36 <form id="visualizationForm"> 37 <div class="menu_spacer"> </div> 38 <div class="menu_item menu_item_fill" id="menu_study"> 39 <div class="menu_item_label">Studies <img src="./images/spinner.gif" class="spinner" /></div> 40 <div class="menu_item_info"></div> 41 <div class="formulier"><label for="study">Study</label><g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();" noSelection="${['':'[SELECT OPTION]']}"/></div> 42 </div> 43 <div class="menu_arrow"> </div> 44 <div class="menu_item" id="menu_row"> 45 <div class="menu_item_label">Rows <img src="./images/spinner.gif" class="spinner" /></div> 46 <div class="menu_item_info"></div> 47 <div class="formulier"><label for="rows">Rows</label> <select id="rows" name="rows" onChange="changeFields('menu_row');"></select></div> 48 </div> 49 <div class="menu_item" id="menu_column"> 50 <div class="menu_item_label">Columns <img src="./images/spinner.gif" class="spinner" /></div> 51 <div class="menu_item_info"></div> 52 <div class="formulier"><label for="columns">Columns</label> <select id="columns" name="columns" onChange="changeFields('menu_column');"></select></div> 53 </div> 54 <div class="menu_arrow"> </div> 55 <div class="menu_item" id="menu_vis"> 56 <div class="menu_item_label">Type <img src="./images/spinner.gif" class="spinner" /></div> 57 <div class="menu_item_info"></div> 58 <div class="formulier"><label for="types">Type</label><select id="types" name="types" onChange="changeVis();"></select></div> 59 </div> 60 <div class="menu_arrow"> </div> 61 <div class="menu_item" id="menu_go"> 62 <input type="button" value="Visualize" onClick="visualize();"/><br /><input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div> 63 <div class="menu_spacer"> </div> 64 </form> 65 </div> 53 66 54 <form id="visualizationForm"> 55 <h3><span class="nummer">1</span>Studies</h3> 56 <p> 57 <label>Study</label><g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/> 58 </p> 59 60 <div id="step2"> 61 <h3><span class="nummer">2</span>Variables</h3> 62 <p> 63 <label for="rows">Rows</label> <select id="rows" name="rows" onChange="changeFields();"></select><br /> 64 <label for="columns">Columns</label> <select id="columns" name="columns" onChange="changeFields();"></select> 65 </p> 66 </div> 67 68 <div id="step3"> 69 <h3><span class="nummer">3</span>Visualization type</h3> 70 <p> 71 <label for"types">Type</label><select id="types" name="types"></select> 72 </p> 73 <p> 74 <label> </label><input type="button" value="Visualize" onClick="visualize();"/> 75 </p> 76 </div> 77 </form> 78 79 <div id="visualization"> 80 </div> 67 <div id="visualization_container"> 68 69 <h1>Visualize your study</h1> 70 71 <div id="messages"> 72 <g:if test="${flash.error}"> 73 <div class="errormessage"> 74 ${flash.error.toString().encodeAsHTML()} 75 </div> 76 </g:if> 77 <g:if test="${flash.message}"> 78 <div class="message"> 79 ${flash.message.toString().encodeAsHTML()} 80 </div> 81 </g:if> 82 83 <div id="ajaxError"> 84 </div> 85 </div> 86 87 <div id="visualization"> 88 </div> 89 </div> 90 </div> 81 91 </body> 82 92 </html> -
trunk/web-app/css/visualization.css
r1991 r1996 12 12 label { display: inline-block; zoom: 1; *display: inline; width: 110px; margin-top: 10px; } 13 13 14 #visualizationForm { position: relative; margin: 10px 0; font-size: 11px; } 15 #visualizationForm h3 { font-size: 13px; } 16 #visualizationForm h3 .nummer { display: inline-block; zoom: 1; *display: inline; width: 25px; } 14 table.jqplot-table-legend { width: 100px; } 17 15 18 #visualizationForm p { margin-left: 25px; } 16 #visualization { 17 width: 100%; 18 } 19 19 20 table.jqplot-table-legend { width: 100px; } 20 #messages { 21 width: 840px; 22 height: 60px; 23 overflow: hidden; 24 } 25 26 /** START :: VISUALIZATION MENU **/ 27 28 #data { 29 position: relative; 30 width: 960px; 31 } 32 33 #menu_container { 34 width : 60px; 35 background-color: #ddd; 36 border-top-right-radius: 10px; 37 -moz-border-radius-topright: 10px; 38 -webkit-border-top-right-radius: 10px; 39 border-bottom-right-radius: 10px; 40 -moz-border-radius-bottomright: 10px; 41 -webkit-border-bottom-right-radius: 10px; 42 border-right-style: inset; 43 border-right-width: 5px; 44 z-index: 5; 45 } 46 47 .menu_item { 48 position: relative; 49 width : 88px; 50 margin-right: 4px; 51 padding: 4px; 52 border-top-right-radius: 10px; 53 -moz-border-radius-topright: 10px; 54 -webkit-border-top-right-radius: 10px; 55 border-bottom-right-radius: 10px; 56 -moz-border-radius-bottomright: 10px; 57 -webkit-border-bottom-right-radius: 10px; 58 border-style: solid solid solid none; 59 border-width: 2px; 60 font-size: medium; 61 background-color: #AAAAAA; 62 border-color: #888; 63 z-index: 10; 64 } 65 66 .menu_arrow { 67 background-image: url('../images/visualization/down_arrow.png'); 68 background-repeat: no-repeat; 69 margin: 6px; 70 height: 48px; 71 } 72 73 .menu_spacer { 74 height: 40px; 75 } 76 77 .menu_item_done { 78 background-color: #00CC00; 79 border-color: green; 80 } 81 82 .menu_item_error { 83 background-color: pink; 84 border-color: red; 85 } 86 87 .menu_item_warning { 88 background-color: yellow; 89 border-color: #ffa07a; 90 } 91 92 .menu_item_fill { 93 background-color: #87cefa; 94 border-color: blue; 95 } 96 97 .menu_item_info { 98 font-size: 9px; 99 width: 80px; 100 overflow-x: hidden; 101 } 102 103 .menu_item:hover { 104 background-color: white; 105 } 106 107 #visualization_container { 108 position: absolute; 109 left: 120px; 110 width: 840px; 111 top: 0px; 112 113 } 114 115 .formulier { 116 position: absolute; 117 display: none; 118 left: 140px; 119 top: -2px; 120 width: 500px; 121 height: 100px; 122 border-style: solid; 123 border-color: inherit; 124 border-width: 2px; 125 background: white; 126 padding: 40px; 127 } 128 129 .spinner { 130 display: none; 131 } -
trunk/web-app/js/visualization.js
r1991 r1996 4 4 var visualization = null; 5 5 6 $(document).ready(function() { 7 $(".menu_item").mouseover( 8 function() { 9 $( this ).css("width","150px"); 10 $(this).find("div.formulier").show(); 11 } 12 ).mouseout( 13 function() { 14 $( this ).find("div.formulier").hide(); 15 $( this ).css("width","88px"); 16 } 17 ); 18 }); 19 6 20 /** 7 21 * Retrieve new fields based on the study that the user has selected. 8 22 */ 9 23 function changeStudy() { 24 $( "#menu_study" ).find("div.formulier").hide(); 25 $( "#menu_study" ).find("img.spinner").show(); 26 $( "#menu_study" ).find("div.menu_item_info").html("<br />"+$( '#study option:selected' ).text()); 27 10 28 executeAjaxCall( "getFields", { 11 29 "errorMessage": "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.", … … 13 31 // Remove all previous entries from the list 14 32 $( '#rows, #columns' ).empty(); 33 $( '#rows, #columns' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) ); 15 34 16 35 // Add all fields to the lists 17 $.each( data, function( idx, field ) { 36 var returndata = data.returnData; 37 $.each( returndata, function( idx, field ) { 18 38 $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) ); 19 39 }); 20 40 21 $( "#step2" ).show(); 22 $( "#step3" ).hide(); 41 $( "#menu_study" ).find("img.spinner").hide(); 42 $( "#menu_study" ).removeClass("menu_item_fill"); 43 $( "#menu_study" ).addClass("menu_item_done"); 44 $( "#menu_row" ).addClass("menu_item_fill"); 45 $( "#menu_column" ).addClass("menu_item_fill"); 23 46 } 24 47 }); … … 28 51 * Retrieve the possible visualization types based on the fields that the user has selected. 29 52 */ 30 function changeFields() { 53 function changeFields(divid) { 54 $( "#"+divid ).find("img.spinner").show(); 55 $( "#"+divid ).find("div.formulier").hide(); 56 57 var type = "rows"; 58 if(divid=="menu_column") type = "columns"; 59 60 $( "#"+divid ).find("div.menu_item_info").html("<br />"+$( '#'+type+' option:selected' ).text()); 31 61 executeAjaxCall( "getVisualizationTypes", { 32 62 "errorMessage": "An error occurred while retrieving visualization types from the server. Please try again or contact a system administrator.", 33 63 "success": function( data, textStatus, jqXHR ) { 34 64 // Remove all previous entries from the list 65 var oldSelect = $( '#types option:selected' ).text(); 66 var intSelect = 0; 67 var iOptionNum = 0; 35 68 $( '#types' ).empty(); 36 69 70 $( '#types' ).append( $( "<option>" ).val( "" ).text( "[SELECT OPTION]" ) ); 37 71 // Add all fields to the lists 38 $.each( data, function( idx, field ) { 72 var returndata = data.returnData; 73 74 $.each( returndata, function( idx, field ) { 75 if(field.name==oldSelect) { 76 intSelect = iOptionNum; 77 } 78 iOptionNum = iOptionNum + 1; 39 79 $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) ); 40 80 }); 41 81 42 $( "#step3" ).show(); 82 $( '#types' ).selectedIndex = intSelect; 83 84 $( "#"+divid ).find("img.spinner").hide(); 85 $( "#"+divid ).addClass("menu_item_done"); 86 $( "#"+divid ).removeClass("menu_item_fill"); 87 if(!$( "#menu_vis" ).hasClass("menu_item_done") && $( "#menu_row" ).hasClass("menu_item_done") && $( "#menu_column" ).hasClass("menu_item_done")) { 88 $( "#menu_vis" ).addClass("menu_item_fill"); 89 } 43 90 } 44 91 }); 45 92 } 93 94 /** 95 * 96 */ 97 function changeVis() { 98 $( "#menu_vis" ).find("div.formulier").hide(); 99 $( "#menu_vis" ).removeClass("menu_item_fill"); 100 $( "#menu_vis" ).addClass("menu_item_done"); 101 $( "#menu_vis" ).find("div.menu_item_info").html("<br />"+$( '#types option:selected' ).text()); 102 if($("#autovis").attr("checked")=="checked") { 103 visualize(); 104 } 105 106 } 107 46 108 47 109 /** … … 58 120 59 121 // Handle erroneous data 60 if( !checkCorrectData( data ) ) {122 if( !checkCorrectData( returndata ) ) { 61 123 showError( "Unfortunately the server returned data in a format that we did not expect." ); 62 124 return; … … 67 129 var series = []; 68 130 69 $.each(data.series, function(idx, element ) { 131 132 var returndata = data.returnData; 133 $.each(returndata.series, function(idx, element ) { 70 134 dataPoints[ dataPoints.length ] = element.y; 71 135 series[ series.length ] = { "label": element.name }; 72 136 }); 137 138 var xlabel = returndata[ "xaxis" ].unit=="" ? returndata[ "xaxis" ].title : returndata[ "xaxis" ].title + " (" + returndata[ "xaxis" ].unit + ")"; 139 var ylabel = returndata[ "yaxis" ].unit=="" ? returndata[ "yaxis" ].title : returndata[ "yaxis" ].title + " (" + returndata[ "yaxis" ].unit + ")"; 73 140 74 141 // TODO: create a chart based on the data that is sent by the user and the type of chart … … 92 159 xaxis: { 93 160 renderer: $.jqplot.CategoryAxisRenderer, 94 ticks: data.x,95 label: data[ "xaxis" ].title + " (" + data[ "xaxis" ].unit + ")",161 ticks: returndata.x, 162 label: xlabel, 96 163 labelRenderer: $.jqplot.CanvasAxisLabelRenderer 97 164 }, 98 165 yaxis: { 99 label: data[ "yaxis" ].title + " (" + data[ "yaxis" ].unit + ")",166 label: ylabel, 100 167 labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 101 168 }
Note: See TracChangeset
for help on using the changeset viewer.