source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/radialgauge/position.html @ 651

Last change on this file since 651 was 651, checked in by vmipsl, 12 years ago

wijmo
File size: 6.1 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4    <title></title>
5    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
6    <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
7    <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
8    <script src="../../external/raphael-min.js" type="text/javascript"></script>
9    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
10    <script src="../../wijmo/jquery.wijmo.wijgauge.js" type="text/javascript"></script>
11    <script src="../../wijmo/jquery.wijmo.wijradialgauge.js" type="text/javascript"></script>
12    <script type="text/javascript">
13        $(document).ready(function() {
14            $("#gauge").wijradialgauge({
15                value: 100,
16                max: 150,
17                min: 0,
18                startAngle: -45,
19                sweepAngle: 270,
20                radius: 170,
21                islogarithmic: false,
22                origin: {
23                    x: 0.5, y: 0.5
24                },
25                labels: {
26                    offset: -30, 
27                    style: {
28                        fill: "#556A7C",
29                        stroke: "none"
30                    }
31                },
32                tickMinor: {
33                    position: "inside",
34                    style: {
35                        fill: "#556A7C",
36                        stroke: "#556A7C"
37                    },
38                    interval: 2,
39                    visible: true,
40                    offset: 0
41                },
42                tickMajor: {
43                    position: "center",
44                    style: {
45                        fill: "#556A7C",
46                        stroke: "#556A7C"
47                    },
48                    interval: 10,
49                    visible: true
50                },
51                ranges: [{
52                    startWidth: 15,
53                    endWidth: 20,
54                    startValue: 20,
55                    endValue: 50,
56                    startDistance: 1,
57                    endDistance: 1,
58                    style: {
59                        fill: "#BC8A8E",
60                        stroke: "#BC8A8E"
61                    }
62                }
63                ],
64                face: {
65                    style: {
66                        fill: "#E0E8EF",
67                        stroke: "#E0E8EF"
68                    }
69                },
70                pointer: {
71                    length: 1,
72                    style: {
73                        fill: "#BF551C",
74                        stroke: "#BF551C"
75                    }
76                },
77                cap: {
78                    style: {
79                        fill: "#7F9CAD",
80                        stroke: "#7F9CAD"
81                    }
82                }
83            });
84
85            $("#applyOption").click(function() {
86                var option = {}, pointer = {}, label = {}, tick = {}, range1 = {};
87                pointer.length = getInputNum("p_length");
88                pointer.offset = getInputNum("p_offset");
89                label.offset = getInputNum("l_offset");
90                tick.offset = getInputNum("t_offset");
91                tick.position = $("#t_position").val();
92                range1 = $("#gauge").wijradialgauge("option", "ranges")[0];
93                range1.startDistance = getInputNum("rs_distance");
94                range1.endDistance = getInputNum("re_distance");
95
96                option.pointer = pointer;
97                option.labels = label;
98                option.tickMinor = tick;
99                option.tickMajor = tick;
100                option.ranges = [];
101                option.ranges[0] = range1;
102
103                $("#gauge").wijradialgauge("option", option);
104            });
105
106            var getInputNum = function(id) {
107                var val = $("#" + id).val();
108                return val ? parseFloat(val) : undefined;
109            }
110        });
111   
112    </script>
113
114</head>
115
116    <body class="demo-single">
117        <div class="container">
118            <div class="header">
119                <h2>
120                    Position</h2>
121            </div>
122            <div class="main demo">
123                <!-- Begin demo markup -->
124                <div id="gauge">
125                </div>
126                <!-- End demo markup -->
127                <div class="demo-options">
128                    <!-- Begin options markup -->
129                    <div>
130                        <p>
131                            pointer</p>
132                        Length:<input id="p_length" type="text" />
133                        Offset:<input id="p_offset" type="text" />
134                        <p>
135                            label</p>
136                        Offset:<input id="l_offset" type="text" />
137                        <p>
138                            tick</p>
139                        Offset:<input id="t_offset" type="text" />
140                        Position:<select id="t_position"><option value="inside">Inside</option>
141                            <option value="outside">Outside</option>
142                        </select>
143                        <p>
144                            range1</p>
145                        start Distance<input id="rs_distance" type="text" />
146                        end Distance<input id="re_distance" type="text" />
147                        <br />
148                        <input id="applyOption" type="button" value="Apply" />
149                    </div>
150                    <!-- End options markup -->
151                </div>
152            </div>
153            <div class="footer demo-description">
154                <p>This sample shows how to use the tickMajor and tickMinor options' child option, position, to set the marker's position.</p>
155                <p>The position option can be set to inside or outside.</p>
156            </div>
157        </div>
158    </body>
159
160</html>
Note: See TracBrowser for help on using the repository browser.