Changeset 1983


Ignore:
Timestamp:
Aug 25, 2011, 5:30:48 PM (12 years ago)
Author:
robert@…
Message:

Update for the visualization controller

Location:
trunk/grails-app
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/controllers/dbnp/visualization/VisualizeController.groovy

    r1982 r1983  
    5757       
    5858        def getData = {
    59                 def data = [[3,7,9,1,4,6,8,2,5]];
     59                def data =      [
     60                                "type": "barchart",
     61                                "x": [ "0", "1", "6", "9", "12" ],
     62                                "xaxis": [ "title": "time", "unit": "weeks" ],
     63                                "yaxis": [ "title": "adipose tissue", "unit": "mg" ],
     64                                "series": [
     65                                        [
     66                                                "name": "epididymal",
     67                                                "y": [ 200, 400, 390, 405, 500 ],
     68                                                "error": [ 0.5, 0.2, 0.4, 0.5 ]
     69                                        ],
     70                                        [
     71                                                "name": "visceral",
     72                                                "y": [ 160, 200, 220, 220, 600 ],
     73                                                "error": [ 0.5, 0.2, 0.4, 0.5 ]
     74                                        ],
     75                                        [
     76                                                "name": "subcutaneous",
     77                                                "y": [ 160, 200, 230, 300, 600 ],
     78                                                "error": [ 0.5, 0.2, 0.4, 0.5 ]
     79                                        ],
     80                                ]
     81                        ]
    6082               
    6183                render data as JSON

  • trunk/grails-app/views/visualize/index.gsp

    r1982 r1983  
    88        <g:javascript src="jqplot/jquery.jqplot.min.js" />
    99        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='jquery.jqplot.min.css' />" />
     10       
     11        <!-- jqPlot plugins -->
     12        <g:javascript src="jqplot/plugins/jqplot.barRenderer.min.js" />
     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" />
    1017       
    1118        <script type="text/javascript">
    … …  
    2734                 * Gathers data for the given request type from the form elements on the page
    2835                 * @param type  String  Can be 'getStudies', 'getFields', 'getVisualizationType' or 'getData'
     36                 * @return Object               Object with the data to be sent to the server
    2937                 */
    3038                function gatherData( type ) {
    31                         var data = new Array();
     39                        var data = {};
    3240               
    3341                        // different types of request require different data arrays
    … …  
    5866                        return data;
    5967                }
    60                
    61                 function changeStudy() {
    62                         var data = gatherData( "getFields" );
     68
     69                /**
     70                 * Executes an ajax call in a standardized way. Retrieves data to be sent with gatherData
     71                 * The ajaxParameters map will be sent to the $.ajax call
     72                 * @param action                        Name of the action to execute. Is also given to the gatherData method
     73                 *                                                      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 entries
     75                 *                                                      url, data and dataType are set by this method.
     76                 *                                                      An additional key 'errorMessage' can be given, with the message that will be
     77                 *                                                      shown if an error occurrs in this method. In that case, the 'error' method from
     78                 *                                                      the ajaxParameters method will be overwritten.
     79                 * @see visualizationUrls
     80                 * @see jQuery.ajax
     81                 */
     82                function executeAjaxCall( action, ajaxParameters ) {
     83                        var data = gatherData( action );
     84
     85                        // If no parameters are given, create an empty map
     86                        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 server
     93                                        showError( "An error occurred while retrieving variables from the server. Please try again or contact a system administrator." );
     94                                }
     95
     96                                // Remove the error message
     97                                delete ajaxParameters[ "errorMessage" ];
     98                        }
    6399                       
    64100                        // Retrieve a new list of fields from the controller
    65101                        // based on the study we chose
    66                         $.ajax({
    67                                 url: visualizationUrls[ "getFields" ],
    68                                 data: data,
     102                        $.ajax($.extend({
     103                                url: visualizationUrls[ action ],
     104                                data: "data=" + JSON.stringify( data ),
    69105                                dataType: "json",
    70                                 success: function( data, textStatus, jqXHR ) {
     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 ) {
    71113                                        // Remove all previous entries from the list
    72114                                        $( '#rows, #columns' ).empty();
    … …  
    79121                                        $( "#step2" ).show();
    80122                                        $( "#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." );
    85123                                }
    86124                        });
    … …  
    88126
    89127                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 ) {
     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 ) {
    99131                                        // Remove all previous entries from the list
    100132                                        $( '#types' ).empty();
    … …  
    106138
    107139                                        $( "#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." );
    112140                                }
    113141                        });
    … …  
    115143
    116144                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 ) {
     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 returned
     166                                         
     167                                        // Retrieve the datapoints from the json object
     168                                        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                                       
    126176                                        // TODO: create a chart based on the data that is sent by the user and the type of chart
    127177                                        // chosen by the user
    128                                        
    129                                         var plot1 = $.jqplot ('visualization', data);
     178                                        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: true         
     190                                                        },
     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.CanvasAxisLabelRenderer
     200                                                        },
     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 the
     204                                                                // 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.CanvasAxisLabelRenderer
     209                                                        }
     210                                                },
     211                                                legend: {
     212                                                        show: true,
     213                                                        location: 'e',
     214                                                        placement: 'outside'
     215                                                }                       
     216                                        });
     217                                       
    130218                                        $( "#visualization" ).show();
    131219                                },
    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                                 }
    136220                        });
    137                        
    138                 }
    139                
     221                }
    140222        </script>
    141223        <style type="text/css">
    142                 #step2, #step3 { display: none; }
     224                /* #step2, #step3 { display: none; } */
    143225                #ajaxError {
    144226                        display: none;
    … …  
    158240               
    159241                #visualizationForm p { margin-left: 25px; }
     242               
     243                table.jqplot-table-legend { width: 100px; }
    160244        </style>
    161245</head>
    … …  
    178262        </div> 
    179263       
     264        <p class="explanation">
     265                Choose a study to visualize
     266        </p>
     267
    180268        <form id="visualizationForm">
    181269                <h3><span class="nummer">1</span>Studies</h3>
    182                 <p class="explanation">
    183                         Choose a study to visualize
    184                 </p>
    185270                <p>
    186271                        <label>Study</label><g:select from="${studies}" optionKey="id" optionValue="title" name="study" onChange="changeStudy();"/>
    … …  
    198283                        <h3><span class="nummer">3</span>Visualization type</h3>
    199284                        <p>
    200                                 <select id="types" name="types"></select>
    201                                 <input type="button" value="Visualize" onClick="visualize();"/>
     285                                <label for"types">Type</label><select id="types" name="types"></select>
     286                        </p>
     287                        <p>
     288                                <label> </label><input type="button" value="Visualize" onClick="visualize();"/>
    202289                        </p>
    203290                </div>
Note: See TracChangeset for help on using the changeset viewer.