Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initiate chart without data #80

Open
Benjythebee opened this issue Sep 7, 2020 · 2 comments
Open

Initiate chart without data #80

Benjythebee opened this issue Sep 7, 2020 · 2 comments

Comments

@Benjythebee
Copy link

Hey, cheers for your work!

I am currently trying to create a candlestick chart that will be felling up over time. That is, when I initiate the graph, the x axis is already premade but with no y values.

I then later attempt to add values over time: after 5s add a bar to x=1 ...

This works perfectly when using a simple line chart.

However this is not working when using the candlestick type of chart.
I am getting the following error:
image

Which seems to be linked to this code:

afterBuildTicks: scale => {
                    const DateTime = window && window.luxon && window.luxon.DateTime;
                    if (!DateTime) {
                        return;
                    }
                    const majorUnit = scale._majorUnit;
                    const ticks = scale.ticks;
                    const firstTick = ticks[0];
    
                    let val = DateTime.fromMillis(ticks[0].value);     //-- Line 66
                    if ((majorUnit === 'minute' && val.second === 0)
                            || (majorUnit === 'hour' && val.minute === 0)
                            || (majorUnit === 'day' && val.hour === 9)
                            || (majorUnit === 'month' && val.day <= 3 && val.weekday === 1)
                            || (majorUnit === 'year' && val.month === 1)) {
                        firstTick.major = true;
                    } else {
                        firstTick.major = false;
                    }
                    let lastMajor = val.get(majorUnit);
    
                    for (let i = 1; i < ticks.length; i++) {
                        const tick = ticks[i];
                        val = DateTime.fromMillis(tick.value);
                        const currMajor = val.get(majorUnit);
                        tick.major = currMajor !== lastMajor;
                        lastMajor = currMajor;
                    }
                    scale.ticks = ticks;
                }

From what I understand, the code expects ticks right off the bat. So if there is no data by default then it will throw an error?

Am I missing something? if not It would be great to implement upgrade the code to let the chart initiate properly without data.

If I am simply dumb, I'd love an idea on how to achieve what I'm looking for that'd be amazing, cheers.

@benmccann
Copy link
Collaborator

That's not a use case I've explicitly supported in the past. I'd be happy to accept a PR to address this

@Benjythebee
Copy link
Author

Yes that would be great, please someone Ping once that's planned!

In the meantime I've decided to send a dummy data point as shown below. When the very first candle is send to the graph it replaces that dummy bar.

var config = {
      type: 'candlestick',
      data: {
        datasets: [{
          label: 'Prices',
          backgroundColor:'rgba(13, 0, 104,0.8)',
          data: [{
            t: Date.now(),
            o: 0,
            h: 0,
            l: 0,
            c: 0,
            tt:0
        }
          ]
        }]
      },
...

Now the graph works but saddly the x axis isn't its full length from start. It starts from one tick and gradually becomes bigger. :(
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants