01 | { |
02 | data: { |
03 | dataSets: [ |
04 | { |
05 | id: "dataSet1" , |
06 | sourceUrl: "./../../csv-data/ixic_daily_short.csv" , |
07 | csvSettings: { |
08 | ignoreFirstRow: true , |
09 | rowsSeparator: "\n" |
10 | } , |
11 | locale: { |
12 | dateTime: { |
13 | format: "%yyyy%MM%dd" |
14 | } |
15 | } |
16 | } |
17 | ] , |
18 | dataProviders: { |
19 | generalDataProviders: [ |
20 | { |
21 | dataSet: "dataSet1" , |
22 | id: "s1" , |
23 | fields: [ |
24 | { |
25 | type: "Value" , |
26 | column: 4 , |
27 | approximationType: "Close" |
28 | } , |
29 | { |
30 | type: "Volume" , |
31 | column: 5 , |
32 | approximationType: "Average" |
33 | } |
34 | ] |
35 | } |
36 | ] , |
37 | scrollerDataProviders: [ |
38 | { |
39 | dataSet: "dataSet1" , |
40 | column: 4 |
41 | } |
42 | ] |
43 | } |
44 | } , |
45 | settings: { |
46 | tooltipSettings: { |
47 | enabled: true |
48 | } , |
49 | background: { |
50 | fill: { |
51 | type: "Solid" , |
52 | color: "#161415" |
53 | } |
54 | } , |
55 | outsideMargin: { |
56 | all: 0 |
57 | } , |
58 | insideMargin: { |
59 | right: 50 , |
60 | top: 20 , |
61 | left: 20 , |
62 | bottom: 20 |
63 | } , |
64 | charts: [ |
65 | { |
66 | id: "idMainChart" , |
67 | height: 100 , |
68 | legend: { |
69 | enabled: true , |
70 | padding: 0 , |
71 | dateTime: { |
72 | enabled: false |
73 | } , |
74 | title: { |
75 | font: { |
76 | color: "#F0F0F0" |
77 | } |
78 | } , |
79 | background: { |
80 | enabled: true , |
81 | fill: { |
82 | type: "Gradient" , |
83 | color: "Black" , |
84 | opacity: 1 , |
85 | gradient: { |
86 | keys: [ |
87 | { |
88 | color: "#303030" |
89 | } , |
90 | { |
91 | color: "#000000" |
92 | } |
93 | ] |
94 | } |
95 | } , |
96 | border: { |
97 | enabled: true , |
98 | color: "#474646" , |
99 | opacity: 1 |
100 | } |
101 | } |
102 | } , |
103 | background: { |
104 | enabled: true , |
105 | border: { |
106 | enabled: true , |
107 | color: "#474646" , |
108 | opacity: 1 |
109 | } , |
110 | fill: { |
111 | type: "Solid" , |
112 | color: "White" , |
113 | opacity: 0.1 |
114 | } |
115 | } , |
116 | valueAxes: { |
117 | primary: { |
118 | position: "Right" , |
119 | labels: { |
120 | position: "Outside" , |
121 | padding: 5 , |
122 | showFirst: true , |
123 | showLast: true , |
124 | valign: "Center" , |
125 | font: { |
126 | color: "#838182" |
127 | } , |
128 | format: "{%Value}{numDecimals:0}" |
129 | } , |
130 | tickmarks: { |
131 | enabled: true , |
132 | showFirst: true , |
133 | showLast: true , |
134 | color: "White" , |
135 | opacity: 0.2 , |
136 | pixelHinting: true |
137 | } , |
138 | scale: { |
139 | mode: "Values" |
140 | } , |
141 | grid: { |
142 | enabled: true , |
143 | line: { |
144 | color: "White" , |
145 | opacity: 0.13 |
146 | } |
147 | } |
148 | } |
149 | } , |
150 | xAxis: { |
151 | majorGrid: { |
152 | line: { |
153 | color: "White" , |
154 | opacity: 0.13 |
155 | } |
156 | } , |
157 | minorGrid: { |
158 | line: { |
159 | color: "White" , |
160 | opacity: 0.13 |
161 | } |
162 | } , |
163 | labels: { |
164 | majorLabels: { |
165 | font: { |
166 | color: "#908E8F" |
167 | } |
168 | } , |
169 | minorLabels: { |
170 | font: { |
171 | color: "#908E8F" |
172 | } |
173 | } , |
174 | background: { |
175 | enabled: true , |
176 | fill: { |
177 | type: "Gradient" , |
178 | color: "Black" , |
179 | opacity: 1 , |
180 | gradient: { |
181 | angle: 90 , |
182 | keys: [ |
183 | { |
184 | color: "#303030" |
185 | } , |
186 | { |
187 | color: "#000000" |
188 | } |
189 | ] |
190 | } |
191 | } , |
192 | border: { |
193 | enabled: true , |
194 | color: "#474646" , |
195 | opacity: 1 |
196 | } |
197 | } |
198 | } |
199 | } , |
200 | seriesList: [ |
201 | { |
202 | id: "idSeries" , |
203 | type: "SplineArea" , |
204 | dataProvider: "s1" , |
205 | color: "#FD8924" , |
206 | name: "^IXIC" , |
207 | tooltipSettings: { |
208 | enabled: true , |
209 | separatedTooltip: { |
210 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#A5A5A5\">{%Value.Current}</font>\r\n<font color=\"#B9B9B9\">Date: {%Date.Current}{\"%MMM %dd, %yyyy\"}</font></b></textformat>" , |
211 | background: { |
212 | fill: { |
213 | type: "Gradient" , |
214 | color: "Black" , |
215 | opacity: 1 , |
216 | gradient: { |
217 | angle: 90 , |
218 | keys: [ |
219 | { |
220 | color: "#494949" |
221 | } , |
222 | { |
223 | color: "#000000" |
224 | } |
225 | ] |
226 | } |
227 | } , |
228 | border: { |
229 | color: "#000000" , |
230 | thickness: 2 , |
231 | opacity: 0.6 |
232 | } , |
233 | shadow: { |
234 | color: "#F0F0F0" , |
235 | opacity: 1 , |
236 | distance: 0 , |
237 | blurX: 2 , |
238 | blurY: 2 , |
239 | strength: 4 |
240 | } |
241 | } |
242 | } |
243 | } , |
244 | legendItem: { |
245 | labels: { |
246 | icon: { |
247 | size: 10 , |
248 | type: "Square" , |
249 | fill: { |
250 | color: "%Color" , |
251 | type: "Gradient" , |
252 | gradient: { |
253 | angle: 90 , |
254 | keys: [ |
255 | { |
256 | color: "#FD8924" |
257 | } , |
258 | { |
259 | color: "#A75A18" |
260 | } |
261 | ] |
262 | } |
263 | } , |
264 | border: { |
265 | enabled: true , |
266 | thickness: 2 , |
267 | color: "DarkColor(%Color)" , |
268 | opacity: 0.4 |
269 | } |
270 | } , |
271 | font: { |
272 | family: "Verdana" , |
273 | size: 9 |
274 | } , |
275 | focusSettings: { |
276 | mouseOver: { |
277 | format: "{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#A5A5A5\">{%Value.Current}</font> </b>" |
278 | } , |
279 | mouseOut: { |
280 | format: "{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#A5A5A5\">{%Value.LastVisible}</font> </b>" |
281 | } |
282 | } |
283 | } |
284 | } , |
285 | areaSeries: { |
286 | line: { |
287 | color: "%Color" , |
288 | opacity: 0.6 |
289 | } , |
290 | fill: { |
291 | color: "%Color" , |
292 | opacity: 0.5 |
293 | } |
294 | } |
295 | } |
296 | ] , |
297 | technicalIndicators: [ |
298 | { |
299 | type: "SMA" , |
300 | dataProvider: "s1" , |
301 | smaIndicator: { |
302 | period: 20 , |
303 | series: { |
304 | color: "#21B6E7" , |
305 | tooltipSettings: { |
306 | enabled: false |
307 | } , |
308 | lineSeries: { |
309 | thickness: 2 , |
310 | opacity: 0.5 |
311 | } , |
312 | legendItem: { |
313 | labels: { |
314 | icon: { |
315 | size: 10 , |
316 | type: "Square" , |
317 | fill: { |
318 | color: "%Color" , |
319 | type: "Gradient" , |
320 | gradient: { |
321 | angle: 90 , |
322 | keys: [ |
323 | { |
324 | color: "#21B6E7" |
325 | } , |
326 | { |
327 | color: "#1B97C0" |
328 | } |
329 | ] |
330 | } |
331 | } , |
332 | border: { |
333 | enabled: true , |
334 | thickness: 2 , |
335 | color: "DarkColor(%Color)" , |
336 | opacity: 0.4 |
337 | } |
338 | } |
339 | } |
340 | } , |
341 | name: "SMA(20)" |
342 | } |
343 | } |
344 | } |
345 | ] |
346 | } , |
347 | { |
348 | height: 50 , |
349 | legend: { |
350 | enabled: true , |
351 | padding: 0 , |
352 | dateTime: { |
353 | enabled: false |
354 | } , |
355 | title: { |
356 | font: { |
357 | color: "#F0F0F0" |
358 | } |
359 | } , |
360 | background: { |
361 | enabled: true , |
362 | fill: { |
363 | type: "Gradient" , |
364 | color: "Black" , |
365 | opacity: 1 , |
366 | gradient: { |
367 | keys: [ |
368 | { |
369 | color: "#303030" |
370 | } , |
371 | { |
372 | color: "#000000" |
373 | } |
374 | ] |
375 | } |
376 | } , |
377 | border: { |
378 | enabled: true , |
379 | color: "#474646" , |
380 | opacity: 1 |
381 | } |
382 | } |
383 | } , |
384 | background: { |
385 | enabled: true , |
386 | border: { |
387 | enabled: true , |
388 | color: "#474646" , |
389 | opacity: 1 |
390 | } , |
391 | fill: { |
392 | type: "Solid" , |
393 | color: "White" , |
394 | opacity: 0.1 |
395 | } |
396 | } , |
397 | valueAxes: { |
398 | primary: { |
399 | position: "Right" , |
400 | labels: { |
401 | position: "Outside" , |
402 | padding: 5 , |
403 | showFirst: true , |
404 | showLast: true , |
405 | valign: "Center" , |
406 | font: { |
407 | color: "#838182" |
408 | } , |
409 | format: "{%Value}{scale:(1)(1000)(1000)(1000)|()( K)( M)( B),numDecimals:2,trailingZeros:false}" |
410 | } , |
411 | tickmarks: { |
412 | enabled: true , |
413 | showFirst: true , |
414 | showLast: true , |
415 | color: "White" , |
416 | opacity: 0.2 , |
417 | pixelHinting: true |
418 | } , |
419 | scale: { |
420 | mode: "Values" |
421 | } , |
422 | grid: { |
423 | enabled: true , |
424 | line: { |
425 | color: "White" , |
426 | opacity: 0.13 |
427 | } |
428 | } |
429 | } |
430 | } , |
431 | xAxis: { |
432 | majorGrid: { |
433 | line: { |
434 | color: "White" , |
435 | opacity: 0.13 |
436 | } |
437 | } , |
438 | minorGrid: { |
439 | line: { |
440 | color: "White" , |
441 | opacity: 0.13 |
442 | } |
443 | } , |
444 | labels: { |
445 | enabled: false , |
446 | majorLabels: { |
447 | font: { |
448 | color: "#908E8F" |
449 | } |
450 | } , |
451 | minorLabels: { |
452 | font: { |
453 | color: "#908E8F" |
454 | } |
455 | } , |
456 | background: { |
457 | enabled: true , |
458 | fill: { |
459 | type: "Gradient" , |
460 | color: "Black" , |
461 | opacity: 1 , |
462 | gradient: { |
463 | angle: 90 , |
464 | keys: [ |
465 | { |
466 | color: "#303030" |
467 | } , |
468 | { |
469 | color: "#000000" |
470 | } |
471 | ] |
472 | } |
473 | } , |
474 | border: { |
475 | enabled: true , |
476 | color: "#474646" , |
477 | opacity: 1 |
478 | } |
479 | } |
480 | } |
481 | } , |
482 | technicalIndicators: [ |
483 | { |
484 | type: "Volume" , |
485 | dataProvider: "s1" , |
486 | volumeIndicator: { |
487 | series: { |
488 | type: "Bar" , |
489 | color: "#BABABA" , |
490 | tooltipSettings: { |
491 | enabled: false |
492 | } , |
493 | barSeries: { |
494 | width: 0.7 , |
495 | fill: { |
496 | color: "%Color" |
497 | } , |
498 | border: { |
499 | enabled: true , |
500 | opacity: 0.7 , |
501 | thickness: 1 |
502 | } |
503 | } , |
504 | name: "Volume:" , |
505 | legendItem: { |
506 | labels: { |
507 | icon: { |
508 | size: 10 , |
509 | type: "Square" , |
510 | fill: { |
511 | color: "%Color" , |
512 | type: "Gradient" , |
513 | gradient: { |
514 | angle: 90 , |
515 | keys: [ |
516 | { |
517 | color: "#BABABA" |
518 | } , |
519 | { |
520 | color: "#9C9C9C" |
521 | } |
522 | ] |
523 | } |
524 | } , |
525 | border: { |
526 | enabled: true , |
527 | thickness: 2 , |
528 | color: "DarkColor(%Color)" , |
529 | opacity: 0.4 |
530 | } |
531 | } , |
532 | focusSettings: { |
533 | mouseOver: { |
534 | format: "{%SeriesIcon} <b><font color=\"%Color\">Volume: {%Value.Current}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false}</font></b> " |
535 | } , |
536 | mouseOut: { |
537 | format: "{%SeriesIcon} <b><font color=\"%Color\">Volume: {%Value.LastVisible}{scale:(1000)(1000)(1000)|( K)( M)( B),numDecimals:2,trailingZeros:false}</font></b> " |
538 | } |
539 | } |
540 | } |
541 | } |
542 | } |
543 | } |
544 | } |
545 | ] |
546 | } |
547 | ] , |
548 | timeScale: { |
549 | selectedRange: { |
550 | type: "YTD" |
551 | } |
552 | } , |
553 | scroller: { |
554 | timeScale: { |
555 | labels: { |
556 | font: { |
557 | color: "#908E8F" , |
558 | size: 9 |
559 | } , |
560 | background: { |
561 | enabled: true , |
562 | fill: { |
563 | color: "#202020" , |
564 | opacity: 0.5 |
565 | } |
566 | } |
567 | } |
568 | } , |
569 | gridLine: { |
570 | color: "#333333" |
571 | } , |
572 | selectedRangeOutline: { |
573 | color: "#555555" |
574 | } , |
575 | border: { |
576 | color: "#333333" |
577 | } , |
578 | insideSelectedRange: { |
579 | backgroundFill: { |
580 | enabled: true , |
581 | type: "Gradient" , |
582 | opacity: 1 , |
583 | gradient: { |
584 | angle: 90 , |
585 | keys: [ |
586 | { |
587 | color: "#303030" |
588 | } , |
589 | { |
590 | color: "#000000" |
591 | } |
592 | ] |
593 | } |
594 | } , |
595 | seriesLine: { |
596 | enabled: true , |
597 | color: "#333333" , |
598 | thickness: 1 , |
599 | opacity: 1 |
600 | } , |
601 | seriesFill: { |
602 | enabled: true , |
603 | type: "Solid" , |
604 | color: "#777777" , |
605 | opacity: 0.7 |
606 | } |
607 | } , |
608 | outsideSelectedRange: { |
609 | backgroundFill: { |
610 | type: "Gradient" , |
611 | opacity: 1 , |
612 | gradient: { |
613 | angle: 90 , |
614 | keys: [ |
615 | { |
616 | color: "#303030" |
617 | } , |
618 | { |
619 | color: "#000000" |
620 | } |
621 | ] |
622 | } |
623 | } , |
624 | seriesLine: { |
625 | enabled: true , |
626 | color: "#333333" , |
627 | thickness: 1 , |
628 | opacity: 0.5 |
629 | } , |
630 | seriesFill: { |
631 | enabled: true , |
632 | type: "Solid" , |
633 | color: "#777777" , |
634 | opacity: 0.5 |
635 | } |
636 | } , |
637 | rangeMarkers: { |
638 | shape: "Diamond" , |
639 | showAlways: true , |
640 | fill: { |
641 | type: "Gradient" , |
642 | opacity: 1 , |
643 | gradient: { |
644 | angle: 45 , |
645 | keys: [ |
646 | { |
647 | color: "#A0A0A0" |
648 | } , |
649 | { |
650 | color: "Black" |
651 | } |
652 | ] |
653 | } |
654 | } , |
655 | border: { |
656 | color: "#999999" |
657 | } |
658 | } |
659 | } , |
660 | rangeSelector: { |
661 | enabled: true , |
662 | presets: { |
663 | title: { |
664 | font: { |
665 | color: "#908E8F" |
666 | } |
667 | } , |
668 | buttonSettings: { |
669 | font: { |
670 | color: "#999999" |
671 | } , |
672 | fill: { |
673 | enabled: true , |
674 | type: "Gradient" , |
675 | opacity: 1 , |
676 | gradient: { |
677 | keys: [ |
678 | { |
679 | color: "#464646" |
680 | } , |
681 | { |
682 | color: "#000000" |
683 | } |
684 | ] |
685 | } |
686 | } , |
687 | border: { |
688 | color: "White" , |
689 | opacity: 0.1 |
690 | } |
691 | } |
692 | } , |
693 | rangePicker: { |
694 | fromLabel: { |
695 | font: { |
696 | color: "#908E8F" |
697 | } |
698 | } , |
699 | toLabel: { |
700 | font: { |
701 | color: "#908E8F" |
702 | } |
703 | } , |
704 | background: { |
705 | fill: { |
706 | type: "Gradient" , |
707 | opacity: 1 , |
708 | gradient: { |
709 | angle: 90 , |
710 | keys: [ |
711 | { |
712 | color: "#ADADAD" , |
713 | position: 0 |
714 | } , |
715 | { |
716 | color: "#B2B2B2" , |
717 | position: 0.3 |
718 | } , |
719 | { |
720 | color: "#C7C7C7" , |
721 | position: 1 |
722 | } |
723 | ] |
724 | } |
725 | } , |
726 | border: { |
727 | color: "#201F1D" , |
728 | opacity: 0.3 , |
729 | thickness: 2 |
730 | } |
731 | } |
732 | } |
733 | } |
734 | } |
735 | } |