01 | { |
02 | data: { |
03 | dataSets: [ |
04 | { |
05 | id: "dataSetDJI", |
06 | sourceUrl: "./../../csv-data/dji_daily_close.csv", |
07 | csvSettings: { |
08 | ignoreFirstRow: true, |
09 | rowsSeparator: "\n", |
10 | columnsSeparator: "," |
11 | }, |
12 | locale: { |
13 | dateTime: { |
14 | format: "%yyyy%MM%dd" |
15 | } |
16 | } |
17 | } |
18 | ], |
19 | dataProviders: { |
20 | generalDataProviders: [ |
21 | { |
22 | dataSet: "dataSetDJI", |
23 | id: "dpDJI", |
24 | fields: [ |
25 | { |
26 | type: "Close", |
27 | column: 1, |
28 | approximationType: "Close" |
29 | } |
30 | ] |
31 | } |
32 | ], |
33 | scrollerDataProviders: [ |
34 | { |
35 | id: "scrDp", |
36 | dataSet: "dataSetDJI", |
37 | column: 1 |
38 | } |
39 | ] |
40 | } |
41 | }, |
42 | settings: { |
43 | dataGrouping: { |
44 | enabled: true, |
45 | maxVisiblePoints: 0, |
46 | intervals: [ |
47 | { |
48 | unit: "Day", |
49 | count: 1, |
50 | maxVisiblePoints: 1092 |
51 | }, |
52 | { |
53 | unit: "Week", |
54 | count: 1, |
55 | maxVisiblePoints: 780 |
56 | }, |
57 | { |
58 | unit: "Month", |
59 | count: 1, |
60 | maxVisiblePoints: 450 |
61 | }, |
62 | { |
63 | unit: "Quarter", |
64 | count: 1, |
65 | maxVisiblePoints: 200 |
66 | }, |
67 | { |
68 | unit: "Year", |
69 | count: 1, |
70 | maxVisiblePoints: 1000 |
71 | } |
72 | ] |
73 | }, |
74 | displayLocale: { |
75 | defaultDateTimeFormat: { |
76 | format: "%yyyy-%MM-%dd %HH:%mm:%ss" |
77 | } |
78 | }, |
79 | insideMargin: { |
80 | left: 15, |
81 | top: 8, |
82 | bottom: 8, |
83 | right: 55 |
84 | }, |
85 | outsideMargin: { |
86 | left: 0, |
87 | top: 0, |
88 | right: 0, |
89 | bottom: 0 |
90 | }, |
91 | tooltipSettings: { |
92 | enabled: true, |
93 | displayMode: "AllCharts" |
94 | }, |
95 | charts: [ |
96 | { |
97 | id: "main", |
98 | height: 100, |
99 | labels: [ |
100 | { |
101 | anchor: "LeftTop", |
102 | xPadding: 5, |
103 | yPadding: 23, |
104 | font: { |
105 | family: "Verdana", |
106 | size: 9, |
107 | bold: true, |
108 | color: "#444444" |
109 | }, |
110 | format: "Standard Date-Time Formatting", |
111 | background: { |
112 | enabled: true, |
113 | fill: { |
114 | enabled: true, |
115 | color: "White", |
116 | opacity: 0.5 |
117 | }, |
118 | border: { |
119 | enabled: true, |
120 | color: "Black", |
121 | opacity: 0.1 |
122 | }, |
123 | corners: { |
124 | type: "Rounded", |
125 | all: 4 |
126 | }, |
127 | insideMargin: { |
128 | left: 6, |
129 | top: 2, |
130 | right: 6, |
131 | bottom: 2 |
132 | } |
133 | } |
134 | } |
135 | ], |
136 | valueAxes: { |
137 | primary: { |
138 | enabled: true, |
139 | position: "Right", |
140 | labels: { |
141 | enabled: true, |
142 | position: "Outside", |
143 | padding: 5, |
144 | valign: "Center", |
145 | showFirst: true, |
146 | showLast: true, |
147 | positiveColor: "#167316", |
148 | format: "{%Value}{trailingZeros:false}" |
149 | }, |
150 | scale: { |
151 | mode: "Values", |
152 | type: "Linear", |
153 | minimumOffset: 0 |
154 | }, |
155 | zeroLine: { |
156 | enabled: true, |
157 | color: "DarkRed", |
158 | opacity: 0.3 |
159 | }, |
160 | tickmarks: { |
161 | enabled: true, |
162 | inside: false, |
163 | outside: true, |
164 | size: 3, |
165 | pixelHinting: true |
166 | }, |
167 | grid: { |
168 | line: { |
169 | dashed: true, |
170 | dashLength: 3, |
171 | dashSpace: 3, |
172 | pixelHinting: true |
173 | } |
174 | } |
175 | } |
176 | }, |
177 | legend: { |
178 | dateTime: { |
179 | enabled: false |
180 | }, |
181 | title: { |
182 | focusSettings: { |
183 | mouseOver: { |
184 | format: "{%Date.Current}{\"%MMM %d, %yyyy\"}: " |
185 | }, |
186 | mouseOut: { |
187 | format: "{%Date.LastVisible}{\"%MMM %d, %yyyy\"}: " |
188 | } |
189 | } |
190 | } |
191 | }, |
192 | tooltipSettings: { |
193 | enabled: true, |
194 | tooltipMode: "Separated", |
195 | separatedTooltip: { |
196 | affects: "AllSeries", |
197 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#777777\">Value: </font>{%Value}\r\n<b>{%Date.Current}{\"%MMM %d, %yyyy\"}</b></textformat>", |
198 | background: { |
199 | fill: { |
200 | type: "Gradient", |
201 | gradient: { |
202 | angle: 90, |
203 | keys: [ |
204 | { |
205 | color: "#FEFEFE" |
206 | }, |
207 | { |
208 | color: "#F1F1F1" |
209 | } |
210 | ] |
211 | } |
212 | }, |
213 | border: { |
214 | color: "#BDBDBD" |
215 | } |
216 | } |
217 | } |
218 | }, |
219 | seriesList: [ |
220 | { |
221 | enabled: true, |
222 | id: "dji", |
223 | type: "Line", |
224 | dataProvider: "dpDJI", |
225 | color: "#3463B0", |
226 | name: "^DJI", |
227 | lineSeries: { |
228 | thickness: 2 |
229 | } |
230 | } |
231 | ], |
232 | seriesSettingsDefaults: { |
233 | lineSeries: { |
234 | thickness: 1 |
235 | }, |
236 | areaSeries: { |
237 | fill: { |
238 | opacity: 0.45, |
239 | color: "%Color" |
240 | }, |
241 | line: { |
242 | thickness: 1, |
243 | color: "DarkColor(%Color)" |
244 | } |
245 | } |
246 | }, |
247 | xAxis: { |
248 | majorGrid: { |
249 | line: { |
250 | opacity: 1, |
251 | color: "#CCCCCC" |
252 | } |
253 | }, |
254 | minorGrid: { |
255 | line: { |
256 | dashed: true, |
257 | dashLength: 3, |
258 | dashSpace: 3, |
259 | pixelHinting: true |
260 | } |
261 | } |
262 | } |
263 | }, |
264 | { |
265 | height: 100, |
266 | labels: [ |
267 | { |
268 | anchor: "LeftTop", |
269 | xPadding: 5, |
270 | yPadding: 23, |
271 | font: { |
272 | family: "Verdana", |
273 | size: 9, |
274 | bold: true, |
275 | color: "#444444" |
276 | }, |
277 | format: "Adaptive Date-Time Formatting", |
278 | background: { |
279 | enabled: true, |
280 | fill: { |
281 | enabled: true, |
282 | color: "White", |
283 | opacity: 0.5 |
284 | }, |
285 | border: { |
286 | enabled: true, |
287 | color: "Black", |
288 | opacity: 0.1 |
289 | }, |
290 | corners: { |
291 | type: "Rounded", |
292 | all: 4 |
293 | }, |
294 | insideMargin: { |
295 | left: 6, |
296 | top: 2, |
297 | right: 6, |
298 | bottom: 2 |
299 | } |
300 | } |
301 | } |
302 | ], |
303 | valueAxes: { |
304 | primary: { |
305 | enabled: true, |
306 | position: "Right", |
307 | labels: { |
308 | enabled: true, |
309 | position: "Outside", |
310 | padding: 5, |
311 | valign: "Center", |
312 | showFirst: true, |
313 | showLast: true, |
314 | positiveColor: "#167316", |
315 | format: "{%Value}{trailingZeros:false}" |
316 | }, |
317 | scale: { |
318 | mode: "Values", |
319 | type: "Linear", |
320 | minimumOffset: 0 |
321 | }, |
322 | zeroLine: { |
323 | enabled: true, |
324 | color: "DarkRed", |
325 | opacity: 0.3 |
326 | }, |
327 | tickmarks: { |
328 | enabled: true, |
329 | inside: false, |
330 | outside: true, |
331 | size: 3, |
332 | pixelHinting: true |
333 | }, |
334 | grid: { |
335 | line: { |
336 | dashed: true, |
337 | dashLength: 3, |
338 | dashSpace: 3, |
339 | pixelHinting: true |
340 | } |
341 | } |
342 | } |
343 | }, |
344 | legend: { |
345 | dateTime: { |
346 | enabled: true, |
347 | font: { |
348 | bold: true, |
349 | renderAsHtml: true |
350 | }, |
351 | format: "<font color=\"#555555\">Current Interval:</font> <font color=\"#0066DD\">DAY</font>", |
352 | intervalFormats: [ |
353 | { |
354 | unit: "Week", |
355 | count: 1, |
356 | format: "Current Interval: <font color=\"#DC3912\">WEEK</font>" |
357 | }, |
358 | { |
359 | unit: "Month", |
360 | count: 1, |
361 | format: "Current Interval: <font color=\"#66A012\">MONTH</font>" |
362 | }, |
363 | { |
364 | unit: "Quarter", |
365 | count: 1, |
366 | format: "Current Interval: <font color=\"#DF8600\">QUARTER</font>" |
367 | }, |
368 | { |
369 | unit: "Year", |
370 | count: 1, |
371 | format: "Current Interval: <font color=\"#4942CC\">YEAR</font>" |
372 | } |
373 | ] |
374 | }, |
375 | title: { |
376 | focusSettings: { |
377 | mouseOver: { |
378 | format: "{%Date.Current}{\"%MMM %d, %yyyy\"}: ", |
379 | intervalFormats: [ |
380 | { |
381 | unit: "Week", |
382 | count: 1, |
383 | format: "Week {%Date}{\"%ee of %yyyy\"}: " |
384 | }, |
385 | { |
386 | unit: "Month", |
387 | count: 1, |
388 | format: "{%Date.Current}{\"%MMMM %yyyy\"}: " |
389 | }, |
390 | { |
391 | unit: "Quarter", |
392 | count: 1, |
393 | format: "{%Date.Current}{\"%Q %yyyy\"}: " |
394 | }, |
395 | { |
396 | unit: "Year", |
397 | count: 1, |
398 | format: "{%Date.Current}{\"Year - %yyyy\"}: " |
399 | } |
400 | ] |
401 | }, |
402 | mouseOut: { |
403 | format: "{%Date.LastVisible}{\"%MMM %d, %yyyy\"}: ", |
404 | intervalFormats: [ |
405 | { |
406 | unit: "Week", |
407 | count: 1, |
408 | format: "Week {%Date}{\"%ee of %yyyy\"}: " |
409 | }, |
410 | { |
411 | unit: "Month", |
412 | count: 1, |
413 | format: "{%Date.LastVisible}{\"%MMMM %yyyy\"}: " |
414 | }, |
415 | { |
416 | unit: "Quarter", |
417 | count: 1, |
418 | format: "{%Date.LastVisible}{\"%Q %yyyy\"}: " |
419 | }, |
420 | { |
421 | unit: "Year", |
422 | count: 1, |
423 | format: "{%Date.LastVisible}{\"Year - %yyyy\"}: " |
424 | } |
425 | ] |
426 | } |
427 | } |
428 | } |
429 | }, |
430 | tooltipSettings: { |
431 | enabled: true, |
432 | tooltipMode: "Separated", |
433 | separatedTooltip: { |
434 | affects: "AllSeries", |
435 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#777777\">Value: </font>{%Value}<br/><b>{%Date.Current}{\"%MMM %d, %yyyy\"}</b></textformat>", |
436 | intervalFormats: [ |
437 | { |
438 | unit: "Week", |
439 | count: 1, |
440 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#777777\">Value: </font>{%Value}<br/><b>Week {%Date}{\"%ee of %yyyy\"}<br/>({%Date.Current.ApxIntervalFirst}{\"%MMM %d, %yyyy\"} - {%Date.Current.ApxIntervalLast}{\"%MMM %d, %yyyy\"})</b></textformat>" |
441 | }, |
442 | { |
443 | unit: "Month", |
444 | count: 1, |
445 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#777777\">Value: </font>{%Value}<br/><b>{%Date}{\"%MMMM %yyyy\"}</b></textformat>" |
446 | }, |
447 | { |
448 | unit: "Quarter", |
449 | count: 1, |
450 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#777777\">Value: </font>{%Value}<br/><b>{%Date}{\"%QQQ of %yyyy\"}<br/>({%Date.Current}{\"%MMM %d, %yyyy\"} - {%Date.Current.ApxIntervalLast}{\"%MMM %d, %yyyy\"})</b></textformat>" |
451 | }, |
452 | { |
453 | unit: "Year", |
454 | count: 1, |
455 | format: "<textformat leading=\"4\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> <font color=\"#777777\">Value: </font>{%Value}<br/><b>Year - {%Date.Current}{\"%yyyy\"}</b></textformat>" |
456 | } |
457 | ], |
458 | background: { |
459 | fill: { |
460 | type: "Gradient", |
461 | gradient: { |
462 | angle: 90, |
463 | keys: [ |
464 | { |
465 | color: "#FEFEFE" |
466 | }, |
467 | { |
468 | color: "#F1F1F1" |
469 | } |
470 | ] |
471 | } |
472 | }, |
473 | border: { |
474 | color: "#BDBDBD" |
475 | } |
476 | } |
477 | } |
478 | }, |
479 | seriesList: [ |
480 | { |
481 | enabled: true, |
482 | id: "dji", |
483 | type: "Line", |
484 | dataProvider: "dpDJI", |
485 | color: "#3463B0", |
486 | name: "^DJI", |
487 | lineSeries: { |
488 | thickness: 2 |
489 | } |
490 | } |
491 | ], |
492 | seriesSettingsDefaults: { |
493 | lineSeries: { |
494 | thickness: 1 |
495 | }, |
496 | areaSeries: { |
497 | fill: { |
498 | opacity: 0.45, |
499 | color: "%Color" |
500 | }, |
501 | line: { |
502 | thickness: 1, |
503 | color: "DarkColor(%Color)" |
504 | } |
505 | } |
506 | }, |
507 | xAxis: { |
508 | majorGrid: { |
509 | line: { |
510 | opacity: 1, |
511 | color: "#CCCCCC" |
512 | } |
513 | }, |
514 | minorGrid: { |
515 | line: { |
516 | dashed: true, |
517 | dashLength: 3, |
518 | dashSpace: 3, |
519 | pixelHinting: true |
520 | } |
521 | } |
522 | } |
523 | } |
524 | ], |
525 | timeScale: { |
526 | selectedRange: { |
527 | type: "Unit", |
528 | unit: "Day", |
529 | count: 364 |
530 | } |
531 | }, |
532 | rangeSelector: { |
533 | enabled: true, |
534 | presets: { |
535 | title: { |
536 | format: "Grouping Level: " |
537 | }, |
538 | buttonSettings: { |
539 | spacing: 2 |
540 | }, |
541 | ranges: [ |
542 | { |
543 | type: "Unit", |
544 | unit: "Day", |
545 | count: 364, |
546 | format: "Daily" |
547 | }, |
548 | { |
549 | type: "Unit", |
550 | unit: "Day", |
551 | count: 3000, |
552 | format: "Weekly" |
553 | }, |
554 | { |
555 | type: "Unit", |
556 | unit: "Day", |
557 | count: 8000, |
558 | format: "Monthly" |
559 | }, |
560 | { |
561 | type: "Unit", |
562 | unit: "Day", |
563 | count: 18000, |
564 | format: "Quarterly" |
565 | }, |
566 | { |
567 | type: "Unit", |
568 | unit: "Year", |
569 | count: 70, |
570 | format: "Yearly" |
571 | } |
572 | ] |
573 | } |
574 | }, |
575 | scroller: { |
576 | dataProvider: "scrDp" |
577 | } |
578 | } |
579 | } |