1 | <!doctype html> |
---|
2 | <html lang="en"> |
---|
3 | <head> |
---|
4 | <title>ScatterChart - Overview</title> |
---|
5 | <meta charset="utf-8" /> |
---|
6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
---|
7 | <meta name="description" content="%description%" /> |
---|
8 | <meta name="keywords" content="" /> |
---|
9 | <meta name="author" content="ComponentOne" /> |
---|
10 | |
---|
11 | <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" /> |
---|
12 | |
---|
13 | <script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script> |
---|
14 | <script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script> |
---|
15 | <script src="../../external/globalize.min.js" type="text/javascript"></script> |
---|
16 | <script src="../../external/raphael-min.js" type="text/javascript"></script> |
---|
17 | <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script> |
---|
18 | <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script> |
---|
19 | <script src="../../wijmo/jquery.wijmo.wijscatterchart.js" type="text/javascript"></script> |
---|
20 | <script id="scriptInit" type="text/javascript"> |
---|
21 | $(document).ready(function () { |
---|
22 | |
---|
23 | var data1 = [{ |
---|
24 | height: 161.4, |
---|
25 | weight: 63.4 |
---|
26 | }, { |
---|
27 | height: 169.0, |
---|
28 | weight: 58.2 |
---|
29 | }, { |
---|
30 | height: 166.2, |
---|
31 | weight: 58.6 |
---|
32 | }, { |
---|
33 | height: 159.4, |
---|
34 | weight: 45.7 |
---|
35 | }, { |
---|
36 | height: 162.5, |
---|
37 | weight: 52.2 |
---|
38 | }, { |
---|
39 | height: 159.0, |
---|
40 | weight: 48.6 |
---|
41 | }, { |
---|
42 | height: 162.8, |
---|
43 | weight: 57.8 |
---|
44 | }, { |
---|
45 | height: 159.0, |
---|
46 | weight: 55.6 |
---|
47 | }, { |
---|
48 | height: 179.8, |
---|
49 | weight: 66.8 |
---|
50 | }, { |
---|
51 | height: 162.9, |
---|
52 | weight: 59.4 |
---|
53 | }, { |
---|
54 | height: 161.0, |
---|
55 | weight: 53.6 |
---|
56 | }, { |
---|
57 | height: 151.1, |
---|
58 | weight: 73.2 |
---|
59 | }, { |
---|
60 | height: 168.2, |
---|
61 | weight: 53.4 |
---|
62 | }, { |
---|
63 | height: 168.9, |
---|
64 | weight: 69.0 |
---|
65 | }, { |
---|
66 | height: 173.2, |
---|
67 | weight: 58.4 |
---|
68 | }, { |
---|
69 | height: 174.0, |
---|
70 | weight: 73.6 |
---|
71 | }, { |
---|
72 | height: 162.6, |
---|
73 | weight: 61.4 |
---|
74 | }, { |
---|
75 | height: 174.0, |
---|
76 | weight: 55.5 |
---|
77 | }, { |
---|
78 | height: 162.6, |
---|
79 | weight: 63.6 |
---|
80 | }, { |
---|
81 | height: 161.3, |
---|
82 | weight: 60.9 |
---|
83 | }, { |
---|
84 | height: 156.2, |
---|
85 | weight: 60.0 |
---|
86 | }, { |
---|
87 | height: 149.9, |
---|
88 | weight: 46.8 |
---|
89 | }, { |
---|
90 | height: 169.5, |
---|
91 | weight: 57.3 |
---|
92 | }, { |
---|
93 | height: 160.0, |
---|
94 | weight: 64.1 |
---|
95 | }, { |
---|
96 | height: 175.3, |
---|
97 | weight: 63.6 |
---|
98 | }, { |
---|
99 | height: 169.5, |
---|
100 | weight: 67.3 |
---|
101 | }, { |
---|
102 | height: 160.0, |
---|
103 | weight: 75.5 |
---|
104 | }, { |
---|
105 | height: 172.7, |
---|
106 | weight: 68.2 |
---|
107 | }, { |
---|
108 | height: 162.6, |
---|
109 | weight: 61.4 |
---|
110 | }, { |
---|
111 | height: 157.5, |
---|
112 | weight: 76.8 |
---|
113 | }, { |
---|
114 | height: 176.5, |
---|
115 | weight: 71.8 |
---|
116 | }, { |
---|
117 | height: 164.4, |
---|
118 | weight: 55.5 |
---|
119 | }, { |
---|
120 | height: 160.7, |
---|
121 | weight: 48.6 |
---|
122 | }, { |
---|
123 | height: 174.0, |
---|
124 | weight: 66.4 |
---|
125 | }, { |
---|
126 | height: 163.8, |
---|
127 | weight: 67.3 |
---|
128 | }] |
---|
129 | $("#wijscatterchartDefault").wijscatterchart({ |
---|
130 | header: { |
---|
131 | text: "Height Versus Weight of 72 Individuals by Gender" |
---|
132 | }, |
---|
133 | axis: { |
---|
134 | y: { |
---|
135 | text: "Weight (kg)", |
---|
136 | labels: { |
---|
137 | style: { |
---|
138 | fill: "#7f7f7f", |
---|
139 | "font-size": 11 |
---|
140 | } |
---|
141 | }, |
---|
142 | gridMajor: { |
---|
143 | style: { stroke: "#353539", "stroke-dasharray": "- " } |
---|
144 | }, |
---|
145 | tickMajor: { position: "outside", style: { stroke: "#7f7f7f"} }, |
---|
146 | tickMinor: { position: "outside", style: { stroke: "#7f7f7f"} } |
---|
147 | }, |
---|
148 | x: { |
---|
149 | text: "Height (cm)", |
---|
150 | labels: { |
---|
151 | style: { |
---|
152 | fill: "#7f7f7f", |
---|
153 | "font-size": 11, |
---|
154 | rotation: -45 |
---|
155 | } |
---|
156 | }, |
---|
157 | tickMajor: { position: "outside", style: { stroke: "#7f7f7f"} } |
---|
158 | } |
---|
159 | }, |
---|
160 | animation: |
---|
161 | { |
---|
162 | enabled: true |
---|
163 | }, |
---|
164 | showChartLabels: false, |
---|
165 | hint: { |
---|
166 | content: function () { |
---|
167 | return this.x + ' cm, ' + this.y + ' kg' |
---|
168 | }, |
---|
169 | offsetY: -10 |
---|
170 | }, |
---|
171 | legend: { |
---|
172 | visible: true |
---|
173 | }, |
---|
174 | seriesList: [ |
---|
175 | { |
---|
176 | dataSource: data1, |
---|
177 | label: "Female", |
---|
178 | legendEntry: true, |
---|
179 | data: { |
---|
180 | x: { bind: "height" }, |
---|
181 | y: { bind: "weight" } |
---|
182 | }, |
---|
183 | visible: true, |
---|
184 | markerType: "circle" |
---|
185 | }, { |
---|
186 | label: "Male", |
---|
187 | legendEntry: true, |
---|
188 | data: { |
---|
189 | x: [175.0, 174.0, 165.1, 177.0, 192.0, 176.5, 169.4, 182.1, 179.8, 175.3, 184.9, 177.3, 167.4, 178.1, 168.9, |
---|
190 | 174.0, 167.6, 170.2, 167.6, 188.0, 174.0, 176.5, 180.3, 167.6, 188.0, 180.3, 167.6, 183.0, 183.0, 179.1, |
---|
191 | 170.2, 177.8, 179.1, 190.5, 177.8, 180.3, 180.3 |
---|
192 | ], |
---|
193 | y: [70.2, 73.4, 70.5, 68.9, 102.3, 68.4, 65.9, 75.7, 84.5, 87.7, 86.4, 73.2, 53.9, 72.0, 55.5, |
---|
194 | 70.9, 64.5, 77.3, 72.3, 87.3, 80.0, 82.3, 73.6, 74.1, 85.9, 73.2, 76.3, 65.9, 90.9, 89.1, |
---|
195 | 62.3, 82.7, 79.1, 98.2, 84.1, 83.2, 83.2 |
---|
196 | ] |
---|
197 | }, |
---|
198 | markerType: "diamond" |
---|
199 | } |
---|
200 | ], |
---|
201 | seriesStyles: [ |
---|
202 | { |
---|
203 | fill: "r(0.25, 0.75)#fff-#0c0:30-#000", |
---|
204 | stroke: "#afe500" |
---|
205 | }, { |
---|
206 | fill: "90-#cc0000-#0c0-#0000cc", |
---|
207 | stroke: "#ff9900" |
---|
208 | } |
---|
209 | ], |
---|
210 | seriesHoverStyles: [{ fill: "90-#00cc00-#0c0-#cc0000" }, { fill: "#0000cc"}] |
---|
211 | }); |
---|
212 | }); |
---|
213 | </script> |
---|
214 | </head> |
---|
215 | <body class="demo-single"> |
---|
216 | <div class="container"> |
---|
217 | <div class="header"> |
---|
218 | <h2> |
---|
219 | Overview</h2> |
---|
220 | </div> |
---|
221 | <div class="main demo"> |
---|
222 | <!-- Begin demo markup --> |
---|
223 | <div id="wijscatterchartDefault" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;"> |
---|
224 | </div> |
---|
225 | <!-- End demo markup --> |
---|
226 | <div class="demo-options"> |
---|
227 | <!-- Begin options markup --> |
---|
228 | <!-- End options markup --> |
---|
229 | </div> |
---|
230 | </div> |
---|
231 | <div class="footer demo-description"> |
---|
232 | |
---|
233 | </div> |
---|
234 | </div> |
---|
235 | </body> |
---|
236 | </html> |
---|