This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdefault.js
More file actions
797 lines (797 loc) · 74.6 KB
/
default.js
File metadata and controls
797 lines (797 loc) · 74.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Default sample for sparkline
*/
var React = require("react");
var ej2_react_charts_1 = require("@syncfusion/ej2-react-charts");
var sample_base_1 = require("../common/sample-base");
var SAMPLE_CSS = "\n .control-fluid {\n\t\tpadding: 0px !important;\n }";
var titleStyle = { "width": "400px", "text-align": "center", "font-size": "17px", "margin": "auto" };
var centerAlign = { "text-align": "center" };
var width100 = { width: "100%" };
var sparklineStyle1 = { "width": "150px", "height": "50px", "text-align": "center" };
var Default = (function (_super) {
__extends(Default, _super);
function Default() {
return _super !== null && _super.apply(this, arguments) || this;
}
Default.prototype.load = function (args) {
var theme = location.hash.split('/')[1];
theme = theme ? theme : 'Material';
args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1));
};
Default.prototype.render = function () {
return (React.createElement("div", { className: 'control-pane' },
React.createElement("style", null, SAMPLE_CSS),
React.createElement("div", { className: "control-section" },
React.createElement("div", { id: "spark-container", className: "row" },
React.createElement("div", { className: "cols-sample-area", style: { "margin": "10" } },
React.createElement("div", { style: titleStyle }, "Population comparision between various countries"),
React.createElement("div", { style: { "text-align": "center" } }, "(From 2005 to 2014)"),
React.createElement("br", null),
React.createElement("br", null),
React.createElement("table", { style: width100 },
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", { style: centerAlign }),
React.createElement("td", null,
React.createElement("div", { id: "population", style: sparklineStyle1 },
React.createElement("b", null, "Population"))),
React.createElement("td", null,
React.createElement("div", { id: "density", style: sparklineStyle1 },
React.createElement("b", null, "Population Density"))),
React.createElement("td", null,
React.createElement("div", { id: "growth", style: sparklineStyle1 },
React.createElement("b", null, "Population Growth Rate"))),
React.createElement("td", null,
React.createElement("div", { id: "birth", style: sparklineStyle1 },
React.createElement("b", null, "Birth Rate")))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "Australia")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'a-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: 20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: 21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: 22262500 },
{ x: 9, xval: '2014', yval: 22507620 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'a-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 2.61 },
{ x: 1, xval: '2006', yval: 2.64 },
{ x: 2, xval: '2007', yval: 2.66 },
{ x: 3, xval: '2008', yval: 2.73 },
{ x: 4, xval: '2009', yval: 2.75 },
{ x: 5, xval: '2010', yval: 2.78 },
{ x: 6, xval: '2011', yval: 2.81 },
{ x: 7, xval: '2012', yval: 2.84 },
{ x: 8, xval: '2013', yval: 2.88 },
{ x: 9, xval: '2014', yval: 2.91 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'a-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: -1 },
{ x: 2, xval: '2007', yval: -1 },
{ x: 3, xval: '2008', yval: 1 },
{ x: 4, xval: '2009', yval: -1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: -1 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: -1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'a-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 12 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 12.26 },
{ x: 1, xval: '2006', yval: 12.14 },
{ x: 2, xval: '2007', yval: 12.02 },
{ x: 3, xval: '2008', yval: 12.55 },
{ x: 4, xval: '2009', yval: 12.47 },
{ x: 5, xval: '2010', yval: 12.39 },
{ x: 6, xval: '2011', yval: 12.33 },
{ x: 7, xval: '2012', yval: 12.28 },
{ x: 8, xval: '2013', yval: 12.23 },
{ x: 9, xval: '2014', yval: 12.19 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "Canada")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'c-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 32805040 },
{ x: 1, xval: '2006', yval: 33098930 },
{ x: 2, xval: '2007', yval: 33390140 },
{ x: 3, xval: '2008', yval: 33212700 },
{ x: 4, xval: '2009', yval: 33487210 },
{ x: 5, xval: '2010', yval: 33759740 },
{ x: 6, xval: '2011', yval: 34030590 },
{ x: 7, xval: '2012', yval: 34300080 },
{ x: 8, xval: '2013', yval: 34568210 },
{ x: 9, xval: '2014', yval: 34834840 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'c-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 3.29 },
{ x: 1, xval: '2006', yval: 3.31 },
{ x: 2, xval: '2007', yval: 3.34 },
{ x: 3, xval: '2008', yval: 3.33 },
{ x: 4, xval: '2009', yval: 3.35 },
{ x: 5, xval: '2010', yval: 3.38 },
{ x: 6, xval: '2011', yval: 3.41 },
{ x: 7, xval: '2012', yval: 3.44 },
{ x: 8, xval: '2013', yval: 3.46 },
{ x: 9, xval: '2014', yval: 3.49 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'c-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: -1 },
{ x: 2, xval: '2007', yval: -1 },
{ x: 3, xval: '2008', yval: -1 },
{ x: 4, xval: '2009', yval: -1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: -1 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: -1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'c-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 10.20 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 10.84 },
{ x: 1, xval: '2006', yval: 10.78 },
{ x: 2, xval: '2007', yval: 10.75 },
{ x: 3, xval: '2008', yval: 10.29 },
{ x: 4, xval: '2009', yval: 10.28 },
{ x: 5, xval: '2010', yval: 10.28 },
{ x: 6, xval: '2011', yval: 10.28 },
{ x: 7, xval: '2012', yval: 10.28 },
{ x: 8, xval: '2013', yval: 10.28 },
{ x: 9, xval: '2014', yval: 10.29 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "China")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'ch-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 1306314000 },
{ x: 1, xval: '2006', yval: 1313974000 },
{ x: 2, xval: '2007', yval: 1321852000 },
{ x: 3, xval: '2008', yval: 1330045000 },
{ x: 4, xval: '2009', yval: 1338613000 },
{ x: 5, xval: '2010', yval: 1330141000 },
{ x: 6, xval: '2011', yval: 1336718000 },
{ x: 7, xval: '2012', yval: 1343240000 },
{ x: 8, xval: '2013', yval: 1349586000 },
{ x: 9, xval: '2014', yval: 1355693000 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'ch-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 136.12 },
{ x: 1, xval: '2006', yval: 136.92 },
{ x: 2, xval: '2007', yval: 137.74 },
{ x: 3, xval: '2008', yval: 138.59 },
{ x: 4, xval: '2009', yval: 139.48 },
{ x: 5, xval: '2010', yval: 138.6 },
{ x: 6, xval: '2011', yval: 139.29 },
{ x: 7, xval: '2012', yval: 139.97 },
{ x: 8, xval: '2013', yval: 140.63 },
{ x: 9, xval: '2014', yval: 141.26 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'ch-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: 1 },
{ x: 2, xval: '2007', yval: 1 },
{ x: 3, xval: '2008', yval: 1 },
{ x: 4, xval: '2009', yval: 1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: 0 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: -1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'ch-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 12 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 13.14 },
{ x: 1, xval: '2006', yval: 13.25 },
{ x: 2, xval: '2007', yval: 13.45 },
{ x: 3, xval: '2008', yval: 13.71 },
{ x: 4, xval: '2009', yval: 14 },
{ x: 5, xval: '2010', yval: 12.17 },
{ x: 6, xval: '2011', yval: 12.29 },
{ x: 7, xval: '2012', yval: 12.31 },
{ x: 8, xval: '2013', yval: 12.25 },
{ x: 9, xval: '2014', yval: 12.17 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "France")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'f-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 60656180 },
{ x: 1, xval: '2006', yval: 60876140 },
{ x: 2, xval: '2007', yval: 63713930 },
{ x: 3, xval: '2008', yval: 64057790 },
{ x: 4, xval: '2009', yval: 64057790 },
{ x: 5, xval: '2010', yval: 64768390 },
{ x: 6, xval: '2011', yval: 65312250 },
{ x: 7, xval: '2012', yval: 65630690 },
{ x: 8, xval: '2013', yval: 65951610 },
{ x: 9, xval: '2014', yval: 66259010 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'f-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 110.88 },
{ x: 1, xval: '2006', yval: 111.28 },
{ x: 2, xval: '2007', yval: 99.02 },
{ x: 3, xval: '2008', yval: 99.56 },
{ x: 4, xval: '2009', yval: 99.56 },
{ x: 5, xval: '2010', yval: 100.66 },
{ x: 6, xval: '2011', yval: 101.45 },
{ x: 7, xval: '2012', yval: 101.94 },
{ x: 8, xval: '2013', yval: 102.44 },
{ x: 9, xval: '2014', yval: 102.92 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'f-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: -1 },
{ x: 2, xval: '2007', yval: 1 },
{ x: 3, xval: '2008', yval: -1 },
{ x: 4, xval: '2009', yval: -1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: -1 },
{ x: 7, xval: '2012', yval: 0 },
{ x: 8, xval: '2013', yval: -1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'f-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 11.5 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 12.15 },
{ x: 1, xval: '2006', yval: 11.99 },
{ x: 2, xval: '2007', yval: 12.91 },
{ x: 3, xval: '2008', yval: 12.73 },
{ x: 4, xval: '2009', yval: 12.57 },
{ x: 5, xval: '2010', yval: 12.43 },
{ x: 6, xval: '2011', yval: 12.29 },
{ x: 7, xval: '2012', yval: 12.72 },
{ x: 8, xval: '2013', yval: 12.6 },
{ x: 9, xval: '2014', yval: 12.6 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "Germany")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'g-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 82431390 },
{ x: 1, xval: '2006', yval: 82422300 },
{ x: 2, xval: '2007', yval: 82400990 },
{ x: 3, xval: '2008', yval: 82369550 },
{ x: 4, xval: '2009', yval: 82329760 },
{ x: 5, xval: '2010', yval: 82282990 },
{ x: 6, xval: '2011', yval: 81471830 },
{ x: 7, xval: '2012', yval: 81305860 },
{ x: 8, xval: '2013', yval: 81147260 },
{ x: 9, xval: '2014', yval: 80996690 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'g-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 230.89 },
{ x: 1, xval: '2006', yval: 230.86 },
{ x: 2, xval: '2007', yval: 230.8 },
{ x: 3, xval: '2008', yval: 230.71 },
{ x: 4, xval: '2009', yval: 230.6 },
{ x: 5, xval: '2010', yval: 230.47 },
{ x: 6, xval: '2011', yval: 228.2 },
{ x: 7, xval: '2012', yval: 227.73 },
{ x: 8, xval: '2013', yval: 227.29 },
{ x: 9, xval: '2014', yval: 226.87 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'g-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 0 },
{ x: 1, xval: '2006', yval: 1 },
{ x: 2, xval: '2007', yval: -1 },
{ x: 3, xval: '2008', yval: -1 },
{ x: 4, xval: '2009', yval: -1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: 1 },
{ x: 7, xval: '2012', yval: 1 },
{ x: 8, xval: '2013', yval: 1 },
{ x: 9, xval: '2014', yval: 1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'g-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 8 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 8.33 },
{ x: 1, xval: '2006', yval: 8.25 },
{ x: 2, xval: '2007', yval: 8.2 },
{ x: 3, xval: '2008', yval: 8.18 },
{ x: 4, xval: '2009', yval: 8.18 },
{ x: 5, xval: '2010', yval: 8.21 },
{ x: 6, xval: '2011', yval: 8.3 },
{ x: 7, xval: '2012', yval: 8.33 },
{ x: 8, xval: '2013', yval: 8.37 },
{ x: 9, xval: '2014', yval: 8.42 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "India")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'i-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 1080264000 },
{ x: 1, xval: '2006', yval: 1095352000 },
{ x: 2, xval: '2007', yval: 1129866000 },
{ x: 3, xval: '2008', yval: 1147996000 },
{ x: 4, xval: '2009', yval: 1166079000 },
{ x: 5, xval: '2010', yval: 1173108000 },
{ x: 6, xval: '2011', yval: 1189173000 },
{ x: 7, xval: '2012', yval: 1205074000 },
{ x: 8, xval: '2013', yval: 1220800000 },
{ x: 9, xval: '2014', yval: 1236345000 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'i-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 328.59 },
{ x: 1, xval: '2006', yval: 333.18 },
{ x: 2, xval: '2007', yval: 343.68 },
{ x: 3, xval: '2008', yval: 349.19 },
{ x: 4, xval: '2009', yval: 354.73 },
{ x: 5, xval: '2010', yval: 356.86 },
{ x: 6, xval: '2011', yval: 361.75 },
{ x: 7, xval: '2012', yval: 366.59 },
{ x: 8, xval: '2013', yval: 371.37 },
{ x: 9, xval: '2014', yval: 376.1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'i-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: -1 },
{ x: 2, xval: '2007', yval: 1 },
{ x: 3, xval: '2008', yval: -1 },
{ x: 4, xval: '2009', yval: -1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: -1 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: -1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'i-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 19 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 22.32 },
{ x: 1, xval: '2006', yval: 22.01 },
{ x: 2, xval: '2007', yval: 22.69 },
{ x: 3, xval: '2008', yval: 22.22 },
{ x: 4, xval: '2009', yval: 21.76 },
{ x: 5, xval: '2010', yval: 21.34 },
{ x: 6, xval: '2011', yval: 20.97 },
{ x: 7, xval: '2012', yval: 20.6 },
{ x: 8, xval: '2013', yval: 20.24 },
{ x: 9, xval: '2014', yval: 19.89 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "Russia")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'r-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 143420300 },
{ x: 1, xval: '2006', yval: 142893500 },
{ x: 2, xval: '2007', yval: 141377800 },
{ x: 3, xval: '2008', yval: 140702100 },
{ x: 4, xval: '2009', yval: 140041200 },
{ x: 5, xval: '2010', yval: 139390200 },
{ x: 6, xval: '2011', yval: 138739900 },
{ x: 7, xval: '2012', yval: 142517700 },
{ x: 8, xval: '2013', yval: 142500500 },
{ x: 9, xval: '2014', yval: 142470300 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'r-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 8.4 },
{ x: 1, xval: '2006', yval: 8.37 },
{ x: 2, xval: '2007', yval: 8.28 },
{ x: 3, xval: '2008', yval: 8.24 },
{ x: 4, xval: '2009', yval: 8.19 },
{ x: 5, xval: '2010', yval: 8.15 },
{ x: 6, xval: '2011', yval: 8.11 },
{ x: 7, xval: '2012', yval: 8.34 },
{ x: 8, xval: '2013', yval: 8.33 },
{ x: 9, xval: '2014', yval: 8.33 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'r-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: 0 },
{ x: 2, xval: '2007', yval: -1 },
{ x: 3, xval: '2008', yval: 1 },
{ x: 4, xval: '2009', yval: 0 },
{ x: 5, xval: '2010', yval: 0 },
{ x: 6, xval: '2011', yval: 0 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: 1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'r-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 9.5 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 9.8 },
{ x: 1, xval: '2006', yval: 9.95 },
{ x: 2, xval: '2007', yval: 10.92 },
{ x: 3, xval: '2008', yval: 11.03 },
{ x: 4, xval: '2009', yval: 11.1 },
{ x: 5, xval: '2010', yval: 11.11 },
{ x: 6, xval: '2011', yval: 11.05 },
{ x: 7, xval: '2012', yval: 10.94 },
{ x: 8, xval: '2013', yval: 12.11 },
{ x: 9, xval: '2014', yval: 11.87 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "Sweden")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'sw-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 9001774 },
{ x: 1, xval: '2006', yval: 9016596 },
{ x: 2, xval: '2007', yval: 9031088 },
{ x: 3, xval: '2008', yval: 9045389 },
{ x: 4, xval: '2009', yval: 9059651 },
{ x: 5, xval: '2010', yval: 9074055 },
{ x: 6, xval: '2011', yval: 9074055 },
{ x: 7, xval: '2012', yval: 9103788 },
{ x: 8, xval: '2013', yval: 9119423 },
{ x: 9, xval: '2014', yval: 9723809 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'sw-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 20.01 },
{ x: 1, xval: '2006', yval: 20.04 },
{ x: 2, xval: '2007', yval: 20.07 },
{ x: 3, xval: '2008', yval: 20.1 },
{ x: 4, xval: '2009', yval: 20.12 },
{ x: 5, xval: '2010', yval: 20.15 },
{ x: 6, xval: '2011', yval: 20.18 },
{ x: 7, xval: '2012', yval: 20.22 },
{ x: 8, xval: '2013', yval: 20.25 },
{ x: 9, xval: '2014', yval: 21.59 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'sw-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: -1 },
{ x: 2, xval: '2007', yval: 0 },
{ x: 3, xval: '2008', yval: 0 },
{ x: 4, xval: '2009', yval: 0 },
{ x: 5, xval: '2010', yval: 0 },
{ x: 6, xval: '2011', yval: 0 },
{ x: 7, xval: '2012', yval: 1 },
{ x: 8, xval: '2013', yval: 1 },
{ x: 9, xval: '2014', yval: 1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'sw-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 10 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 10.36 },
{ x: 1, xval: '2006', yval: 10.27 },
{ x: 2, xval: '2007', yval: 10.2 },
{ x: 3, xval: '2008', yval: 10.15 },
{ x: 4, xval: '2009', yval: 10.13 },
{ x: 5, xval: '2010', yval: 10.14 },
{ x: 6, xval: '2011', yval: 10.18 },
{ x: 7, xval: '2012', yval: 10.24 },
{ x: 8, xval: '2013', yval: 10.33 },
{ x: 9, xval: '2014', yval: 11.92 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "United Kingdom")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'uk-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 60441460 },
{ x: 1, xval: '2006', yval: 60609150 },
{ x: 2, xval: '2007', yval: 60776240 },
{ x: 3, xval: '2008', yval: 60943910 },
{ x: 4, xval: '2009', yval: 61113200 },
{ x: 5, xval: '2010', yval: 62348450 },
{ x: 6, xval: '2011', yval: 62698360 },
{ x: 7, xval: '2012', yval: 63047160 },
{ x: 8, xval: '2013', yval: 63395580 },
{ x: 9, xval: '2014', yval: 63742980 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'uk-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 246.88 },
{ x: 1, xval: '2006', yval: 247.57 },
{ x: 2, xval: '2007', yval: 248.25 },
{ x: 3, xval: '2008', yval: 248.93 },
{ x: 4, xval: '2009', yval: 250.86 },
{ x: 5, xval: '2010', yval: 255.94 },
{ x: 6, xval: '2011', yval: 257.37 },
{ x: 7, xval: '2012', yval: 258.8 },
{ x: 8, xval: '2013', yval: 260.23 },
{ x: 9, xval: '2014', yval: 261.66 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'uk-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: 0 },
{ x: 2, xval: '2007', yval: 0 },
{ x: 3, xval: '2008', yval: 0 },
{ x: 4, xval: '2009', yval: 0 },
{ x: 5, xval: '2010', yval: 1 },
{ x: 6, xval: '2011', yval: 0 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: 0 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'uk-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 10 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 10.78 },
{ x: 1, xval: '2006', yval: 10.71 },
{ x: 2, xval: '2007', yval: 10.67 },
{ x: 3, xval: '2008', yval: 10.65 },
{ x: 4, xval: '2009', yval: 10.65 },
{ x: 5, xval: '2010', yval: 12.34 },
{ x: 6, xval: '2011', yval: 12.29 },
{ x: 7, xval: '2012', yval: 12.27 },
{ x: 8, xval: '2013', yval: 12.26 },
{ x: 9, xval: '2014', yval: 12.22 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] })))),
React.createElement("tr", { style: { "height": "80px" } },
React.createElement("td", { style: centerAlign },
React.createElement("b", null, "United Sates")),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'us-spark1-container', height: '50px', width: '150px', lineWidth: 2, type: 'Line', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', format: "n", useGroupingSeparator: true, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
trackLineSettings: {
visible: true,
color: '#fc5070',
width: 2
}
}, dataSource: [
{ x: 0, xval: '2005', yval: 295734100 },
{ x: 1, xval: '2006', yval: 298444200 },
{ x: 2, xval: '2007', yval: 301139900 },
{ x: 3, xval: '2008', yval: 303824600 },
{ x: 4, xval: '2009', yval: 307212100 },
{ x: 5, xval: '2010', yval: 310232900 },
{ x: 6, xval: '2011', yval: 313232000 },
{ x: 7, xval: '2012', yval: 313847500 },
{ x: 8, xval: '2013', yval: 316668600 },
{ x: 9, xval: '2014', yval: 318892100 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'us-spark2-container', height: '50px', width: '150px', lineWidth: 2, type: 'Area', valueType: 'Category', fill: '#3C78EF', opacity: 1, border: { color: '#fc5070', width: 2 }, negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 30.71 },
{ x: 1, xval: '2006', yval: 30.99 },
{ x: 2, xval: '2007', yval: 30.65 },
{ x: 3, xval: '2008', yval: 30.92 },
{ x: 4, xval: '2009', yval: 31.26 },
{ x: 5, xval: '2010', yval: 31.57 },
{ x: 6, xval: '2011', yval: 31.88 },
{ x: 7, xval: '2012', yval: 31.94 },
{ x: 8, xval: '2013', yval: 32.23 },
{ x: 9, xval: '2014', yval: 32.45 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'us-spark3-container', height: '50px', width: '150px', lineWidth: 2, type: 'WinLoss', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 1 },
{ x: 1, xval: '2006', yval: -1 },
{ x: 2, xval: '2007', yval: -1 },
{ x: 3, xval: '2008', yval: -1 },
{ x: 4, xval: '2009', yval: 1 },
{ x: 5, xval: '2010', yval: -1 },
{ x: 6, xval: '2011', yval: -1 },
{ x: 7, xval: '2012', yval: -1 },
{ x: 8, xval: '2013', yval: -1 },
{ x: 9, xval: '2014', yval: -1 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))),
React.createElement("td", null,
React.createElement(ej2_react_charts_1.SparklineComponent, { load: this.load.bind(this), id: 'us-spark4-container', height: '50px', width: '150px', lineWidth: 2, type: 'Column', valueType: 'Category', fill: '#3C78EF', negativePointColor: '#fc5070', axisSettings: { minY: 13 }, tooltipSettings: {
visible: true, format: '${xval} : ${yval}',
}, dataSource: [
{ x: 0, xval: '2005', yval: 14.14 },
{ x: 1, xval: '2006', yval: 14.14 },
{ x: 2, xval: '2007', yval: 14.16 },
{ x: 3, xval: '2008', yval: 14.18 },
{ x: 4, xval: '2009', yval: 13.82 },
{ x: 5, xval: '2010', yval: 13.83 },
{ x: 6, xval: '2011', yval: 13.83 },
{ x: 7, xval: '2012', yval: 13.68 },
{ x: 8, xval: '2013', yval: 13.66 },
{ x: 9, xval: '2014', yval: 13.42 },
], xName: 'xval', yName: 'yval' },
React.createElement(ej2_react_charts_1.Inject, { services: [ej2_react_charts_1.SparklineTooltip] }))))))))),
React.createElement("div", { style: { "float": "right", "margin-right": "10px" } },
"Source:",
React.createElement("a", { href: "https://www.indexmundi.com/g/g.aspx?v=21&v=21000&v=24&v=25&v=27&c=as&c=ch&c=fr&c=gm&c=in&c=rs&c=sn&c=sz&c=uk&c=us&l=en/", target: "_blank" }, " www.indexmundi.com")),
React.createElement("div", { id: "action-description" },
React.createElement("p", null, "This sample visualizes population, population density, population growth rate, and birth rate of various countries from 2005 to 2014.")),
React.createElement("div", { id: "description" },
React.createElement("p", null, "In this example, you can see how to render a sparkline in a table. The color and type of the sparklines have been customized. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch enabled devices."),
React.createElement("b", null, "Injecting Module"),
React.createElement("p", null,
"Sparkline component features are segregated into individual feature-wise modules. To use tooltip, inject the ",
React.createElement("code", null, "SparklineTooltip"),
" module using the ",
React.createElement("code", null, "Sparkline.Inject(SparklineTooltip)"),
" method."))));
};
return Default;
}(sample_base_1.SampleBase));
exports.Default = Default;