Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
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
#result {
10
	text-align: right;
11
	color: gray;
12
	min-height: 2em;
13
}
14
#table-sparkline {
15
	margin: 0 auto;
16
    border-collapse: collapse;
17
}
18
th {
19
    font-weight: bold;
20
    text-align: left;
21
}
22
td, th {
23
    padding: 5px;
24
    border-bottom: 1px solid silver;
25
    height: 20px;
26
}
27
 
28
thead th {
29
    border-top: 2px solid gray;
30
    border-bottom: 2px solid gray;
31
}
32
.highcharts-tooltip>span {
33
	background: white;
34
	border: 1px solid silver;
35
	border-radius: 3px;
36
	box-shadow: 1px 1px 2px #888;
37
	padding: 8px;
38
}
39
		</style>
40
		<script type="text/javascript">
41
 
42
$(function () {
43
    /**
44
     * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
45
     * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
46
     */
47
    Highcharts.SparkLine = function (options, callback) {
48
        var defaultOptions = {
49
            chart: {
50
                renderTo: (options.chart && options.chart.renderTo) || this,
51
                backgroundColor: null,
52
                borderWidth: 0,
53
                type: 'area',
54
                margin: [2, 0, 2, 0],
55
                width: 120,
56
                height: 20,
57
                style: {
58
                    overflow: 'visible'
59
                },
60
                skipClone: true
61
            },
62
            title: {
63
                text: ''
64
            },
65
            credits: {
66
                enabled: false
67
            },
68
            xAxis: {
69
                labels: {
70
                    enabled: false
71
                },
72
                title: {
73
                    text: null
74
                },
75
                startOnTick: false,
76
                endOnTick: false,
77
                tickPositions: []
78
            },
79
            yAxis: {
80
                endOnTick: false,
81
                startOnTick: false,
82
                labels: {
83
                    enabled: false
84
                },
85
                title: {
86
                    text: null
87
                },
88
                tickPositions: [0]
89
            },
90
            legend: {
91
                enabled: false
92
            },
93
            tooltip: {
94
                backgroundColor: null,
95
                borderWidth: 0,
96
                shadow: false,
97
                useHTML: true,
98
                hideDelay: 0,
99
                shared: true,
100
                padding: 0,
101
                positioner: function (w, h, point) {
102
                    return { x: point.plotX - w / 2, y: point.plotY - h};
103
                }
104
            },
105
            plotOptions: {
106
                series: {
107
                    animation: false,
108
                    lineWidth: 1,
109
                    shadow: false,
110
                    states: {
111
                        hover: {
112
                            lineWidth: 1
113
                        }
114
                    },
115
                    marker: {
116
                        radius: 1,
117
                        states: {
118
                            hover: {
119
                                radius: 2
120
                            }
121
                        }
122
                    },
123
                    fillOpacity: 0.25
124
                },
125
                column: {
126
                    negativeColor: '#910000',
127
                    borderColor: 'silver'
128
                }
129
            }
130
        };
131
        options = Highcharts.merge(defaultOptions, options);
132
 
133
        return new Highcharts.Chart(options, callback);
134
    };
135
 
136
    var start = +new Date(),
137
        $tds = $("td[data-sparkline]"),
138
        fullLen = $tds.length,
139
        n = 0;
140
 
141
    // Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
142
    // can take some seconds, so we split the input into chunks and apply them in timeouts
143
    // in order avoid locking up the browser process and allow interaction.
144
    function doChunk() {
145
        var time = +new Date(),
146
            i,
147
            len = $tds.length,
148
            $td,
149
            stringdata,
150
            arr,
151
            data,
152
            chart;
153
 
154
        for (i = 0; i < len; i += 1) {
155
            $td = $($tds[i]);
156
            stringdata = $td.data('sparkline');
157
            arr = stringdata.split('; ');
158
            data = $.map(arr[0].split(', '), parseFloat);
159
            chart = {};
160
 
161
            if (arr[1]) {
162
                chart.type = arr[1];
163
            }
164
            $td.highcharts('SparkLine', {
165
                series: [{
166
                    data: data,
167
                    pointStart: 1
168
                }],
169
                tooltip: {
170
                    headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
171
                    pointFormat: '<b>{point.y}.000</b> USD'
172
                },
173
                chart: chart
174
            });
175
 
176
            n += 1;
177
 
178
            // If the process takes too much time, run a timeout to allow interaction with the browser
179
            if (new Date() - time > 500) {
180
                $tds.splice(0, i + 1);
181
                setTimeout(doChunk, 0);
182
                break;
183
            }
184
 
185
            // Print a feedback on the performance
186
            if (n === fullLen) {
187
                $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
188
            }
189
        }
190
    }
191
    doChunk();
192
 
193
});
194
		</script>
