TradingVue.js/community

💹 Hackable charting lib for traders

Arul

@arul67800

@akjcodes Thank you sir, im trying this

@C451 We are very grateful for this sir...This product would be a superhit soon

Arul

@arul67800

@akjcodes can you elaborate how you connected the websockets api instead of data.json?

Akila Thiwanka

@akjcodes

@arul67800 Not sure which stream you're planning to use, but you can get an idea from this demo https://github.com/tvjsx/trading-vue-js/blob/master/test/tests/DataHelper.vue

Or you can try socket.io if you're building your own stream

BTW I'm a product designer, I do web developing when I'm free. So, I'm not the best one to get advice 😊 So, maybe there are more options other than socket.io

Code's All Right ™

@C451

@arul67800 yeah, for now the only way to connect js to py is to use some kind of -sockets (I use unix-, but it's easier to go with web- ). Basically you need to make python server with REST api and use it in vue.js

Arul

@arul67800

i think flask-restful api will do the job

but can you give some ideas to make it happen

Code's All Right ™

@C451

Does https://github.com/tvjsx/trading-vue-js/blob/master/test/tests/DataHelper.vue helps?

Arul

@arul67800

@C451 im working on it and will revert back to you..

Akila Thiwanka

@akjcodes

@C451 hey 👋 Is there any way that I can get all the candlestick data inside an Overlay? or access to the Datacube object without saving it as a global variable (DC)

Code's All Right ™

@C451

@akjcodes you could, but why? One way is to clone the data into a .settings filed
Overlays were designed as shaders, so they see only a subset of the data.

Akila Thiwanka

@akjcodes

I'm working on an indicator that highlight price gaps. To do this I need to get last x candles data. I'm not sure what's the best way to achieve this. @C451

Code's All Right ™

@C451

@akjcodes so why did I spend 2-3 months on scripts & datasets? That's the exact reason. : ) Had no time to document them yet, but will do for sure.
If you dig into tests #7, #16 you'll find the answers

Akila Thiwanka

@akjcodes

@C451 Thanks, unfortunatly I've already go through it but didn't understand how it works 😔 I might need to wait till you're document.

Arul

@arul67800

@C451 yes sir.. We need some more documentation..

Code's All Right ™

@C451

@arul67800 Will try to make asap, but the priority now is to finish 99.9%

Akila Thiwanka

@akjcodes

@C451 Sorry to trouble you. I've go through the script test demo then checked SMA function in script_std.js file. But what I understood is that function going through all the visible candles and get SUM of last x candle starting from each visible candle. Is there any way to get only last x candles data?

Hope my question is understandable 😊 For the time being I'm getting candles data using DC.get_one('chart'), inside the draw function on my custom overlay. But I'm not sure this is the optimized way to do it.

Thanks

Akila Thiwanka

@akjcodes

alt

Basically, this is what I'm trying to achieve. I need to highlight price gaps on last x candles

Code's All Right ™

@C451

@akjcodes so if you just create a script (calc() method) you'll get all ohlcv data automatically. Then you need just push it back to OV with settings({...}) method

init: `
    // here you calculate your sum
    for (var i = 0 ...) { ohlcv[i] }
`,
post: `
    // here you post it to the settings:
    settings({ result })
`

Akila Thiwanka

@akjcodes

@C451 Thanks lot for this info 🎉. You're awesome 🤘🙏

Code's All Right ™

@C451

@akjcodes 🍻

MhdBssd

@MhdBssd_gitlab

Hello there :wave:

MhdBssd

@MhdBssd_gitlab

I'm trying to customize the color of the candles on my charts with the "candles" overlay. I'd like to change the color of candles when its ohlc are contained within the previous candle (type 1 candles on this canvas https://excalidraw.com/#json=6246971773812736,mouPWIy9toX1RKfTlojG4w). However it seems like you can only style UP and DOWN candles (Close > Open and Close < Open). Does anyone have an idea of how I could implement that ? Thank you :thumbsup:

Code's All Right ™

@C451

Hi @MhdBssd_gitlab if you don't want to make your own modification of Candles, check out https://github.com/tvjsx/trading-vue-js/tree/master/docs/overlays#style-object-format

Akila Thiwanka

@akjcodes

@MhdBssd_gitlab You can use Candle.vue & candle.js to achieve that.

MhdBssd

@MhdBssd_gitlab

Thanks for your answers ! I'll try it out :thumbsup:
I'm new to this library but it looks very powerful. I'd like to contribute with a setup (I guess it's called "Overlays" here) for trading #thestrat (explained here, starts at 4:30 https://www.youtube.com/watch?v=Re0cGtFRhO0)

Akila Thiwanka

@akjcodes

@MhdBssd_gitlab Basically you have to pass the previous candle to candle.js file from candle.vue (Modify this line for that new Candle(this, ctx, c)) This is what I did 👇
1) Changed this for of for (var c of cnv.candles) { to loop to normal loop for (let i = 0; i < cnv.candles.length; i++) {
2) Instead of this new Candle(this, ctx, c) ➡️

const pc = i != 0 ? cnv.candles[i-1] : undefined; // previous candle 
const c = cnv.candles[i]; // current candle
new Candle(this, ctx, c, pc); // sending both candles

3) change constructor function in candle.js to retrieve the previous candle ex: constructor(overlay, ctx, data, prev) then pass it to draw function this.draw(data, prev);

4) Inside draw function do whatever logic you need and change body & wick colour

*please ignore my namings 😅

Code's All Right ™

@C451

I'm making a brief guide to Scripts (basically this problem as many others can be solved with Overlay+Script) Think of it as an embedded PINE

Akila Thiwanka

@akjcodes

@C451 I was going to ask the same from you, whether it's possible to do these kinda things using scripts, instead of changing the core files. Thanks 🤘

Will Drach

@willdrach_twitter

Hey @C451 , do you have a typical release cadence for this lib? I'm really in need of the fix for tvjsx/trading-vue-js#154 but it looks like you don't officially release all that often. I'm using a git override and that's fine for now, but just curious. Hell of a project btw, probably saved me a few hundred hours of work.

Code's All Right ™

@C451

@willdrach_twitter hey, approximately once a month. I decreased the frequency to save time. The next vers coming soon.
Yep, I myself wondering how the hell this happened. (it started just as a vue demo to learn the framework)

Will Drach

@willdrach_twitter

Party on, thanks!

Code's All Right ™

@C451

 ## [0.9.0] - 2020-11-17

* Scripts: advanced samplers (sym() function)
* Implemented Dataset ops (update, merge, remove)
* Countless small bug fixes as always
* Scripts: add onclose()
* Fixed auto-scroll (when new candle is added)
* Scripts: offchart/onchart updates
* DC: aggtool v2 (completely rewritten)
* Custom legend buttons (your custom icon)
* Tool groups
* Scroll wheel modes: prevent, pass, click
* WebWorker RAM limit
* LineTool: add Ray mode
* Legend buttons handlers [EXT]

Akila Thiwanka

@akjcodes

🎉🎉

Arul

@arul67800

 ## [0.9.0] - 2020-11-17

* Scripts: advanced samplers (sym() function)
* Implemented Dataset ops (update, merge, remove)
* Countless small bug fixes as always
* Scripts: add onclose()
* Fixed auto-scroll (when new candle is added)
* Scripts: offchart/onchart updates
* DC: aggtool v2 (completely rewritten)
* Custom legend buttons (your custom icon)
* Tool groups
* Scroll wheel modes: prevent, pass, click
* WebWorker RAM limit
* LineTool: add Ray mode
* Legend buttons handlers [EXT]

🙏🙏🙏

Code's All Right ™

@C451

2 Freshly minted guides:
Bam https://github.com/tvjsx/trading-vue-js/blob/master/docs/guide/SCRIPTS.md
Bam https://github.com/tvjsx/trading-vue-js/blob/master/docs/guide/EXTENSIONS.md

John Leung

@fuzzthink

Question, what is "indexBased" in the code?

Code's All Right ™

@C451

https://github.com/tvjsx/trading-vue-js/blob/master/docs/api/IB.md

John Leung

@fuzzthink

Ah, thank you!

In case you're still online, just opened tvjsx/trading-vue-101#10

Csaba

@csabaxyz

Hey, so I've been working with TradingVue for a bit now, but I have a question. Is there a way to figure out the chart's "scroll width"? I guess as a workaround I could check the number of candles and the spaces they'd take up at a certain zoom level, but I was hoping there is an easier way (as the zoom level might not be accessible). I couldn't find anything in the docs, or maybe just skipped it.

Code's All Right ™

@C451

@csabaxyz it depends on what you call "scroll width". If it's a sum of all visible candles, than yes the layout has the data: e.g. candles.length * px_step

Csaba

@csabaxyz

@C451 yes, that's what I'm looking for, but that only seems to be available inside an overlay. I was trying to access it from a ref to the chart.

Code's All Right ™

@C451

@csabaxyz also here tv.$refs.chart._layout

Csaba

@csabaxyz

@C451 that's quite hidden, but exactly what I'm looking for. Thank you!

On another note, I started using the Ichimoku overlay and I found it kind of buggy with the small spaces between the drawn elements, where the wicks are, and triangles drawn with different colors where the cloud switches from positive to negative (sorry, I don't have the perfect trading vocab for this). So, locally I rewrote it and was thinking about publishing it, just in case it helps others. I'll still have to clean it up, but should I just send a pull request to the current Ichimoku overlay, or create a new "Ichimoku improved" version?

I'm also working on a Point&Figure overlay, but that's nowhere near ready.

Code's All Right ™

@C451

@csabaxyz that Ichimoku overlay was made by a community member and prob needs an improvement. Plus it was made before the scritps feature, so I guess a new one should be packaged with calc()

Where communities thrive

People

Repo info

Activity