Changeset 1991 for trunk/grails-app/views/visualize/index.gsp
- Timestamp:
- Sep 2, 2011, 12:37:09 PM (11 years ago)
- File:
-
- 1 edited
-
trunk/grails-app/views/visualize/index.gsp (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/grails-app/views/visualize/index.gsp
r1983 r1991 12 12 <g:javascript src="jqplot/plugins/jqplot.barRenderer.min.js" /> 13 13 <g:javascript src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js" /> 14 <g:javascript src="jqplot/src/plugins/jqplot.pointLabels.min.js" /> 15 <g:javascript src="jqplot/src/plugins/jqplot.canvasTextRenderer.min.js" /> 16 <g:javascript src="jqplot/src/plugins/jqplot.canvasAxisLabelRenderer.min.js" /> 14 <g:javascript src="jqplot/plugins/jqplot.pointLabels.min.js" /> 15 <g:javascript src="jqplot/plugins/jqplot.canvasTextRenderer.min.js" /> 16 <g:javascript src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js" /> 17 18 <g:javascript src="visualization.js" /> 19 <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css' />" /> 17 20 18 21 <script type="text/javascript"> … … 25 28 "getData": "<g:createLink action="getData" />" 26 29 }; 27 28 function showError( message ) {29 $( '#ajaxError' ).text( message );30 $( '#ajaxError' ).show();31 }32 33 /**34 * Gathers data for the given request type from the form elements on the page35 * @param type String Can be 'getStudies', 'getFields', 'getVisualizationType' or 'getData'36 * @return Object Object with the data to be sent to the server37 */38 function gatherData( type ) {39 var data = {};40 41 // different types of request require different data arrays42 // However, some data is required for all types. For that reason,43 // the fallthrough option in the switch statement is used.44 switch( type ) {45 case "getData":46 var typeElement = $( '#type' );47 data[ "type" ] = { "id": typeElement.val() };48 case "getVisualizationTypes":49 var rowsElement = $( '#rows' );50 var columnsElement = $( '#columns' );51 data[ "rows" ] = [52 { "id": rowsElement.val() }53 ];54 data[ "columns" ] = [55 { "id": columnsElement.val() }56 ];57 case "getFields":58 var studyElement = $( '#study' );59 data[ "studies" ] = [60 { "id": studyElement.val() }61 ];62 63 case "getStudies":64 }65 66 return data;67 }68 69 /**70 * Executes an ajax call in a standardized way. Retrieves data to be sent with gatherData71 * The ajaxParameters map will be sent to the $.ajax call72 * @param action Name of the action to execute. Is also given to the gatherData method73 * as a parameter and the url will be determined based on this parameter.74 * @param ajaxParameters Hashmap with parameters that are sent to the $.ajax call. The entries75 * url, data and dataType are set by this method.76 * An additional key 'errorMessage' can be given, with the message that will be77 * shown if an error occurrs in this method. In that case, the 'error' method from78 * the ajaxParameters method will be overwritten.79 * @see visualizationUrls80 * @see jQuery.ajax81 */82 function executeAjaxCall( action, ajaxParameters ) {83 var data = gatherData( action );84 85 // If no parameters are given, create an empty map86 if( !ajaxParameters )87 ajaxParameters = {}88 89 if( ajaxParameters[ "errorMessage" ] ) {90 var message = ajaxParameters[ "errorMessage" ];91 ajaxParameters[ "error" ] = function( jqXHR, textStatus, errorThrown ) {92 // An error occurred while retrieving fields from the server93 showError( "An error occurred while retrieving variables from the server. Please try again or contact a system administrator." );94 }95 96 // Remove the error message97 delete ajaxParameters[ "errorMessage" ];98 }99 100 // Retrieve a new list of fields from the controller101 // based on the study we chose102 $.ajax($.extend({103 url: visualizationUrls[ action ],104 data: "data=" + JSON.stringify( data ),105 dataType: "json",106 }, ajaxParameters ) );107 }108 109 function changeStudy() {110 executeAjaxCall( "getFields", {111 "errorMessage": "An error occurred while retrieving variables from the server. Please try again or contact a system administrator.",112 "success": function( data, textStatus, jqXHR ) {113 // Remove all previous entries from the list114 $( '#rows, #columns' ).empty();115 116 // Add all fields to the lists117 $.each( data, function( idx, field ) {118 $( '#rows, #columns' ).append( $( "<option>" ).val( field.id ).text( field.name ) );119 });120 121 $( "#step2" ).show();122 $( "#step3" ).hide();123 }124 });125 }126 127 function changeFields() {128 executeAjaxCall( "getVisualizationTypes", {129 "errorMessage": "An error occurred while retrieving visualization types from the server. Please try again or contact a system administrator.",130 "success": function( data, textStatus, jqXHR ) {131 // Remove all previous entries from the list132 $( '#types' ).empty();133 134 // Add all fields to the lists135 $.each( data, function( idx, field ) {136 $( '#types' ).append( $( "<option>" ).val( field.id ).text( field.name ) );137 });138 139 $( "#step3" ).show();140 }141 });142 }143 144 function visualize() {145 executeAjaxCall( "getData", {146 "errorMessage": "An error occurred while retrieving data from the server. Please try again or contact a system administrator.",147 "success": function( data, textStatus, jqXHR ) {148 /*149 Data expected:150 {151 "type": "barchart",152 "x": [ "Q1", "Q2", "Q3", "Q4" ],153 "xaxis": { "title": "quarter 2011", "unit": "" },154 "yaxis": { "title": "temperature", "unit": "degrees C" },155 "series": [156 {157 "name": "series name",158 "y": [ 5.1, 3.1, 20.6, 15.4 ],159 "error": [ 0.5, 0.2, 0.4, 0.5 ]160 },161 ]162 }163 */164 165 // TODO: error handling if incorrect data is returned166 167 // Retrieve the datapoints from the json object168 var dataPoints = [];169 var series = [];170 171 $.each(data.series, function(idx, element ) {172 dataPoints[ dataPoints.length ] = element.y;173 series[ series.length ] = { "label": element.name };174 });175 176 // TODO: create a chart based on the data that is sent by the user and the type of chart177 // chosen by the user178 chart = $.jqplot('visualization', dataPoints, {179 // Tell the plot to stack the bars.180 stackSeries: true,181 captureRightClick: true,182 seriesDefaults:{183 renderer:$.jqplot.BarRenderer,184 rendererOptions: {185 // Put a 30 pixel margin between bars.186 barMargin: 30,187 // Highlight bars when mouse button pressed.188 // Disables default highlighting on mouse over.189 highlightMouseDown: true190 },191 pointLabels: {show: true}192 },193 series: series,194 axes: {195 xaxis: {196 renderer: $.jqplot.CategoryAxisRenderer,197 ticks: data.x,198 label: data[ "xaxis" ].title + " (" + data[ "xaxis" ].unit + ")",199 labelRenderer: $.jqplot.CanvasAxisLabelRenderer200 },201 yaxis: {202 // Don't pad out the bottom of the data range. By default,203 // axes scaled as if data extended 10% above and below the204 // actual range to prevent data points right on grid boundaries.205 // Don't want to do that here.206 padMin: 0,207 label: data[ "yaxis" ].title + " (" + data[ "yaxis" ].unit + ")",208 labelRenderer: $.jqplot.CanvasAxisLabelRenderer209 }210 },211 legend: {212 show: true,213 location: 'e',214 placement: 'outside'215 }216 });217 218 $( "#visualization" ).show();219 },220 });221 }222 30 </script> 223 <style type="text/css">224 /* #step2, #step3 { display: none; } */225 #ajaxError {226 display: none;227 border: 1px solid #f99; /* #006dba; */228 margin-bottom: 10px;229 margin-top: 10px;230 231 background: #ffe0e0 url(${fam.icon( name: 'error' )}) 10px 10px no-repeat;232 padding: 10px 10px 10px 33px;233 }234 235 label { display: inline-block; zoom: 1; *display: inline; width: 110px; margin-top: 10px; }236 237 #visualizationForm { position: relative; margin: 10px 0; font-size: 11px; }238 #visualizationForm h3 { font-size: 13px; }239 #visualizationForm h3 .nummer { display: inline-block; zoom: 1; *display: inline; width: 25px; }240 241 #visualizationForm p { margin-left: 25px; }242 243 table.jqplot-table-legend { width: 100px; }244 </style>245 31 </head> 246 32 <body>
Note: See TracChangeset
for help on using the changeset viewer.