195
	</head>
196
	<body>
197
<script src="../../js/highcharts.js"></script>
198
 
199
<div id="result"></div>
200
<table id="table-sparkline">
201
    <thead>
202
        <tr>
203
            <th>State</th>
204
            <th>Income</th>
205
            <th>Income per quarter</th>
206
            <th>Costs</th>
207
            <th>Costs per quarter</th>
208
            <th>Result</th>
209
            <th>Result per quarter</th>
210
        </tr>
211
    </thead>
212
    <tbody id="tbody-sparkline">
213
        <tr>
214
            <th>Alabama</th>
215
            <td>254</td>
216
            <td data-sparkline="71, 78, 39, 66 "/>
217
            <td>296</td>
218
            <td data-sparkline="68, 52, 80, 96 "/>
219
            <td>-42</td>
220
            <td data-sparkline="3, 26, -41, -30 ; column"/>
221
        </tr>
222
        <tr>
223
            <th>Alaska</th>
224
            <td>246</td>
225
            <td data-sparkline="87, 44, 74, 41 "/>
226
            <td>181</td>
227
            <td data-sparkline="29, 54, 73, 25 "/>
228
            <td>65</td>
229
            <td data-sparkline="58, -10, 1, 16 ; column"/>
230
        </tr>
231
        <tr>
232
            <th>Arizona</th>
233
            <td>101</td>
234
            <td data-sparkline="56, 12, 8, 25 "/>
235
            <td>191</td>
236
            <td data-sparkline="69, 14, 53, 55 "/>
237
            <td>-90</td>
238
            <td data-sparkline="-13, -2, -45, -30 ; column"/>
239
        </tr>
240
        <tr>
241
            <th>Arkansas</th>
242
            <td>303</td>
243
            <td data-sparkline="81, 50, 78, 94 "/>
244
            <td>76</td>
245
            <td data-sparkline="36, 15, 14, 11 "/>
246
            <td>227</td>
247
            <td data-sparkline="45, 35, 64, 83 ; column"/>
248
        </tr>
249
        <tr>
250
            <th>California</th>
251
            <td>200</td>
252
            <td data-sparkline="61, 80, 10, 49 "/>
253
            <td>217</td>
254
            <td data-sparkline="100, 8, 52, 57 "/>
255
            <td>-17</td>
256
            <td data-sparkline="-39, 72, -42, -8 ; column"/>
257
        </tr>
258
        <tr>
259
            <th>Colorado</th>
260
            <td>118</td>
261
            <td data-sparkline="13, 48, 21, 36 "/>
262
            <td>273</td>
263
            <td data-sparkline="98, 86, 8, 81 "/>
264
            <td>-155</td>
265
            <td data-sparkline="-85, -38, 13, -45 ; column"/>
266
        </tr>
267
        <tr>
268
            <th>Connecticut</th>
269
            <td>201</td>
270
            <td data-sparkline="6, 64, 44, 87 "/>
271
            <td>148</td>
272
            <td data-sparkline="60, 13, 73, 2 "/>
273
            <td>53</td>
274
            <td data-sparkline="-54, 51, -29, 85 ; column"/>
275
        </tr>
276
        <tr>
277
            <th>Delaware</th>
278
            <td>161</td>
279
            <td data-sparkline="7, 27, 49, 78 "/>
280
            <td>298</td>
281
            <td data-sparkline="19, 90, 100, 89 "/>
282
            <td>-137</td>
283
            <td data-sparkline="-12, -63, -51, -11 ; column"/>
284
        </tr>
285
        <tr>
286
            <th>District of Columbia</th>
287
            <td>106</td>
288
            <td data-sparkline="18, 39, 27, 22 "/>
289
            <td>185</td>
290
            <td data-sparkline="62, 97, 24, 2 "/>
291
            <td>-79</td>
292
            <td data-sparkline="-44, -58, 3, 20 ; column"/>
293
        </tr>
294
        <tr>
295
            <th>Florida</th>
296
            <td>249</td>
297
            <td data-sparkline="51, 24, 90, 84 "/>
298
            <td>244</td>
299
            <td data-sparkline="47, 40, 74, 83 "/>
300
            <td>5</td>
301
            <td data-sparkline="4, -16, 16, 1 ; column"/>
302
        </tr>
303
        <tr>
304
            <th>Georgia</th>
305
            <td>183</td>
306
            <td data-sparkline="36, 80, 39, 28 "/>
307
            <td>212</td>
308
            <td data-sparkline="43, 25, 52, 92 "/>
309
            <td>-29</td>
310
            <td data-sparkline="-7, 55, -13, -64 ; column"/>
311
        </tr>
312
        <tr>
313
            <th>Hawaii</th>
314
            <td>232</td>
315
            <td data-sparkline="73, 34, 74, 51 "/>
316
            <td>172</td>
317
            <td data-sparkline="1, 83, 49, 39 "/>
318
            <td>60</td>
319
            <td data-sparkline="72, -49, 25, 12 ; column"/>
320
        </tr>
321
        <tr>
322
            <th>Idaho</th>
323
            <td>166</td>
324
            <td data-sparkline="25, 43, 31, 67 "/>
325
            <td>152</td>
326
            <td data-sparkline="30, 30, 75, 17 "/>
327
            <td>14</td>
328
            <td data-sparkline="-5, 13, -44, 50 ; column"/>
329
        </tr>
330
        <tr>
331
            <th>Illinois</th>
332
            <td>336</td>
333
            <td data-sparkline="56, 84, 98, 98 "/>
334
            <td>151</td>
335
            <td data-sparkline="61, 12, 77, 1 "/>
336
            <td>185</td>
337
            <td data-sparkline="-5, 72, 21, 97 ; column"/>
338
        </tr>
339
        <tr>
340
            <th>Indiana</th>
341
            <td>216</td>
342
            <td data-sparkline="52, 87, 64, 13 "/>
343
            <td>216</td>
344
            <td data-sparkline="2, 47, 94, 73 "/>
345
            <td>0</td>
346
            <td data-sparkline="50, 40, -30, -60 ; column"/>
347
        </tr>
348
        <tr>
349
            <th>Iowa</th>
350
            <td>135</td>
351
            <td data-sparkline="41, 45, 19, 30 "/>
352
            <td>159</td>
353
            <td data-sparkline="17, 34, 45, 63 "/>
354
            <td>-24</td>
355
            <td data-sparkline="24, 11, -26, -33 ; column"/>
356
        </tr>
357
        <tr>
358
            <th>Kansas</th>
359
            <td>184</td>
360
            <td data-sparkline="52, 43, 65, 24 "/>
361
            <td>215</td>
362
            <td data-sparkline="20, 42, 97, 56 "/>
363
            <td>-31</td>
364
            <td data-sparkline="32, 1, -32, -32 ; column"/>
365
        </tr>
366
        <tr>
367
            <th>Kentucky</th>
368
            <td>289</td>
369
            <td data-sparkline="85, 74, 98, 32 "/>
370
            <td>219</td>
371
            <td data-sparkline="37, 38, 93, 51 "/>
372
            <td>70</td>
373
            <td data-sparkline="48, 36, 5, -19 ; column"/>
374
        </tr>
375
        <tr>
376
            <th>Louisiana</th>
377
            <td>257</td>
378
            <td data-sparkline="89, 18, 87, 63 "/>
379
            <td>201</td>
