Tooltips broken for mixed charts

rashearth commented 5 years ago

Hi, this is a wonderful plugins. I really loved using it, but i have some issues since i upgraded to 2.8.0chart.js

Sometimes the underlined error comes out, and the plotting stops or makes huge lags.

Do you know how i could fix this? I upgraded all the chart.js related scripts, but wont work out

chartjs-chart-financial.js:118 Uncaught TypeError: Cannot read property 'toFixed' of undefined
    at i.label (chartjs-chart-financial.js:118)
    at Chart.min.js:7
    at Object.each (Chart.min.js:7)
    at i.getBody (Chart.min.js:7)
    at i.update (Chart.min.js:7)
    at i.handleEvent (Chart.min.js:7)
    at ni.eventHandler (Chart.min.js:7)
    at i (Chart.min.js:7)
    at HTMLCanvasElement.Fe.(anonymous function) (https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js:7:77594)

benmccann commented 5 years ago

Do you have a datapoint which is missing the o (open) attribute?

rashearth commented 5 years ago

Hi, actually i am using the streaming plugins as below. https://nagix.github.io/chartjs-plugin-streaming/samples/financial.html

The datapoints comes from the "onRefresh " function. I get some data from firebase to plot candlestick, but the error comes out randomly, about 1 times per 10sec.

also i dont know if i am answering correctly. I didnt really understood the " datapoint missing open attribute " could you kindly tell me a example for " datapoint missing open attribute "?

benmccann commented 5 years ago

It looks to me like onRefresh doesn't set last.o and that's probably the problem

Edit: nevermind. I looked too quickly. It looks like onRefresh is fine

rashearth commented 5 years ago

thx! i have sent an issue to nagix-san too. https://github.com/nagix/chartjs-plugin-streaming/issues/70

I hope Nagix-san would help

benmccann commented 5 years ago

The streaming example creates data with the attributes t, o, h, l, and c. E.g. data.push({ t: t - 5000, o: 99, h: 101, l: 98, c: 100 });. Your code seems to be using data that is missing o sometimes

nagix commented 5 years ago

@benmccann I checked @rashearth's code and realized that it uses mixed data types in a chart including 'line' and 'scatter'. The tooltip callback currently doesn't support it, does it?

rashearth commented 5 years ago

Hi, here is the sample. in the previous version, i was able to plot scatter, line and candlestick with no problem.

i just listed a sample here. if i list down candlestick with other scatter and line chart, it will go wrong. http://aifx2.sakura.ne.jp/realtimecharttest.html (heres the example website. i will just delete this website in severaldays.)

<!DOCTYPE HTML>
<html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<head>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
</head>
<body>
    <div>
        <canvas id="myChart"></canvas>
    </div>
</body>

<script>

var annotationx; 
var annotationy;

var ask = Math.random();

setInterval(function () {

    annotationx= Date.now();
    annotationy = 90;
    return annotationx;
    return annotationy; 

}, 10000); 

function onRefresh(chart) {
    var t = Date.now();
    var data = chart.data.datasets[0].data;
    var last;

    t -= t % 5000;
    if (data.length === 0) {
        data.push({ t: t - 5000, o: 99, h: 101, l: 98, c: 100 });
    }
    last = data[data.length - 1];
    if (t != last.t) {
        var c = last.c;
        last = { t: t, o: c, h: c, l: c, c: c };
        data.push(last);
    }
    last.c += Math.random() - 0.5;
    last.h = Math.max(last.h, last.c);
    last.l = Math.min(last.l, last.c);

         chart.data.datasets[1].data.push(
            {
            x: annotationx,
            y: annotationy
            });

                chart.data.datasets[2].data.push(
            {
            x: Date.now(),
            y: ask,
            });

}

var config = {
    type: 'candlestick',
    data: {
        datasets: [{
            data: [],
            fractionalDigitsCount: 2
        },
               {
                        type: 'scatter',
                        label: 'buy',

                        backgroundColor: "red",
                        radius: 0,
                        borderColor: "blue",
                        fill: false,

                        lineTension: 0,
                         datalabels: {
                             display: true
                        },

                        data: []

                        },

                        {
                        type: 'line',
                        //lineTension: 0,   
                        radius: 0,
                        datalabels: {
                             display: false
                        },
                        label: 'Ask',

                        //backgroundColor: "",
                        borderColor: "red",
                        borderWidth: 1,
                        datalabels: {
                             display: false
                        },
                        fill: false,
                        data: []
                        },

]
    },
    options: {

        title: {
            display: true,
            text: 'Financial chart sample'
        },
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                type: 'realtime',
                realtime: {
                    duration: 120000,
                    refresh: 500,
                    delay: 0,
                    onRefresh: onRefresh
                }
            }]
        },
        tooltips: {
            position: 'nearest',
            intersect: false
        },
        animation: {
            duration: 0
        }
    }
};

window.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    window.myChart = new Chart(ctx, config);
};

</script>

nagix commented 5 years ago

I guess https://github.com/chartjs/chartjs-chart-financial/commit/a3c0d74360fb8dc33ac36c551b973e585870246b#diff-8c39f37515174c3c13daa63b161598dc changed the behavior, but it hasn't supported other data types than {o, h, l, c}.

benmccann commented 5 years ago

Ahhh, good catch. Thanks @nagix !

rashearth commented 5 years ago

hi! do you know if this issue is solved already? If not, could you send the previous chart.js financial chart ver. so that we could implement mixed chart ? Thank you

benmccann commented 5 years ago

I just pushed a fix for this

chartjs / chartjs-chart-financial

Tooltips broken for mixed charts #52