tvjsx / trading-vue-js

💹 Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]
https://tvjsx.github.io/trading-vue-demo/
MIT License
2.07k stars 628 forks source link

Datacube format #255

Open denisprovost opened 2 years ago

denisprovost commented 2 years ago

Hi,

I request data from my API to display them on the graph, the debug shows that I am getting my data well but nothing on the graph:

1

My actual test code:

<template>
    <span>
        <trading-vue 
            ref="tvjs"
            title-txt="ETHUSDT Binance 1h"
            :data="chart" 
            :width="width"
            :height="height" 
            :overlays="overlays">
        </trading-vue>
    </span>
</template>

<script>
import TradingVue from 'trading-vue-js'
import { DataCube } from 'trading-vue-js'

const SM = `http://localhost:7000/binder`

export default {
    name: 'app',
    components: { TradingVue },
    computed: {},
    mounted() { 
        window.addEventListener('resize', this.onResize)
        this.onResize()

        this.load_bind().then(data => {
            this.chart = new DataCube({
                ohlcv: data['chart.data'],
                onchart: [],
                offchart: [],
                datasets: []
            }, { aggregation: 100 })

            this.chart.onrange(this.load_bind)
            this.$refs.tvjs.resetChart()
        })
    },
    methods: {
        onResize(event) {
            this.width = window.innerWidth
            this.height = window.innerHeight
        },

        async load_bind() {
            try {
                let r = await fetch(SM).then(r => r.json())
                console.log('datas RealManager')
                console.log({'chart.data': this.parse_datas(r)})
                return {'chart.data': this.parse_datas(r)}
            } catch (error) {
                console.log(error);
            }
        },
        parse_datas(data) {
            if (!Array.isArray(data)) return []
            return data.map(x => {
                for (var i = 0; i < x.length; i++) {
                    x[i] = parseFloat(x[i])
                }
                return x.slice(0,6)
            })
        }
    },
    beforeDestroy() { 
        window.removeEventListener('resize', this.onResize)
    },
    data() {
        return {
            chart: {},
            overlays: [],
        }
    }
}
</script>

My setup is correct, i have test with the DataHelper example, it work correctly :) Anyone have an idea to debug this ? I forgot something ?

Thanks.

Bwahharharrr commented 2 years ago

trading-vue works absolutely fine. This is a problem with your code, not with trading-vue. . thus not a trading-vue issue .. its a 'your code' issue.