@@ -13,92 +13,7 @@ Chart.Inject(
1313/**
1414 * Sample for Accumulation Distribution Indicator
1515 */
16- this . renderChart = ( chartData : Object [ ] ) : void => {
17- let chart : Chart = new Chart ( {
18- // Initializing the axes
19- primaryXAxis : {
20- valueType : 'DateTime' ,
21- majorGridLines : { width : 0 } ,
22- zoomFactor : 0.2 , zoomPosition : 0.6 ,
23- crosshairTooltip : { enable : true }
24- } ,
25- primaryYAxis : {
26- title : 'Price' ,
27- labelFormat : '${value}' ,
28- minimum : 50 , maximum : 170 ,
29- plotOffset : 25 ,
30- interval : 30 , rowIndex : 1 , opposedPosition : true , lineStyle : { width : 0 }
31- } ,
32- axes : [ {
33- name : 'secondary' ,
34- opposedPosition : true , rowIndex : 0 ,
35- majorGridLines : { width : 0 } , lineStyle : { width : 0 } , minimum : - 7000000000 , maximum : 5000000000 ,
36- interval : 6000000000 , majorTickLines : { width : 0 } , title : 'Accumulation Distribution' ,
37- stripLines : [
38- {
39- start : - 7000000000 , end : 6000000000 , text : '' , color : '#6063ff' , visible : true ,
40- opacity : 0.1 , zIndex : 'Behind'
41- } ]
42- } ] ,
43- // Initializing the rows
44- rows : [
45- {
46- height : '40%'
47- } , {
48- height : '60%'
49- }
50- ] ,
51- // Initializing the series
52- series : [ {
53- dataSource : chartData , width : 2 ,
54- xName : 'x' , yName : 'y' , low : 'low' , high : 'high' , close : 'close' , volume : 'volume' , open : 'open' ,
55- name : 'Apple Inc' , bearFillColor : '#2ecd71' , bullFillColor : '#e74c3d' ,
56- type : 'Candle' , animation : { enable : true }
57- } ] ,
58-
59- // Initializing the indicators
60- indicators : [ {
61- type : 'AccumulationDistribution' , field : 'Close' , seriesName : 'Apple Inc' , yAxisName : 'secondary' , fill : '#6063ff' ,
62- period : 3 , animation : { enable : true }
63- } ] ,
64- /**
65- * Initializing the zooming, crosshair and tooltip
66- */
67- zoomSettings :
68- {
6916
70- enableSelectionZooming : true ,
71- enablePinchZooming : true ,
72- mode : 'XY' ,
73- enablePan : true
74-
75- } ,
76- tooltip : {
77- enable : true , shared : true
78- } ,
79- crosshair : { enable : true , lineType : 'Vertical' } ,
80- // Triggered label render to convert a billion
81- axisLabelRender : ( args : IAxisLabelRenderEventArgs ) => {
82- if ( args . axis . name === 'secondary' ) {
83- let value : number = Number ( args . text ) / 1000000000 ;
84- args . text = String ( value ) + 'bn' ;
85- }
86- } ,
87- chartArea : { border : { width : 0 } } ,
88- title : 'AAPL 2012-2017' ,
89- width : Browser . isDevice ? '100%' : '80%' ,
90- load : ( args : ILoadedEventArgs ) => {
91- let selectedTheme : string = location . hash . split ( '/' ) [ 1 ] ;
92- selectedTheme = selectedTheme ? selectedTheme : 'Material' ;
93- args . chart . theme = < ChartTheme > ( selectedTheme . charAt ( 0 ) . toUpperCase ( ) +
94- selectedTheme . slice ( 1 ) ) . replace ( / - d a r k / i, 'Dark' ) . replace ( / c o n t r a s t / i, 'Contrast' ) ;
95- } ,
96- legendSettings : {
97- visible : false
98- }
99- } ) ;
100- chart . appendTo ( '#container' ) ;
101- } ;
10217( window as any ) . default = ( ) : void => {
10318 loadCultureFiles ( ) ;
10419 let chartData : Object [ ] ;
@@ -111,7 +26,90 @@ this.renderChart = (chartData: Object[]): void => {
11126 // tslint:disable-next-line:no-string-literal
11227 data [ 'x' ] = new Date ( data [ 'x' ] ) ;
11328 } ) ;
114- this . renderChart ( chartData ) ;
29+ let chart : Chart = new Chart ( {
30+ // Initializing the axes
31+ primaryXAxis : {
32+ valueType : 'DateTime' ,
33+ majorGridLines : { width : 0 } ,
34+ zoomFactor : 0.2 , zoomPosition : 0.6 ,
35+ crosshairTooltip : { enable : true }
36+ } ,
37+ primaryYAxis : {
38+ title : 'Price' ,
39+ labelFormat : '${value}' ,
40+ minimum : 50 , maximum : 170 ,
41+ plotOffset : 25 ,
42+ interval : 30 , rowIndex : 1 , opposedPosition : true , lineStyle : { width : 0 }
43+ } ,
44+ axes : [ {
45+ name : 'secondary' ,
46+ opposedPosition : true , rowIndex : 0 ,
47+ majorGridLines : { width : 0 } , lineStyle : { width : 0 } , minimum : - 7000000000 , maximum : 5000000000 ,
48+ interval : 6000000000 , majorTickLines : { width : 0 } , title : 'Accumulation Distribution' ,
49+ stripLines : [
50+ {
51+ start : - 7000000000 , end : 6000000000 , text : '' , color : '#6063ff' , visible : true ,
52+ opacity : 0.1 , zIndex : 'Behind'
53+ } ]
54+ } ] ,
55+ // Initializing the rows
56+ rows : [
57+ {
58+ height : '40%'
59+ } , {
60+ height : '60%'
61+ }
62+ ] ,
63+ // Initializing the series
64+ series : [ {
65+ dataSource : chartData , width : 2 ,
66+ xName : 'x' , yName : 'y' , low : 'low' , high : 'high' , close : 'close' , volume : 'volume' , open : 'open' ,
67+ name : 'Apple Inc' , bearFillColor : '#2ecd71' , bullFillColor : '#e74c3d' ,
68+ type : 'Candle' , animation : { enable : true }
69+ } ] ,
70+
71+ // Initializing the indicators
72+ indicators : [ {
73+ type : 'AccumulationDistribution' , field : 'Close' , seriesName : 'Apple Inc' , yAxisName : 'secondary' , fill : '#6063ff' ,
74+ period : 3 , animation : { enable : true }
75+ } ] ,
76+ /**
77+ * Initializing the zooming, crosshair and tooltip
78+ */
79+ zoomSettings :
80+ {
81+
82+ enableSelectionZooming : true ,
83+ enablePinchZooming : true ,
84+ mode : 'XY' ,
85+ enablePan : true
86+
87+ } ,
88+ tooltip : {
89+ enable : true , shared : true
90+ } ,
91+ crosshair : { enable : true , lineType : 'Vertical' } ,
92+ // Triggered label render to convert a billion
93+ axisLabelRender : ( args : IAxisLabelRenderEventArgs ) => {
94+ if ( args . axis . name === 'secondary' ) {
95+ let value : number = Number ( args . text ) / 1000000000 ;
96+ args . text = String ( value ) + 'bn' ;
97+ }
98+ } ,
99+ chartArea : { border : { width : 0 } } ,
100+ title : 'AAPL 2012-2017' ,
101+ width : Browser . isDevice ? '100%' : '80%' ,
102+ load : ( args : ILoadedEventArgs ) => {
103+ let selectedTheme : string = location . hash . split ( '/' ) [ 1 ] ;
104+ selectedTheme = selectedTheme ? selectedTheme : 'Material' ;
105+ args . chart . theme = < ChartTheme > ( selectedTheme . charAt ( 0 ) . toUpperCase ( ) +
106+ selectedTheme . slice ( 1 ) ) . replace ( / - d a r k / i, 'Dark' ) . replace ( / c o n t r a s t / i, 'Contrast' ) ;
107+ } ,
108+ legendSettings : {
109+ visible : false
110+ }
111+ } ) ;
112+ chart . appendTo ( '#container' ) ;
115113 } ;
116114
117115} ;
0 commit comments