380
            <td data-sparkline="19, 54, 35, 93 "/>
381
            <td>56</td>
382
            <td data-sparkline="70, -36, 52, -30 ; column"/>
383
        </tr>
384
        <tr>
385
            <th>Maine</th>
386
            <td>194</td>
387
            <td data-sparkline="17, 68, 61, 48 "/>
388
            <td>133</td>
389
            <td data-sparkline="44, 35, 42, 12 "/>
390
            <td>61</td>
391
            <td data-sparkline="-27, 33, 19, 36 ; column"/>
392
        </tr>
393
        <tr>
394
            <th>Maryland</th>
395
            <td>204</td>
396
            <td data-sparkline="74, 12, 74, 44 "/>
397
            <td>157</td>
398
            <td data-sparkline="65, 58, 22, 12 "/>
399
            <td>47</td>
400
            <td data-sparkline="9, -46, 52, 32 ; column"/>
401
        </tr>
402
        <tr>
403
            <th>Massachusetts</th>
404
            <td>172</td>
405
            <td data-sparkline="44, 35, 69, 24 "/>
406
            <td>115</td>
407
            <td data-sparkline="26, 3, 69, 17 "/>
408
            <td>57</td>
409
            <td data-sparkline="18, 32, 0, 7 ; column"/>
410
        </tr>
411
        <tr>
412
            <th>Michigan</th>
413
            <td>177</td>
414
            <td data-sparkline="99, 26, 13, 39 "/>
415
            <td>185</td>
416
            <td data-sparkline="20, 37, 99, 29 "/>
417
            <td>-8</td>
418
            <td data-sparkline="79, -11, -86, 10 ; column"/>
419
        </tr>
420
        <tr>
421
            <th>Minnesota</th>
422
            <td>99</td>
423
            <td data-sparkline="34, 30, 16, 19 "/>
424
            <td>137</td>
425
            <td data-sparkline="49, 43, 24, 21 "/>
426
            <td>-38</td>
427
            <td data-sparkline="-15, -13, -8, -2 ; column"/>
428
        </tr>
429
        <tr>
430
            <th>Mississippi</th>
431
            <td>205</td>
432
            <td data-sparkline="38, 75, 31, 61 "/>
433
            <td>179</td>
434
            <td data-sparkline="0, 68, 100, 11 "/>
435
            <td>26</td>
436
            <td data-sparkline="38, 7, -69, 50 ; column"/>
437
        </tr>
438
        <tr>
439
            <th>Missouri</th>
440
            <td>135</td>
441
            <td data-sparkline="37, 48, 2, 48 "/>
442
            <td>202</td>
443
            <td data-sparkline="41, 64, 17, 80 "/>
444
            <td>-67</td>
445
            <td data-sparkline="-4, -16, -15, -32 ; column"/>
446
        </tr>
447
        <tr>
448
            <th>Montana</th>
449
            <td>195</td>
450
            <td data-sparkline="48, 81, 38, 28 "/>
451
            <td>237</td>
452
            <td data-sparkline="44, 33, 86, 74 "/>
453
            <td>-42</td>
454
            <td data-sparkline="4, 48, -48, -46 ; column"/>
455
        </tr>
456
        <tr>
457
            <th>Nebraska</th>
458
            <td>286</td>
459
            <td data-sparkline="98, 55, 82, 51 "/>
460
            <td>232</td>
461
            <td data-sparkline="89, 54, 28, 61 "/>
462
            <td>54</td>
463
            <td data-sparkline="9, 1, 54, -10 ; column"/>
464
        </tr>
465
        <tr>
466
            <th>Nevada</th>
467
            <td>221</td>
468
            <td data-sparkline="66, 4, 57, 94 "/>
469
            <td>214</td>
470
            <td data-sparkline="59, 39, 94, 22 "/>
471
            <td>7</td>
472
            <td data-sparkline="7, -35, -37, 72 ; column"/>
473
        </tr>
474
        <tr>
475
            <th>New Hampshire</th>
476
            <td>136</td>
477
            <td data-sparkline="32, 21, 1, 82 "/>
478
            <td>306</td>
