Skip to content

Commit f5a2ef2

Browse files
helgasofthelgasoft
committed
rt2
1 parent a9823a0 commit f5a2ef2

File tree

2 files changed

+50
-35
lines changed

2 files changed

+50
-35
lines changed

‎gallery.md

+17-15
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,20 @@ Various charts and their **source code** showing *echarty* usage. Some have Live
66
This page is searchable if you are interested in a specific keyword.
77
The package itself has two dozen more code examples - type ```?ec.examples``` to see them.
88

9-
<br />
9+
<br />
10+
11+
## Single-page web hosting
12+
Edit R-code and run charts inside a web page -
13+
[<span style="color:magenta">Live Demo</span>](https://helgasoft.github.io/echarty/test/coder.html)
14+
15+
Real-Time Data charts with echarty - [<span style="color:magenta">Live Demo</span>](https://helgasoft.github.io/echarty/test/realTime.html)
16+
<br><br>
17+
18+
## Data models
19+
how to store data in echarty -
20+
[<span style="color:magenta">Live Demo</span>](https://rpubs.com/echarty/data-models) with code
21+
<a href='https://rpubs.com/echarty/data-models' target=_blank> <img src='img/cb-datam.png' alt='data models' /></a>
22+
<br><br>
1023

1124
## Simple bar
1225
demo for presets
@@ -15,9 +28,7 @@ demo for presets
1528

1629
```r
1730
library(echarty); library(dplyr)
18-
library(lubridate)
19-
df <- data.frame(date= as.character(as.Date('2019-12-31') %m+% months(1:13)),
20-
num= runif(13))
31+
df <- data.frame(date= seq(as.Date('2019-12-25'), as.Date('2020-01-07'), by='day'), num= runif(14))
2132

2233
# with presets and df chained
2334
df |> ec.init(ctype= 'bar') |> ec.theme('dark')
@@ -26,24 +37,15 @@ df |> ec.init(ctype= 'bar') |> ec.theme('dark')
2637
ec.init(preset= FALSE,
2738
yAxis= list(show= TRUE),
2839
xAxis= list(type= 'category',
29-
axisLabel= list(interval= 0, rotate= 45)
30-
#, axisTick= list(alignWithLabel= TRUE)
31-
),
32-
series= list(list(
33-
type= 'bar', data= ec.data(df, 'values')))
40+
axisLabel= list(interval= 0, rotate= 45) ),
41+
series= list(list(type= 'bar', data= ec.data(df)))
3442
) |> ec.theme('dark')
3543

3644

3745
```
3846
</details>
3947
<br />
4048

41-
## Data models
42-
how to store data in echarty -
43-
[<span style="color:magenta">Live Demo</span>](https://rpubs.com/echarty/data-models) with code
44-
<a href='https://rpubs.com/echarty/data-models' target=_blank> <img src='img/cb-datam.png' alt='data models' /></a>
45-
<br><br>
46-
4749
## Horizontal bars
4850
with grouping
4951
<img src='img/cb-33.png' alt='vertBars' />

‎test/realTime.html

+33-20
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,17 @@ <h4>Real-time data with <a href='https://helgasoft.github.io/echarty' target=_bl
8989
</p>
9090
This page does data polling for Bitcoin price every 10 seconds using <i>jsonlite::fromJSON</i>. <br>
9191
Response is a timestamp and a value in $US. Additional data processing could be achieved in R - moving averages(MA), prediction, etc.<br>
92-
This chart displays Bollinger Bands - two standard deviations on simple moving average for a ~2 minutes rolling interval. <br>
92+
The chart displays Bollinger Bands - two standard deviations on simple moving average of a rolling window. <br>
93+
You can select <b>rolling window width</b> here: <span>
94+
<select id='rwidth' onchange="updww()">
95+
<option value='6'>6</option>
96+
<option value='12' selected>12</option>
97+
<option value='18'>18</option>
98+
<option value='24'>24</option>
99+
<option value='36'>36</option>
100+
<option value='48'>48</option>
101+
<option value='60'>60</option>
102+
</select> </span> points (ex: 12 pts * ~10 secs = ~2 minutes window) <br>
93103
Maximum number of points is limited to 500 (FIFO stack). <br>
94104
Chrome browser timer throttling is bypassed through a background web worker. So data is collected even when the browser tab is not in focus.<br>
95105
See also the <a href='coder.html' target="_blank">coder demo</a> for interactive R-code chart editing.<br>
@@ -117,13 +127,14 @@ <h4>Real-time data with <a href='https://helgasoft.github.io/echarty' target=_bl
117127
tbox <- list(right='20%', feature= ec.util(cmd='fullscreen'))
118128
data <- list(list(as.character(Sys.time()), NA));
119129
lobb <- hibb <- sma <- list()
130+
prevPrice <- 0 # to compare prices
120131
plot <- ec.init(elementId='ch1', backgroundColor='#110b29', darkMode=T,
121132
title= list(text='Bitcoin Price Live', left='center', subtext=''),
122133
xAxis= list(type='time', splitLine= list(show=FALSE), name='Local time', nameLocation='center', nameGap=24),
123134
yAxis= list(name='₿ in USD', splitLine= list(lineStyle= list(opacity=0.5)), scale=T, max='dataMax', z=6),
124135
tooltip= list(type='cross', trigger='axis', axisPointer= list(axis='x')), toolbox= tbox,
125136
series= list(
126-
list(type= 'line', showSymbol=F, data= data, lineStyle= list(width=2, color='gold'), z=7,
137+
list(type= 'line', name='price', showSymbol=F, data= data, lineStyle= list(width=2, color='gold'), z=7,
127138
endLabel= list(show=T, color='yellow', offset=c(9,0),
128139
formatter= ec.clmn('(p) => { return p.data[1].toLocaleString(undefined, {maximumFractionDigits:2});}')) ),
129140
list(type= 'line', name='+BB', showSymbol=F, data= hibb, areaStyle= list(color='navy',opacity=0.7), smooth=T, lineStyle=list(width=1,color='lightblue')),
@@ -140,6 +151,8 @@ <h4>Real-time data with <a href='https://helgasoft.github.io/echarty' target=_bl
140151
# remote data refreshed every 10 secs
141152
142153
price <- round(json$RAW$PRICE, 2)
154+
if (prevPrice == price) return(list()); # dont add identical price
155+
prevPrice <- price;
143156
newData <- list(as.character(as.POSIXct(json$RAW$LASTUPDATE)), price )
144157
data <- append(data, list(newData)); # gather same data in R too
145158
# calc st.deviation of price, 12* 10sec= 2min rolling stdev
@@ -148,12 +161,20 @@ <h4>Real-time data with <a href='https://helgasoft.github.io/echarty' target=_bl
148161
dd <- tail(sapply(data, '[[', 2), ww)
149162
stdev <- rollapply(dd, width=ww, FUN=sd, fill=0, align='r')[ww]
150163
sma <- rollmean(dd, k=ww, fill=NA, align='right')[ww]
151-
newData <- c(newData, round(stdev,2), round(sma,2))
164+
hibb = round(sma + stdev * 2, 2);
165+
lobb = round(sma - stdev * 2, 2);
166+
newData <- c(newData, round(sma,2), hibb, lobb)
152167
}
153168
if (length(data) > 500)
154169
data <- data[2:length(data)]
155170
newData
156171
`
172+
curww = '12';
173+
function updww() { // update rolling window width
174+
newrw = document.getElementById("rwidth").value;
175+
dataCode = dataCode.replace('ww <- '+ curww, 'ww <- '+ newrw);
176+
curww = newrw;
177+
};
157178

158179
async function doChart() {
159180
document.getElementById('app').innerHTML= 'Wait...';
@@ -220,41 +241,33 @@ <h4>Real-time data with <a href='https://helgasoft.github.io/echarty' target=_bl
220241
}
221242
worker.postMessage(10000); // msec for refresh
222243

223-
prevPrice = 0;
224244
async function updChart() {
225245
const rlist = await webR.evalR(dataCode)
226246
const tmp = await rlist.toJs();
227247
darr = recurs2(tmp);
228-
229-
if (prevPrice == darr[1]) return; // dont add identical price
230-
prevPrice = darr[1];
231-
232-
// Bollinger Bands
233-
hibb = null;
248+
if (darr.length==0) return; // dont add identical price
249+
price = [darr[0], darr[1]]; // [time,price,sma,+BB,-BB]
250+
hibb = null;
234251
if (darr.length>2 && darr[2]>0) {
235-
hibb = [darr[0], (darr[3]+darr[2]*2).toFixed(2)];
236-
lobb = [darr[0], (darr[3]-darr[2]*2).toFixed(2)];
237-
sma = [darr[0], darr[3]];
238-
darr.pop(); darr.pop();
252+
sma = [darr[0], darr[2]];
253+
hibb = [darr[0], darr[3]];
254+
lobb = [darr[0], darr[4]];
239255
}
240-
241256
chart = get_e_charts('ch1');
242257
opt1 = chart.getOption();
243258
pts = opt1.series[0].data.length;
244259
if (pts>500) {
245-
opt1.series[0].data.shift();
246-
opt1.series[1].data.shift();
247-
opt1.series[2].data.shift();
260+
for(i=0; i<4; i++) opt1.series[i].data.shift();
248261
}
249262
pts = opt1.series[0].data.length;
250263
opt1.title[0].subtext = pts + ' points';
251-
opt1.series[0].data.push(darr);
264+
opt1.series[0].data.push(price);
252265
if (hibb) {
253266
opt1.series[1].data.push(hibb);
254267
opt1.series[2].data.push(lobb);
255268
opt1.series[3].data.push(sma);
256269
}
257-
opt1.series[4].data = [darr]; // effectscatter
270+
opt1.series[4].data = [price]; // effectscatter
258271
chart.setOption(opt1);
259272
};
260273

0 commit comments

Comments
 (0)