← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/Highstock-1.3.10/exporting-server/java/highcharts-export/highcharts-export-web/src/main/webapp/WEB-INF/pages/demo.jsp

  • Committer: Jeff Stys
  • Date: 2014-04-21 12:46:26 UTC
  • Revision ID: jstys@sesda3.com-20140421124626-2332pb2dyjc33jxi
Proof-of-concept version of Data Coverage Timeline using Highchart/Highstock javascript library.  Changes to getDataCoverage API in order to feed the necessary data to the Timeline

Show diffs side-by-side

added added

removed removed

Lines of Context:
timeline/Highstock-1.3.10/exporting-server/java/highcharts-export/highcharts-export-web/src/main/webapp/WEB-INF/pages/demo.jsp
 
1
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
2
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
 
3
<%@ page language="java" contentType="text/html; charset=UTF-8"
 
4
        pageEncoding="UTF-8"%>
 
5
 
 
6
<!DOCTYPE html>
 
7
<html>
 
8
<head>
 
9
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
10
<title>Highcharts export server</title>
 
11
<link rel="stylesheet" type="text/css" href="resources/css/demo.css" />
 
12
<link rel="stylesheet" type="text/css"
 
13
        href="resources/lib/codemirror/codemirror.css" />
 
14
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 
15
<script src="resources/lib/codemirror/codemirror.js"></script>
 
16
<script src="resources/lib/codemirror/mode/javascript/javascript.js"></script>
 
17
<script src="resources/lib/codemirror/mode/xml/xml.js"></script>
 
18
<script>
 
19
        $(document).ready(function() {
 
20
 
 
21
                var enableEditor = function(id) {
 
22
                        if (id === 'options') {
 
23
                                CodeMirror.fromTextArea($('textarea#options')[0], {
 
24
                                        lineNumbers : true,
 
25
                                        matchBrackets : true,
 
26
                                        tabMode : "indent",
 
27
                                        mode : "text/javascript",
 
28
                                        lineWrapping : true
 
29
                                });
 
30
                        } else {
 
31
                                // options for svg editor
 
32
                                CodeMirror.fromTextArea($('textarea#svg')[0], {
 
33
                                        lineNumbers : true,
 
34
                                        mode : {
 
35
                                                name : "xml",
 
36
                                                alignCDATA : true
 
37
                                        },
 
38
                                        matchBrackets : true,
 
39
                                        tabMode : "indent",
 
40
                                        lineWrapping : true
 
41
                                });
 
42
                        }
 
43
                };
 
44
 
 
45
                // attach eventhandler to radio fields
 
46
                $('input[type="radio"]').change(function() {
 
47
                        var checked = this.id, other, html;
 
48
                        // which editor is checked/ should be visible
 
49
                        checked === 'svg' ? other = 'options' : other = 'svg';
 
50
                        // get html source from the div outside of the form
 
51
                        $('div#' + checked).html($('div#toggle').html());
 
52
                        /* move the html of the previous editor outside the form,
 
53
                        remove first Codemirror wrapper */
 
54
                        $('div#' + other + ' div.CodeMirror-wrap').remove();
 
55
 
 
56
                        $('div#toggle').html($('div#' + other).html());
 
57
                        // empty the container which held the previous editor.
 
58
                        $('div#' + other).html('');
 
59
                        // enable codemirror for texarea
 
60
                        enableEditor(checked);
 
61
 
 
62
                });
 
63
 
 
64
                // default radio #config is selected
 
65
                $('input#options').prop('checked', true);
 
66
 
 
67
                enableEditor('options');
 
68
 
 
69
                // syntax coloring, indent from codemirror
 
70
                // callback editor
 
71
                CodeMirror.fromTextArea($('textarea#callback')[0], {
 
72
                        id : 'test',
 
73
                        lineNumbers : true,
 
74
                        matchBrackets : true,
 
75
                        tabMode : "indent",
 
76
                        mode : "text/javascript",
 
77
                        lineWrapping : true
 
78
                });
 
79
 
 
80
        });
 
81
</script>
 
82
</head>
 
83
<body>
 
84
        <div id="top">
 
85
                <a href="http://www.highcharts.com" title="Highcharts Home Page"
 
86
                        id="logo"><img alt="Highcharts Home Page"
 
87
                        src="resources/Highcharts-icon-160px.png" border="0"></a>
 
88
                <h1>Highcharts Export Server</h1>
 
89
        </div>
 
90
        <div id="wrap">
 
91
                <form id="exportForm" action="./" method="POST">
 
92
                        <p>Use this page to experiment with the different options.</p>
 
93
 
 
94
                        <input id="options" title="Highcharts config object" type="radio"
 
95
                                name="content" value="options"> <label for="options"
 
96
                                class="radio">Highcharts config object (JSON)</label> <input
 
97
                                id="svg" title="svg xml content" type="radio" name="content"
 
98
                                value="svg"> <label for="svg" class="radio">SVG
 
99
                                (XML) </label>
 
100
 
 
101
                        <div id="options">
 
102
                                <label id="options" for="options">Options</label>
 
103
                                <div id="oneline" class="info">Specify here your Highcharts
 
104
                                        configuration object.</div>
 
105
                                <textarea id="options" name="options" rows="12" cols="30"><%@include
 
106
                                                file="/WEB-INF/jspf/config.js"%></textarea>
 
107
                        </div>
 
108
                        <div id="svg"></div>
 
109
                        <label for="type">Image file format</label> <select name="type">
 
110
                                <option value="image/png">image/png</option>
 
111
                                <option value="image/jpeg">image/jpeg</option>
 
112
                                <option value="image/svg+xml">image/svg+xml</option>
 
113
                                <option value="application/pdf">application/pdf</option>
 
114
                        </select> <br /> <label for="width">Width</label>
 
115
                        <div class="info">The exact pixelwidth of the exported image.
 
116
                                Defaults to chart.width or 600px. Maximum width is set to 2000px</div>
 
117
                        <input id="width" name="width" type="text" value="" /> <br/> <label
 
118
                                for="scales">Scale</label> <input id="scale" name="scale"
 
119
                                type="text" value="" />
 
120
                        <div class="info">Give in a scaling factor for a higher image
 
121
                                resolution. Maximum scaling is set to 4x. Remember that the width parameter has a higher
 
122
                                precedence over scaling.</div>
 
123
                        <br /> <label for="constructor">Constructor</label>
 
124
                        <div class="info">
 
125
                                This will be either 'Chart' or 'StockChart' depending on if <br />you
 
126
                                want a Highcharts or an HighStock chart.
 
127
                        </div>
 
128
                        <select name="constr">
 
129
                                <option value="Chart">Chart</option>
 
130
                                <option value="StockChart">StockChart</option>
 
131
                        </select> </br> <br /> <label for="callback">Callback</label>
 
132
                        <div id="oneline" class="info">The callback will be fired after
 
133
                                the chart is created.</div>
 
134
                        <textarea id="callback" name="callback" rows="12" cols="30" /><%@include
 
135
                                        file="/WEB-INF/jspf/callback.js"%>
 
136
                        </textarea>
 
137
                        <input id="submit" type="submit" value="Generate Image">
 
138
                </form>
 
139
        </div>
 
140
        <div id="toggle">
 
141
                <label id="svg" for="svg">Svg Content</label>
 
142
                <div id="oneline" class="info">Paste in 'raw' svg markup.</div>
 
143
                <textarea id="svg" name="svg" rows="12" cols="30"><%@include
 
144
                                file="/WEB-INF/jspf/lexl.svg"%>
 
145
                </textarea>
 
146
        </div>
 
147
</body>
 
148
</html>