Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Rory Winston
    @rwinston
    This library is awesome - any plans to port to Vue 3?
    Code's All Right ™
    @C451
    Rory Winston
    @rwinston
    @C451 super thanks very much, I will check that out!
    oneart-dev
    @oneart-dev
    Hi! Any support for onHover yet in overlays?
    Jiateng Liang
    @toxicaker
    Hi. except ohlcv, how can I show change?(percentage)
    oneart-dev
    @oneart-dev
    Why elements on chart have ridiculous high z-index. All my elements (vuetify) under it. 99? for what reason?
    Code's All Right ™
    @C451
    @toxicaker not yet
    Code's All Right ™
    @C451
    1 reply
    Code's All Right ™
    @C451

    Update 1.0.1

    Some critical stuff:

    * Added `src` field to `script` object, allows to overwrite `calc()`  
    * Fixed real-time calc for symbols, e.g. close1D (didn't work b4)
    * Fixed `setCursor()` & `goto()` in IB mode
    Wojciech Owczarczyk
    @wowczarczyk

    Hey, I am wondering if the components from tvjs-xp should not be exported the same way extensions are. I am using the Window to create my own implementation and I am able to import it using:

    import XPWindow from 'tvjs-xp/src/components/Window.vue'

    but maybe skipping the src token would be beneficial. Also the bundle size will be smaller as those components would undergo the regular build phases.

    Wojciech Owczarczyk
    @wowczarczyk
    @C451 quick one: can I access tv object from overlay? I wanted to send a custom_event to open my custom window Ok, I noticed $emit is available on this in overlay, nvm, sorry!
    Code's All Right ™
    @C451
    @wowczarczyk not sure I fully understand your suggestion, but for example shared components will not work, bc different exts can have components with the same name
    Also, Window can be added to the components list, I just skipped it for now https://github.com/tvjsx/tvjs-xp/blob/main/src/extensions/settings-win/x.json, the result will be added here https://github.com/tvjsx/tvjs-xp/blob/main/build/settings-win/settings-win.js#L15
    rabdalov
    @rabdalov
    Hi! Cold you provide me with the simple example of external Overlays usage in Browser mode (without NPM) ?
    For Example how to Add [Grin] from Project 101 if I can't use NMP?
    leoplaw
    @leoplaw
    Hi, I can get the examples to run with npm run test but integrating it in a node cli project just comes with a blank. I've passed one of the example data files data_btc.json to it and believe I have configured it correctly. Can anyone point me to an example .vue where this is integrated?
    nylin93
    @nylin93

    Hi @C451, I am trying to create a horizontal line. I am able to do so like this:

        init() {
          const pin = new primitives.Pin(this, "p1", { state: "tracking" });
          pin.on("settled", () => {
            this.set_state("finished");
            this.$emit("drawing-mode-off");
          });
          this.pins.push(pin);
        },
        use_for() {
          return ["HorizontalLine"];
        },
        draw(ctx) {
          if (!this.p1) return;
          const layout = this.$props.layout;
          ctx.strokeStyle = "#42b28a";
          ctx.lineWidth = 0.9;
          ctx.beginPath();
          const x = layout.t2screen(this.p1[0]);
          const y = layout.$2screen(this.p1[1]);
          ctx.moveTo(x, y);
          ctx.lineTo(0, y);
          ctx.lineTo(layout.width, y);
          ctx.stroke();
          this.render_pins(ctx);
        }

    However, there is no easy way to delete the horizontal line once created (the pins do not show up when hovering over the line). I suspect it is because I am not attaching Pins to the left and right side of the line. Is there a way to programmatically create a Pin object by giving it an x or y canvas value?

    What I want to do essentially is to create a pin on the far left side and far right side and draw a line between the two. That way when hovering over the line, the pins will show and the line can be deleted. Thank you

    1 reply
    leoplaw
    @leoplaw
    Is TradingVue compatible with Vue3?
    rabdalov
    @rabdalov

    Could somebody give an examlpe how to store data into dataset and how to extract it from dataset ?
    For examlpe, I want to fetch data from some source once into dataset,
    and show on chart after some interactive filtering.
    I stuck in geting data from DATASET...

    So I did so:

    data(){
        return {
            chart: new DataCube({
                data:[],
                posfilter:1,
                datasets: [{
                    type: 'Trades',
                    id: 'SomeData',
                    data: []
                }] 
            })
        }
    },
    mounted(){
        //....Requesing data and Saving data into dataset
        let response =await fetch(someurl)
        let string = await response.text();
        let myData = string === "" ? {} : JSON.parse(string);
        this.chart.set('datasets.SomeData.data',myData) // is it correct ?
    
    },
    watch: {
                //... Filtering from external Variable 
            posfilter(value) {
    
                let valuedatasrc=this.chart.get('datasets.SomeData.data') // this gives me undefined result
                // How to Store data from dataset into "valuedatasrc" ?
    
                let valuedata=valuedatasrc.filter(itm=>{itm[1]=value})
    
                this.chart.set('onchart.OptLines.data',valuedata)
    
            },
    }
    Devin345458
    @Devin345458
    Is there a way to prevent it from panning before the first data point? When this happens it drops my scale down to 0 and zooms all my data way out as it is bitcoin price of 48-50k
    moshmage
    @moshmage
    hey fellas, does tradingvue work with vue3 ?
    Johannes Hoppe
    @JohannesHoppe

    hey fellas, does tradingvue work with vue3 ?

    not yet

    there is a branch: https://github.com/tvjsx/trading-vue-js/tree/vue3 , and there you can read: VUE 3 JOURNEY JUST STARTED
    xiaoge
    @xiaogea01

    Quick study (done entirely in one overlay) : BTC: Day Of The Week Returns
    https://tvjs.io/play/?a=ypwpa1aj
    Today is the most bearish day, but we are holding good so far

    hi, I am new here to study tvjs, I tested https://tvjs.io/play/?a=ypwpa1aj in my local laptop with newest version tvjs ,unluckily I can not get the overlay result printed on the pic left upper corner ,i really appreciate tvjs, i love it very much. I read some doc on github ,but I not totaly understand the key point, I also try tvjs-xp, and combine tvjs-xp with websocks(https://github.com/tvjsx/trading-vue-js/blob/master/test/tests/DataHelper.vue ) but failed.

    This message was deleted
    xiaoge
    @xiaogea01
    I stiil not know why this not work for me :(
    grin is from https://gist.github.com/C451/6d8ea8d603e3faadd801b4b3f2e7a57d
    the data is somelike
    { "ohlcv": [ [ 1593824400000, 9082.6, 9082.7, 9069, 9078.08979168, 32.34898355 ],[...]] }
    the code is:
    <template>
            <div>
    <trading-vue
            :data="dc"
            :overlays="overlays"
            :legend-buttons="['display', 'settings', 'up', 'down', 'add', 'remove']"
            >
    </trading-vue>
            </div>
    </template>
    <script>
    
    import TradingVue from 'trading-vue-js'
    import GRIN from './Grin.vue'
    import { DataCube } from 'trading-vue-js'
    import Data from '../data/b15f68859a7ed52767c6ad1a376e5dc3.json'
    export default {
        name: 'app',
        components: { TradingVue },
        data() {
            return {
                dc: new DataCube(Data),
                overlays: [GRIN],
            }
        }
    }
    </script>
    xiaoge
    @xiaogea01
    d1.png
    xiaoge
    @xiaogea01
    The GRIN overlays is not work,I do not know why, I add some console.log code inner draw(ctx) in grin.vue, but the web console show nothing, am I wrong or someting else I missed?
    xiaoge
    @xiaogea01
    I start a new test project , and the data form likes
    { "chart": { "type": "Candles", "data": [ [ 1552453200000, 3958.5, 3960.1, 3955.2, 3957, 117.25325922 ],]} instead of { "ohlcv": [ [ 1593824400000, 9082.6, 9082.7, 9069, 9078.08979168, 32.34898355 ],[...]] }, it wokrs !!
    MhdBssd
    @MhdBssd_gitlab

    Hello there,

    I’m still working on my Overlay for trading #thestrat.
    For now I’m on 2/3 of my objectives which are:

    1) Timeframe continuity => Display different timeframes (done)
    2) Actionable signals => Display 1 (inside bars), 2 (directional bars) and 3 (reversal bars) type candles on the chart (done)
    3) Broadening formation => Add simple lines drawing tool (todo)

    cf: https://postimg.cc/jwfS2WvV

    However I’m struggling to add the drawing tool and have a few questions:

    • Do drawing tools work with DataCube only?
    • Is it possible to add a single toolbar for multiple charts and detect on which chart the user is drawing to save the lines accordingly ?

    Thank you !

    Peter Dias
    @peterdias:matrix.org
    [m]
    overlays dont seem to auto update when new bars are added to chart ???? any help please
    intelligenceBabila
    @intelligenceBabila
    Have been trying to add this chart to laravel project I do everything no errors and nothing showing
    Sergio Masellis
    @sergiomasellis:matrix.org
    [m]
    Anyone get the vue3 lib to work yet or still too early?
    endermaz41
    @endermaz41
    Awesome library ! I would like to save and load some line drawings using the tool. I know of dc.get and dc.set. But not sure how to restore the data from dc.get to dc.set. Getting errors as is.
    endermaz41
    @endermaz41
    yeah, dc.get('onchart.LineTool.data') gives me an empty array, but dc.get('onchart.LineTool') does show a valid array but it has so many extra props.
    endermaz41
    @endermaz41
    The LineTool.vue uses pins to set p1 & p2 with mouse tracking. Not sure how to set it manually
    intelligenceBabila
    @intelligenceBabila
    Seems very inactive
    Dexter Siah
    @dextersiah
    x-axis-data.png

    Hello there,

    I would like to know is there any configuration to hide or replace the date on the X-axis? including the tooltip

    MhdBssd
    @MhdBssd_gitlab
    Dexter Siah
    @dextersiah
    Is there a custom file where I would customize this? I'm honestly slightly confused by the docs.
    usaccounts
    @usaccounts
    Screen Shot 2021-03-12 at 8.38.32 PM.png
    usaccounts
    @usaccounts
    This is the datahelper demo -- looks like things get screwed up if you go a bit far back.
    Screen Shot 2021-03-12 at 8.46.24 PM.png
    usaccounts
    @usaccounts
    diff --git a/src/App.vue b/src/App.vue
    index 615634d..9126af0 100644
    --- a/src/App.vue
    +++ b/src/App.vue
    @@ -4,6 +4,7 @@
     <trading-vue :data="chart" :width="this.width" :height="this.height"
         :color-back="colors.colorBack"
         :color-grid="colors.colorGrid"
    +    :overlays="overlays"
         :color-text="colors.colorText">
     </trading-vue>
     </template>
    @@ -11,7 +12,7 @@
     <script>
     import TradingVue from 'trading-vue-js'
     import Data from '../data/data.json'
    -
    +import Grin from './Grin.js'
     export default {
         name: 'app',
         components: { TradingVue },
    @@ -30,6 +31,7 @@ export default {
         data() {
             return {
                 chart: Data,
    +            overlays:[Grin],
                 width: window.innerWidth,
                 height: window.innerHeight,
                 colors: {
    Above fix for trading-vue-101 unknown type.
    usaccounts
    @usaccounts
    Fix to show all 8 charts in multi chart.
    diff --git a/test/tests/Multichart.vue b/test/tests/Multichart.vue
    index 40a48ba..8c4bf5a 100644
    --- a/test/tests/Multichart.vue
    +++ b/test/tests/Multichart.vue
    @@ -31,7 +31,14 @@ export default {
         },
         computed: {
             cbox_width() { return Math.floor(this.width / 2 - 1) },
    -        cbox_height() { return Math.floor(this.height / 2 - 1) }
    +        cbox_height() {
    +          let mc = window.document.getElementsByClassName("multi-chart")[0];
    +          if (mc) {
    +            return Math.floor(this.height / (mc.childElementCount / 2) - 1);
    +          } else {
    +            return Math.floor(this.height / 2 - 1);
    +          }
    +      }
         },
         mounted() {
             window.addEventListener('resize', this.onResize)
    mnjpatledivyal
    @mnjpatledivyal

    Hello, I am integrating trading-vue-js in our one of application as its great. I have integrated in my vue project and gone through some setup.

    I need to zoom in and zoom out using external buttons, I understand its being done by mouse scroll but need to do with zoom in and zoom out external buttons as well. Can anyone help me how to do it or which prop or setting/config or methods I can use for this ?

    Ivan Buriak
    @ivan-buriak
    HI! Have two questions, help please: