| 875 |
lars |
1 |
<!DOCTYPE HTML>
|
|
|
2 |
<html>
|
|
|
3 |
<head>
|
|
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
5 |
<title>Highcharts Example</title>
|
|
|
6 |
|
|
|
7 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
|
8 |
<style type="text/css">
|
|
|
9 |
#container {
|
|
|
10 |
min-width: 300px;
|
|
|
11 |
max-width: 1000px;
|
|
|
12 |
height: 420px;
|
|
|
13 |
margin: 1em auto;
|
|
|
14 |
}
|
|
|
15 |
|
|
|
16 |
</style>
|
|
|
17 |
<script type="text/javascript">
|
|
|
18 |
/**
|
|
|
19 |
* This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
|
|
|
20 |
* It also shows custom graphics drawn in the chart area on chart load.
|
|
|
21 |
*/
|
|
|
22 |
|
|
|
23 |
|
|
|
24 |
/**
|
|
|
25 |
* Fires on chart load, called from the chart.events.load option.
|
|
|
26 |
*/
|
|
|
27 |
function onChartLoad() {
|
|
|
28 |
|
|
|
29 |
var centerX = 140,
|
|
|
30 |
centerY = 110,
|
|
|
31 |
path = [],
|
|
|
32 |
angle,
|
|
|
33 |
radius,
|
|
|
34 |
badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
|
|
|
35 |
spike,
|
|
|
36 |
empImage,
|
|
|
37 |
big5,
|
|
|
38 |
label,
|
|
|
39 |
left,
|
|
|
40 |
right,
|
|
|
41 |
years,
|
|
|
42 |
renderer;
|
|
|
43 |
|
|
|
44 |
if (this.chartWidth < 530) {
|
|
|
45 |
return;
|
|
|
46 |
}
|
|
|
47 |
|
|
|
48 |
// Draw the spiked disc
|
|
|
49 |
for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
|
|
|
50 |
radius = spike ? 80 : 70;
|
|
|
51 |
path.push(
|
|
|
52 |
'L',
|
|
|
53 |
centerX + radius * Math.cos(angle),
|
|
|
54 |
centerY + radius * Math.sin(angle)
|
|
|
55 |
);
|
|
|
56 |
spike = !spike;
|
|
|
57 |
}
|
|
|
58 |
path[0] = 'M';
|
|
|
59 |
path.push('z');
|
|
|
60 |
this.renderer.path(path)
|
|
|
61 |
.attr({
|
|
|
62 |
fill: badgeColor,
|
|
|
63 |
zIndex: 6
|
|
|
64 |
})
|
|
|
65 |
.add();
|
|
|
66 |
|
|
|
67 |
// Employee image overlay
|
|
|
68 |
empImage = this.renderer.path(path)
|
|
|
69 |
.attr({
|
|
|
70 |
zIndex: 7,
|
|
|
71 |
opacity: 0,
|
|
|
72 |
stroke: badgeColor,
|
|
|
73 |
'stroke-width': 1
|
|
|
74 |
})
|
|
|
75 |
.add();
|
|
|
76 |
|
|
|
77 |
// Big 5
|
|
|
78 |
big5 = this.renderer.text('5')
|
|
|
79 |
.attr({
|
|
|
80 |
zIndex: 6
|
|
|
81 |
})
|
|
|
82 |
.css({
|
|
|
83 |
color: 'white',
|
|
|
84 |
fontSize: '100px',
|
|
|
85 |
fontStyle: 'italic',
|
|
|
86 |
fontFamily: "'Brush Script MT', sans-serif"
|
|
|
87 |
})
|
|
|
88 |
.add();
|
|
|
89 |
big5.attr({
|
|
|
90 |
x: centerX - big5.getBBox().width / 2,
|
|
|
91 |
y: centerY + 14
|
|
|
92 |
});
|
|
|
93 |
|
|
|
94 |
// Draw the label
|
|
|
95 |
label = this.renderer.text('Highcharts Anniversary')
|
|
|
96 |
.attr({
|
|
|
97 |
zIndex: 6
|
|
|
98 |
})
|
|
|
99 |
.css({
|
|
|
100 |
color: '#FFFFFF'
|
|
|
101 |
})
|
|
|
102 |
.add();
|
|
|
103 |
|
|
|
104 |
left = centerX - label.getBBox().width / 2;
|
|
|
105 |
right = centerX + label.getBBox().width / 2;
|
|
|
106 |
|
|
|
107 |
label.attr({
|
|
|
108 |
x: left,
|
|
|
109 |
y: centerY + 44
|
|
|
110 |
});
|
|
|
111 |
|
|
|
112 |
// The band
|
|
|
113 |
left = centerX - 90;
|
|
|
114 |
right = centerX + 90;
|
|
|
115 |
this.renderer
|
|
|
116 |
.path([
|
|
|
117 |
'M', left, centerY + 30,
|
|
|
118 |
'L', right, centerY + 30,
|
|
|
119 |
right, centerY + 50,
|
|
|
120 |
left, centerY + 50,
|
|
|
121 |
'z',
|
|
|
122 |
'M', left, centerY + 40,
|
|
|
123 |
'L', left - 20, centerY + 40,
|
|
|
124 |
left - 10, centerY + 50,
|
|
|
125 |
left - 20, centerY + 60,
|
|
|
126 |
left + 10, centerY + 60,
|
|
|
127 |
left, centerY + 50,
|
|
|
128 |
left + 10, centerY + 60,
|
|
|
129 |
left + 10, centerY + 50,
|
|
|
130 |
left, centerY + 50,
|
|
|
131 |
'z',
|
|
|
132 |
'M', right, centerY + 40,
|
|
|
133 |
'L', right + 20, centerY + 40,
|
|
|
134 |
right + 10, centerY + 50,
|
|
|
135 |
right + 20, centerY + 60,
|
|
|
136 |
right - 10, centerY + 60,
|
|
|
137 |
right, centerY + 50,
|
|
|
138 |
right - 10, centerY + 60,
|
|
|
139 |
right - 10, centerY + 50,
|
|
|
140 |
right, centerY + 50,
|
|
|
141 |
'z'
|
|
|
142 |
])
|
|
|
143 |
.attr({
|
|
|
144 |
fill: badgeColor,
|
|
|
145 |
stroke: '#FFFFFF',
|
|
|
146 |
'stroke-width': 1,
|
|
|
147 |
zIndex: 5
|
|
|
148 |
})
|
|
|
149 |
.add();
|
|
|
150 |
|
|
|
151 |
// 2009-2014
|
|
|
152 |
years = this.renderer.text('2009-2014')
|
|
|
153 |
.attr({
|
|
|
154 |
zIndex: 6
|
|
|
155 |
})
|
|
|
156 |
.css({
|
|
|
157 |
color: '#FFFFFF',
|
|
|
158 |
fontStyle: 'italic',
|
|
|
159 |
fontSize: '10px'
|
|
|
160 |
})
|
|
|
161 |
.add();
|
|
|
162 |
years.attr({
|
|
|
163 |
x: centerX - years.getBBox().width / 2,
|
|
|
164 |
y: centerY + 62
|
|
|
165 |
});
|
|
|
166 |
|
|
|
167 |
|
|
|
168 |
// Prepare mouseover
|
|
|
169 |
renderer = this.renderer;
|
|
|
170 |
if (renderer.defs) { // is SVG
|
|
|
171 |
$.each(this.get('employees').points, function () {
|
|
|
172 |
var point = this,
|
|
|
173 |
pattern;
|
|
|
174 |
if (point.image) {
|
|
|
175 |
pattern = renderer.createElement('pattern').attr({
|
|
|
176 |
id: 'pattern-' + point.image,
|
|
|
177 |
patternUnits: 'userSpaceOnUse',
|
|
|
178 |
width: 400,
|
|
|
179 |
height: 400
|
|
|
180 |
}).add(renderer.defs);
|
|
|
181 |
renderer.image(
|
|
|
182 |
'http://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
|
|
|
183 |
centerX - 80,
|
|
|
184 |
centerY - 80,
|
|
|
185 |
160,
|
|
|
186 |
213
|
|
|
187 |
).add(pattern);
|
|
|
188 |
|
|
|
189 |
Highcharts.addEvent(point, 'mouseOver', function () {
|
|
|
190 |
empImage
|
|
|
191 |
.attr({
|
|
|
192 |
fill: 'url(#pattern-' + point.image + ')'
|
|
|
193 |
})
|
|
|
194 |
.animate({ opacity: 1 }, { duration : 500 });
|
|
|
195 |
});
|
|
|
196 |
Highcharts.addEvent(point, 'mouseOut', function () {
|
|
|
197 |
empImage.animate({ opacity: 0 }, { duration : 500 });
|
|
|
198 |
});
|
|
|
199 |
}
|
|
|
200 |
});
|
|
|
201 |
}
|
|
|
202 |
}
|
|
|
203 |
|
|
|
204 |
$(function () {
|
|
|
205 |
var options = {
|
|
|
206 |
|
|
|
207 |
chart: {
|
|
|
208 |
events: {
|
|
|
209 |
load: onChartLoad
|
|
|
210 |
}
|
|
|
211 |
},
|
|
|
212 |
|
|
|
213 |
xAxis: {
|
|
|
214 |
type: 'datetime',
|
|
|
215 |
minTickInterval: 365 * 24 * 36e5,
|
|
|
216 |
labels: {
|
|
|
217 |
align: 'left'
|
|
|
218 |
},
|
|
|
219 |
plotBands: [{
|
|
|
220 |
from: Date.UTC(2009, 10, 27),
|
|
|
221 |
to: Date.UTC(2010, 11, 1),
|
|
|
222 |
color: '#EFFFFF',
|
|
|
223 |
label: {
|
|
|
224 |
text: '<em>Offices:</em><br> Torstein\'s basement',
|
|
|
225 |
style: {
|
|
|
226 |
color: '#999999'
|
|
|
227 |
},
|
|
|
228 |
y: 180
|
|
|
229 |
}
|
|
|
230 |
}, {
|
|
|
231 |
from: Date.UTC(2010, 11, 1),
|
|
|
232 |
to: Date.UTC(2013, 9, 1),
|
|
|
233 |
color: '#FFFFEF',
|
|
|
234 |
label: {
|
|
|
235 |
text: '<em>Offices:</em><br> Tomtebu',
|
|
|
236 |
style: {
|
|
|
237 |
color: '#999999'
|
|
|
238 |
},
|
|
|
239 |
y: 30
|
|
|
240 |
}
|
|
|
241 |
}, {
|
|
|
242 |
from: Date.UTC(2013, 9, 1),
|
|
|
243 |
to: Date.UTC(2014, 10, 27),
|
|
|
244 |
color: '#FFEFFF',
|
|
|
245 |
label: {
|
|
|
246 |
text: '<em>Offices:</em><br> VikØrsta',
|
|
|
247 |
style: {
|
|
|
248 |
color: '#999999'
|
|
|
249 |
},
|
|
|
250 |
y: 30
|
|
|
251 |
}
|
|
|
252 |
}]
|
|
|
253 |
|
|
|
254 |
},
|
|
|
255 |
|
|
|
256 |
title: {
|
|
|
257 |
text: 'Highcharts and Highsoft timeline'
|
|
|
258 |
},
|
|
|
259 |
|
|
|
260 |
tooltip: {
|
|
|
261 |
style: {
|
|
|
262 |
width: '250px'
|
|
|
263 |
}
|
|
|
264 |
},
|
|
|
265 |
|
|
|
266 |
yAxis: [{
|
|
|
267 |
max: 100,
|
|
|
268 |
labels: {
|
|
|
269 |
enabled: false
|
|
|
270 |
},
|
|
|
271 |
title: {
|
|
|
272 |
text: ''
|
|
|
273 |
},
|
|
|
274 |
gridLineColor: 'rgba(0, 0, 0, 0.07)'
|
|
|
275 |
}, {
|
|
|
276 |
allowDecimals: false,
|
|
|
277 |
max: 15,
|
|
|
278 |
labels: {
|
|
|
279 |
style: {
|
|
|
280 |
color: Highcharts.getOptions().colors[2]
|
|
|
281 |
}
|
|
|
282 |
},
|
|
|
283 |
title: {
|
|
|
284 |
text: 'Employees',
|
|
|
285 |
style: {
|
|
|
286 |
color: Highcharts.getOptions().colors[2]
|
|
|
287 |
}
|
|
|
288 |
},
|
|
|
289 |
opposite: true,
|
|
|
290 |
gridLineWidth: 0
|
|
|
291 |
}],
|
|
|
292 |
|
|
|
293 |
plotOptions: {
|
|
|
294 |
series: {
|
|
|
295 |
marker: {
|
|
|
296 |
enabled: false,
|
|
|
297 |
symbol: 'circle',
|
|
|
298 |
radius: 2
|
|
|
299 |
},
|
|
|
300 |
fillOpacity: 0.5
|
|
|
301 |
},
|
|
|
302 |
flags: {
|
|
|
303 |
tooltip: {
|
|
|
304 |
xDateFormat: '%B %e, %Y'
|
|
|
305 |
}
|
|
|
306 |
}
|
|
|
307 |
},
|
|
|
308 |
|
|
|
309 |
series: [{
|
|
|
310 |
type: 'spline',
|
|
|
311 |
id: 'google-trends',
|
|
|
312 |
dashStyle: 'dash',
|
|
|
313 |
name: 'Google search for <em>highcharts</em>',
|
|
|
314 |
data: [{ x: 1258322400000, /* November 2009 */ y: 0}, { x: 1260961200000, y: 5}, { x: 1263639600000, y: 7}, { x: 1266188400000, y: 5}, { x: 1268740800000, y: 6}, { x: 1271368800000, y: 8}, { x: 1274004000000, y: 11}, { x: 1276639200000, y: 9}, { x: 1279274400000, y: 12}, { x: 1281952800000, y: 13}, { x: 1284588000000, y: 17}, { x: 1287223200000, y: 17}, { x: 1289858400000, y: 18}, { x: 1292497200000, y: 20}, { x: 1295175600000, y: 20}, { x: 1297724400000, y: 27}, { x: 1300276800000, y: 32}, { x: 1302904800000, y: 29}, { x: 1305540000000, y: 34}, { x: 1308175200000, y: 34}, { x: 1310810400000, y: 36}, { x: 1313488800000, y: 43}, { x: 1316124000000, y: 44}, { x: 1318759200000, y: 42}, { x: 1321394400000, y: 47}, { x: 1324033200000, y: 46}, { x: 1326711600000, y: 50}, { x: 1329303600000, y: 57}, { x: 1331899200000, y: 54}, { x: 1334527200000, y: 59}, { x: 1337162400000, y: 62}, { x: 1339797600000, y: 66}, { x: 1342432800000, y: 61}, { x: 1345111200000, y: 68}, { x: 1347746400000, y: 67}, { x: 1350381600000, y: 73}, { x: 1353016800000, y: 63}, { x: 1355655600000, y: 54}, { x: 1358334000000, y: 67}, { x: 1360882800000, y: 74}, { x: 1363435200000, y: 81}, { x: 1366063200000, y: 89}, { x: 1368698400000, y: 83}, { x: 1371333600000, y: 88}, { x: 1373968800000, y: 86}, { x: 1376647200000, y: 81}, { x: 1379282400000, y: 83}, { x: 1381917600000, y: 95}, { x: 1384552800000, y: 86}, { x: 1387191600000, y: 83}, { x: 1389870000000, y: 89}, { x: 1392418800000, y: 90}, { x: 1394971200000, y: 94}, { x: 1397599200000, y: 100}, { x: 1400234400000, y: 100}, { x: 1402869600000, y: 99}, { x: 1405504800000, y: 99}, { x: 1408183200000, y: 93}, { x: 1410818400000, y: 97}, { x: 1413453600000, y: 98}],
|
|
|
315 |
tooltip: {
|
|
|
316 |
xDateFormat: '%B %Y',
|
|
|
317 |
valueSuffix: ' % of best month'
|
|
|
318 |
}
|
|
|
319 |
}, {
|
|
|
320 |
name: 'Revenue',
|
|
|
321 |
id: 'revenue',
|
|
|
322 |
type: 'area',
|
|
|
323 |
data: [[1257033600000, 2], [1259625600000, 3], [1262304000000, 2], [1264982400000, 3], [1267401600000, 4], [1270080000000, 4], [1272672000000, 4], [1275350400000, 4], [1277942400000, 5], [1280620800000, 7], [1283299200000, 6], [1285891200000, 9], [1288569600000, 10], [1291161600000, 8], [1293840000000, 10], [1296518400000, 13], [1298937600000, 15], [1301616000000, 14], [1304208000000, 15], [1306886400000, 16], [1309478400000, 22], [1312156800000, 19], [1314835200000, 20], [1317427200000, 32], [1320105600000, 34], [1322697600000, 36], [1325376000000, 34], [1328054400000, 40], [1330560000000, 37], [1333238400000, 35], [1335830400000, 40], [1338508800000, 38], [1341100800000, 39], [1343779200000, 43], [1346457600000, 49], [1349049600000, 43], [1351728000000, 54], [1354320000000, 44], [1356998400000, 43], [1359676800000, 43], [1362096000000, 52], [1364774400000, 52], [1367366400000, 56], [1370044800000, 62], [1372636800000, 66], [1375315200000, 62], [1377993600000, 63], [1380585600000, 60], [1383264000000, 60], [1385856000000, 58], [1388534400000, 65], [1391212800000, 52], [1393632000000, 72], [1396310400000, 57], [1398902400000, 70], [1401580800000, 63], [1404172800000, 65], [1406851200000, 65], [1409529600000, 89], [1412121600000, 100]],
|
|
|
324 |
tooltip: {
|
|
|
325 |
xDateFormat: '%B %Y',
|
|
|
326 |
valueSuffix: ' % of best month'
|
|
|
327 |
}
|
|
|
328 |
|
|
|
329 |
}, {
|
|
|
330 |
yAxis: 1,
|
|
|
331 |
name: 'Highsoft employees',
|
|
|
332 |
id: 'employees',
|
|
|
333 |
type: 'area',
|
|
|
334 |
step: 'left',
|
|
|
335 |
tooltip: {
|
|
|
336 |
headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
|
|
|
337 |
pointFormat: '{point.name}<br><b>{point.y}</b>',
|
|
|
338 |
valueSuffix: ' employees'
|
|
|
339 |
},
|
|
|
340 |
data: [
|
|
|
341 |
{ x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' },
|
|
|
342 |
{ x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' },
|
|
|
343 |
{ x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null },
|
|
|
344 |
{ x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' },
|
|
|
345 |
{ x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' },
|
|
|
346 |
{ x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' },
|
|
|
347 |
{ x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
|
|
|
348 |
{ x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' },
|
|
|
349 |
{ x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null },
|
|
|
350 |
{ x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' },
|
|
|
351 |
{ x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' },
|
|
|
352 |
{ x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' },
|
|
|
353 |
{ x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' },
|
|
|
354 |
{ x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
|
|
|
355 |
]
|
|
|
356 |
|
|
|
357 |
}]
|
|
|
358 |
};
|
|
|
359 |
|
|
|
360 |
// Add flags for important milestones. This requires Highstock.
|
|
|
361 |
if (Highcharts.seriesTypes.flags) {
|
|
|
362 |
options.series.push({
|
|
|
363 |
type: 'flags',
|
|
|
364 |
name: 'Cloud',
|
|
|
365 |
color: '#333333',
|
|
|
366 |
shape: 'squarepin',
|
|
|
367 |
y: -80,
|
|
|
368 |
data: [
|
|
|
369 |
{ x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' }
|
|
|
370 |
],
|
|
|
371 |
showInLegend: false
|
|
|
372 |
}, {
|
|
|
373 |
type: 'flags',
|
|
|
374 |
name: 'Highmaps',
|
|
|
375 |
color: '#333333',
|
|
|
376 |
shape: 'squarepin',
|
|
|
377 |
y: -55,
|
|
|
378 |
data: [
|
|
|
379 |
{ x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' }
|
|
|
380 |
],
|
|
|
381 |
showInLegend: false
|
|
|
382 |
}, {
|
|
|
383 |
type: 'flags',
|
|
|
384 |
name: 'Highcharts',
|
|
|
385 |
color: '#333333',
|
|
|
386 |
shape: 'circlepin',
|
|
|
387 |
data: [
|
|
|
388 |
{ x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' },
|
|
|
389 |
{ x: Date.UTC(2010, 6, 13), text: 'Ported from canvas to SVG rendering', title: '2.0' },
|
|
|
390 |
{ x: Date.UTC(2010, 10, 23), text: 'Dynamically resize and scale to text labels', title: '2.1' },
|
|
|
391 |
{ x: Date.UTC(2011, 9, 18), text: 'Highstock version 1.0 released', title: 'Stock', shape: 'squarepin' },
|
|
|
392 |
{ x: Date.UTC(2012, 7, 24), text: 'Gauges, polar charts and range series', title: '2.3' },
|
|
|
393 |
{ x: Date.UTC(2013, 2, 22), text: 'Multitouch support, more series types', title: '3.0' },
|
|
|
394 |
{ x: Date.UTC(2014, 3, 22), text: '3D charts, heatmaps', title: '4.0' }
|
|
|
395 |
],
|
|
|
396 |
showInLegend: false
|
|
|
397 |
}, {
|
|
|
398 |
type: 'flags',
|
|
|
399 |
name: 'Events',
|
|
|
400 |
color: '#333333',
|
|
|
401 |
fillColor: 'rgba(255,255,255,0.8)',
|
|
|
402 |
data: [
|
|
|
403 |
{ x: Date.UTC(2012, 10, 1), text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway', title: 'Award' },
|
|
|
404 |
{ x: Date.UTC(2012, 11, 25), text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.', title: 'First book' },
|
|
|
405 |
{ x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' },
|
|
|
406 |
{ x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' }
|
|
|
407 |
],
|
|
|
408 |
onSeries: 'revenue',
|
|
|
409 |
showInLegend: false
|
|
|
410 |
});
|
|
|
411 |
}
|
|
|
412 |
|
|
|
413 |
$('#container').highcharts(options);
|
|
|
414 |
});
|
|
|
415 |
</script>
|
|
|
416 |
</head>
|
|
|
417 |
<body>
|
|
|
418 |
<script src="../../js/highstock.js"></script>
|
|
|
419 |
<script src="../../js/modules/exporting.js"></script>
|
|
|
420 |
<div id="container"></div>
|
|
|
421 |
</body>
|
|
|
422 |
</html>
|