479
            <td data-sparkline="88, 85, 65, 68 "/>
480
            <td>-170</td>
481
            <td data-sparkline="-56, -64, -64, 14 ; column"/>
482
        </tr>
483
        <tr>
484
            <th>New Jersey</th>
485
            <td>194</td>
486
            <td data-sparkline="31, 40, 24, 99 "/>
487
            <td>147</td>
488
            <td data-sparkline="7, 45, 12, 83 "/>
489
            <td>47</td>
490
            <td data-sparkline="24, -5, 12, 16 ; column"/>
491
        </tr>
492
        <tr>
493
            <th>New Mexico</th>
494
            <td>207</td>
495
            <td data-sparkline="66, 93, 18, 30 "/>
496
            <td>261</td>
497
            <td data-sparkline="97, 28, 79, 57 "/>
498
            <td>-54</td>
499
            <td data-sparkline="-31, 65, -61, -27 ; column"/>
500
        </tr>
501
        <tr>
502
            <th>New York</th>
503
            <td>316</td>
504
            <td data-sparkline="48, 95, 76, 97 "/>
505
            <td>193</td>
506
            <td data-sparkline="68, 5, 97, 23 "/>
507
            <td>123</td>
508
            <td data-sparkline="-20, 90, -21, 74 ; column"/>
509
        </tr>
510
        <tr>
511
            <th>North Carolina</th>
512
            <td>175</td>
513
            <td data-sparkline="31, 71, 2, 71 "/>
514
            <td>188</td>
515
            <td data-sparkline="93, 5, 81, 9 "/>
516
            <td>-13</td>
517
            <td data-sparkline="-62, 66, -79, 62 ; column"/>
518
        </tr>
519
        <tr>
520
            <th>North Dakota</th>
521
            <td>181</td>
522
            <td data-sparkline="3, 90, 62, 26 "/>
523
            <td>288</td>
524
            <td data-sparkline="70, 63, 82, 73 "/>
525
            <td>-107</td>
526
            <td data-sparkline="-67, 27, -20, -47 ; column"/>
527
        </tr>
528
        <tr>
529
            <th>Ohio</th>
530
            <td>189</td>
531
            <td data-sparkline="70, 50, 6, 63 "/>
532
            <td>163</td>
533
            <td data-sparkline="21, 94, 4, 44 "/>
534
            <td>26</td>
535
            <td data-sparkline="49, -44, 2, 19 ; column"/>
536
        </tr>
537
        <tr>
538
            <th>Oklahoma</th>
539
            <td>188</td>
540
            <td data-sparkline="66, 46, 53, 23 "/>
541
            <td>172</td>
542
            <td data-sparkline="26, 25, 35, 86 "/>
543
            <td>16</td>
544
            <td data-sparkline="40, 21, 18, -63 ; column"/>
545
        </tr>
546
        <tr>
547
            <th>Oregon</th>
548
            <td>165</td>
549
            <td data-sparkline="82, 31, 38, 14 "/>
550
            <td>257</td>
551
            <td data-sparkline="91, 9, 80, 77 "/>
552
            <td>-92</td>
553
            <td data-sparkline="-9, 22, -42, -63 ; column"/>
554
        </tr>
555
        <tr>
556
            <th>Pennsylvania</th>
557
            <td>268</td>
558
            <td data-sparkline="33, 88, 82, 65 "/>
559
            <td>129</td>
560
            <td data-sparkline="30, 29, 41, 29 "/>
561
            <td>139</td>
562
            <td data-sparkline="3, 59, 41, 36 ; column"/>
563
        </tr>
564
        <tr>
565
            <th>Rhode Island</th>
566
            <td>164</td>
567
            <td data-sparkline="8, 86, 32, 38 "/>
568
            <td>182</td>
569
            <td data-sparkline="88, 8, 18, 68 "/>
570
            <td>-18</td>
571
            <td data-sparkline="-80, 78, 14, -30 ; column"/>
572
        </tr>
573
        <tr>
574
            <th>South Carolina</th>
575
            <td>91</td>
