Display two custom graphics (image in the pointers) on the same page as Chart.js

0

I made an application that displays a chart (Line) from the Chart.js library. According to the value of the "date" attribute, the pointer may vary: below 25 a triangle is displayed and from 25 upwards an image is displayed, which in this case is a sun.

Displaying a single chart, the code works perfectly. However, when you try to place a second chart on the same page, the second chart only appears when you hover the mouse next to the first one. I am using jQuery inside the pluginService.register function to control the pointer customization.

Here is an HTML code snippet:

<body>
<div class="container-fluid">
    <div class=row>
        <div class="col-6"><canvas id="canvas"></canvas></div>
        <div class="col-6"><canvas id="canvas2"></canvas></div>
    </div>
</div>

Following Javascript:

var sun = new Image();
sun.src = 'https://i.imgur.com/yDYW1I7.png';

sun.width = 30;
sun.height = 30;

Chart.pluginService.register({
    afterUpdate: function(chart,chart2) {
    $.each(chart.config.data.datasets[0].data, function(index, value){ 

    if(value < 25){
        chart.config.data.datasets[0]._meta[0].data[index]._model.pointStyle = 'triangle';

    } else{
        chart.config.data.datasets[0]._meta[0].data[index]._model.pointStyle = sun;
    }
    });
}
});

    var config = {
        type: 'line',
        data: {
            labels: ['','10', '500', '1000', '2000', '3000', '4000', '6000', '8000', '10000'],
            datasets: [{
                label: 'Esquerda',
                fill: false,
                backgroundColor: '#166a8f',
                borderColor: '#166a8f',
                pointBorderColor: 'rgb(65,105,225)',
                pointBorderWidth: 3,
                pointBackgroundColor: "#fff",
                pointRadius: 10,
                pointStyle: 'circle',
                showLine: true, 
                data: [ NaN,
                    10,
                    10,
                    20,
                    5,
                    40,
                    80
                ],
            }, {
                label: 'Dashed',
                fill: false,
                pointRadius: 0,
                borderColor: '#000',
                borderDash: [5, 5],
                data: [
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25
                ],
            }]
        },

        options: {

            legend: { 
                display: false
            },

            elements: {
                line: {
                    tension: 0.000001
                }
            },
            responsive: true,
            title: {
                display: true,
                fontSize: 30,
                text: 'Titulo 1'
            },
            tooltips: {
                enabled: false,
                mode: 'index',
                intersect: false,
                backgroundColor: 'rgba(0,0,0,0.8)'
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    position: 'top',
                    gridLines: { 
                        display:true,
                        color: '#000',
                        lineWidth: 1
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Escrever algo aqui'
                    }
                }],
                yAxes: [{
                    ticks: {
                        mirror: false,
                        reverse:true
                    },
                    gridLines: {
                        display:true,
                        color: '#000',
                        lineWidth: 1
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Escrever algo aqui'
                    }
                }]
            }
        }
    };

    var config2 = {
        type: 'line',
        data: {
            labels: ['','10', '500', '1000', '2000', '3000', '4000', '6000', '8000', '10000'],
            datasets: [{
                label: 'Direito',
                fill: false,
                backgroundColor: '#166a8f',
                borderColor: '#166a8f',
                pointBorderColor: 'rgb(65,105,225)',
                pointBorderWidth: 3,
                pointBackgroundColor: "#fff",
                pointRadius: 10,
                pointStyle: 'circle',
                showLine: true, 
                data: [ NaN,
                    10,
                    10,
                    20,
                    5,
                    40,
                    80
                ],
            }, {
                label: 'Dashed',
                fill: false,
                pointRadius: 0,
                backgroundColor: '#166a8f',
                borderColor: '#000',
                borderDash: [5, 5],
                data: [
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25,
                    25
                ],
            }]
        },

        options: {

            legend: { 
                display: false
            },

            elements: {
                line: {
                    tension: 0.000001
                }
            },
            responsive: true,
            title: {
                display: true,
                fontSize: 30,
                text: 'Titulo 2'
            },
            tooltips: {
                enabled: false,
                mode: 'index',
                intersect: false,
                backgroundColor: 'rgba(0,0,0,0.8)'
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    position: 'top',
                    gridLines: { 
                        display:true,
                        color: '#000',
                        lineWidth: 1
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Escrever algo aqui'
                    }
                }],
                yAxes: [{
                    ticks: {
                        mirror: false,
                        reverse:true
                    },
                    gridLines: {
                        display:true,
                        color: '#000',
                        lineWidth: 1
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Escrever algo aqui'
                    }
                }]
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
        var ctx2 = document.getElementById('canvas2').getContext('2d');
        window.myLine2 = new Chart(ctx2, config2);
    };

The error returned in the console is as follows:

Uncaught TypeError: Cannot read property 'data' of undefined
    at Number.<anonymous> (canvas2.php:65)
    at Function.each (jquery-3.3.1.js:354)
    at Object.afterUpdate (canvas2.php:59)
    at Object.notify (Chart.js:6754)
    at Chart.update (Chart.js:4234)
    at Chart.resize (Chart.js:4022)
    at listener (Chart.js:4621)
    at Chart.js:10777
    at Chart.js:10669

I'd like to put the two graphics on the same page, so it's possible they both had the custom pointers.

I have tried every way to the best of my knowledge, but without any success. An aid would be greatly appreciated.

Follow the CodePen link, with full code there: link

    
asked by anonymous 11.09.2018 / 03:37

0 answers