@@ -31,7 +31,7 @@ The ChartContainer will contain all your charts.
31
31
``` javascript
32
32
let chartContainer = new SimpleTimeChart.ChartContainer (
33
33
" myChart" , // Div ID of the containing the chart
34
- 1300 , // Width of the chart
34
+ 800 , // Width of the chart
35
35
70 , // Axis Tickness
36
36
{
37
37
color: " #D0D0D0" , // Color of axis text
@@ -50,9 +50,9 @@ let chart = chartContainer.newChart(
50
50
500 // height of the Chart
51
51
);
52
52
53
- let secondChart = chartContainer .newChart (
54
- 300 // height of the Chart
55
- );
53
+ let secondChart = chartContainer .newChart (300 );
54
+
55
+ let volumeChart = chartContainer . newChart ( 100 );
56
56
```
57
57
58
58
### Add Layers to Charts
@@ -74,6 +74,7 @@ let candlesticks = data.map(x => {
74
74
})
75
75
let pointList = candlesticks .map (x => {return {x: x .date .getTime (), y: x .weightedAverage }});
76
76
let bandStepList = candlesticks .map (x => {return {x: x .date .getTime (), top: x .high , bottom: x .low }});
77
+ let barList = candlesticks .map (x => {return {x: x .date .getTime (), y: x .volume , delta: deltaSecond * 1000 }});
77
78
78
79
// Define all layers
79
80
let candlestickLayer = new SimpleTimeChart.CandlestickLayer (candlesticks, {
@@ -92,11 +93,16 @@ let bandLayer = new SimpleTimeChart.BandLayer(bandStepList, {
92
93
color: " #FFFFFF" ,
93
94
opacity: 0.2 ,
94
95
});
96
+ let histLayer = new SimpleTimeChart.HistogramLayer (barList, {
97
+ color: " #FFFFFF" ,
98
+ opacity: 0.5 ,
99
+ });
95
100
96
101
// Add Layers to the Chart you want
97
102
chart .addLayer (candlestickLayer);
98
103
secondChart .addLayer (lineLayer);
99
104
secondChart .addLayer (bandLayer);
105
+ volumeChart .addLayer (histLayer);
100
106
```
101
107
102
108
### Set Scales
@@ -116,6 +122,9 @@ chart.setDataScale(
116
122
secondChart .setDataScale (
117
123
SimpleTimeChart .Util .getDataScaleFromLayer (secondChart, lineLayer)
118
124
);
125
+ volumeChart .setDataScale (
126
+ SimpleTimeChart .Util .getDataScaleFromLayer (volumeChart, histLayer, 5 ) // 5 is the number of measure on the Y Axis
127
+ );
119
128
```
120
129
121
130
### Draw the result
0 commit comments