576
            <td data-sparkline="24, 18, 0, 49 "/>
577
            <td>193</td>
578
            <td data-sparkline="72, 62, 21, 38 "/>
579
            <td>-102</td>
580
            <td data-sparkline="-48, -44, -21, 11 ; column"/>
581
        </tr>
582
        <tr>
583
            <th>South Dakota</th>
584
            <td>184</td>
585
            <td data-sparkline="73, 17, 64, 30 "/>
586
            <td>221</td>
587
            <td data-sparkline="21, 91, 57, 52 "/>
588
            <td>-37</td>
589
            <td data-sparkline="52, -74, 7, -22 ; column"/>
590
        </tr>
591
        <tr>
592
            <th>Tennessee</th>
593
            <td>233</td>
594
            <td data-sparkline="92, 24, 25, 92 "/>
595
            <td>131</td>
596
            <td data-sparkline="5, 18, 42, 66 "/>
597
            <td>102</td>
598
            <td data-sparkline="87, 6, -17, 26 ; column"/>
599
        </tr>
600
        <tr>
601
            <th>Texas</th>
602
            <td>211</td>
603
            <td data-sparkline="33, 80, 68, 30 "/>
604
            <td>225</td>
605
            <td data-sparkline="86, 58, 36, 45 "/>
606
            <td>-14</td>
607
            <td data-sparkline="-53, 22, 32, -15 ; column"/>
608
        </tr>
609
        <tr>
610
            <th>Utah</th>
611
            <td>362</td>
612
            <td data-sparkline="89, 98, 96, 79 "/>
613
            <td>225</td>
614
            <td data-sparkline="35, 51, 88, 51 "/>
615
            <td>137</td>
616
            <td data-sparkline="54, 47, 8, 28 ; column"/>
617
        </tr>
618
        <tr>
619
            <th>Vermont</th>
620
            <td>119</td>
621
            <td data-sparkline="4, 19, 56, 40 "/>
622
            <td>152</td>
623
            <td data-sparkline="17, 66, 27, 42 "/>
624
            <td>-33</td>
625
            <td data-sparkline="-13, -47, 29, -2 ; column"/>
626
        </tr>
627
        <tr>
628
            <th>Virginia</th>
629
            <td>127</td>
630
            <td data-sparkline="24, 27, 41, 35 "/>
631
            <td>71</td>
632
            <td data-sparkline="30, 2, 36, 3 "/>
633
            <td>56</td>
634
            <td data-sparkline="-6, 25, 5, 32 ; column"/>
635
        </tr>
636
        <tr>
637
            <th>Washington</th>
638
            <td>165</td>
639
            <td data-sparkline="40, 11, 63, 51 "/>
640
            <td>245</td>
641
            <td data-sparkline="46, 41, 94, 64 "/>
642
            <td>-80</td>
643
            <td data-sparkline="-6, -30, -31, -13 ; column"/>
644
        </tr>
645
        <tr>
646
            <th>West Virginia</th>
647
            <td>248</td>
648
            <td data-sparkline="66, 56, 97, 29 "/>
649
            <td>171</td>
650
            <td data-sparkline="65, 53, 37, 16 "/>
651
            <td>77</td>
652
            <td data-sparkline="1, 3, 60, 13 ; column"/>
653
        </tr>
654
        <tr>
655
            <th>Wisconsin</th>
656
            <td>183</td>
657
            <td data-sparkline="24, 55, 21, 83 "/>
658
            <td>224</td>
659
            <td data-sparkline="80, 64, 13, 67 "/>
660
            <td>-41</td>
661
            <td data-sparkline="-56, -9, 8, 16 ; column"/>
662
        </tr>
663
        <tr>
664
            <th>Wyoming</th>
665
            <td>231</td>
666
            <td data-sparkline="52, 49, 97, 33 "/>
667
            <td>251</td>
668
            <td data-sparkline="96, 50, 23, 82 "/>
669
            <td>-20</td>
670
            <td data-sparkline="-44, -1, 74, -49 ; column"/>
671
        </tr>
672
    </tbody>
673
</table>
674
	</body>
675
</html>