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

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

VIS-17, added code to enable horizontal barchart and improved some other visualizations

File size: 5.7 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        <!-- 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/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    <g:javascript src="jqplot/plugins/jqplot.ohlcRenderer.min.js" />
18    <g:javascript src="jqplot/plugins/jqplot.highlighter.min.js" />
19
20        <g:javascript src="visualization.js" />
21        <link rel="stylesheet" type="text/css" href="<g:resource dir='css' file='visualization.css' />" />
22    <style type="text/css">
23        /** NEEDED FOR RESOURCES PLUGIN **/
24        .menu_arrow {background-image: url(${resource(dir: 'images/visualization', file: 'down_arrow.png')}); }
25        .message_error { background: #ffe0e0 url(${fam.icon( name: 'exclamation' )}) 10px 5px no-repeat; }
26        .message_warning { background: #eee url(${fam.icon( name: 'information' )}) 10px 5px no-repeat; }
27    </style>
28       
29        <script type="text/javascript">
30                // We store urls here because they depend on the grails configuration.
31                // This way, the URLs are always correct
32                var visualizationUrls = {
33                        "getStudies": "<g:createLink action="getStudies" />",
34                        "getFields": "<g:createLink action="getFields" />",
35                        "getVisualizationTypes": "<g:createLink action="getVisualizationTypes" />",
36                        "getData": "<g:createLink action="getData" />"
37                };
38        </script>
39</head>
40<body>
41       
42    <div id="data">
43        <div id="menu_container">
44            <form id="visualizationForm">
45                <div class="menu_spacer"> </div>
46                <div class="menu_item menu_item_fill" id="menu_study">
47                    <div class="menu_item_label">Studies <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
48                    <div class="menu_item_info"></div>
49                    <div class="formulier">
50                        <g:render template="formStudy" />
51                        <div style="position: absolute; top: 3px; right: 10px;"><a onClick="hideForm('#menu_study'); return false;" href="#">x</a></div>
52                    </div>
53                </div>
54                <div class="menu_arrow"> </div>
55                <div class="menu_item" id="menu_column">
56                    <div class="menu_item_label">X-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
57                    <div class="menu_item_info"></div>
58                    <div class="formulier">
59                        <g:render template="formColumns" />
60                        <div style="position: absolute; top: 3px; right: 10px;"><a onClick="hideForm('#menu_column'); return false;" href="#">x</a></div>
61                    </div>
62                </div>
63                <div class="menu_item" id="menu_row">
64                    <div class="menu_item_label">Y-Axis <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
65                    <div class="menu_item_info"></div>
66                    <div class="formulier">
67                        <g:render template="formRows" />
68                        <div style="position: absolute; top: 3px; right: 10px;"><a onClick="hideForm('#menu_row'); return false;" href="#">x</a></div>
69                    </div>
70                </div>
71                <div class="menu_arrow"> </div>
72                <div class="menu_item" id="menu_vis">
73                    <div class="menu_item_label">Type <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" /></div>
74                    <div class="menu_item_info"></div>
75                    <div class="formulier">
76                        <g:render template="formType" />
77                        <div style="position: absolute; top: 3px; right: 10px;"><a onClick="hideForm('#menu_vis'); return false;" href="#">x</a></div>
78                    </div>
79                </div>
80                <div class="menu_arrow"> </div>
81                <div class="menu_item" id="menu_go">
82                    <button id="button_visualize" onClick="visualize(); return false;" >
83                        Visualize<br />
84                        <img src="${resource(dir: 'images', file: 'spinner.gif')}" class="spinner" />
85                        <span style="height: 16px;">&nbsp;</span>
86                    </button>
87                    <input type="checkbox" name="autovis" id="autovis" CHECKED/><span style="font-size: small;">auto</span></div>
88                <div class="menu_spacer"> </div>
89            </form>
90        </div>
91
92        <div id="visualization_container">
93
94            <h1>Visualize your study</h1>
95
96            <div id="message_counter" onClick="errorDiv(); return false;">0</div>
97
98            <div id="message_container">
99                <g:if test="${flash.error}">
100                    <div class="message_box message_error">
101                        ${flash.error.toString().encodeAsHTML()}
102                    </div>
103                </g:if>
104                <g:if test="${flash.message}">
105                    <div class="message_box message_warning">
106                        ${flash.message.toString().encodeAsHTML()}
107                    </div>
108                </g:if>
109            </div>
110
111            <div id="visualization">
112            </div>
113        </div>
114    </div>
115</body>
116</html>
117
118
119
Note: See TracBrowser for help on using the repository browser.