CODEWITHSUNDEEP
javascripthtml
Maria1995
Maria1995

Reputation: 501

Display different chart when clicking on side buttons

I am new to front-end and I created something like this: https://codepen.io/mihaela-dobre/pen/RwWGbNp I have 3 side buttons and if I click on them, I see the same chart displayed. How can I write a JS function in order to display something else? For example, I want to display this chart when clicking on the second button:

var ctx_3 = document.getElementById('chartEight').getContext('2d');
var chartEight = new Chart(ctx_3, {
    type: 'line',
    data: {
        labels: ['2020-03-10','2020-03-11','2020-03-12'],
        datasets: [{

            label: 'Trust Higher Than Eight Profit Per Day',
            data: [100,800,600],

            borderColor: [
                'rgba(251,127,20,1)',
                'rgba(251,127,20,1)',
                'rgba(251,127,20,1)'
            ],
            borderWidth: 3,
            lineTension: 0
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "#CCC", 
                    beginAtZero: true
                },
                gridLines: {
                    zeroLineColor: "#CCC"
                }
            }],
            xAxes: [{
                display:true,
                 ticks: {
                  fontColor: "#CCC", 
                }

            }]
        },
        legend: {
            labels: {

                fontSize: 20
            }
        },
        hover: { 
            mode: 'y-axis' 
        },
        tooltips: {
            titleFontSize: 14,
            bodyFontSize: 14 
        }
    }
});

Can anyone help me with how I can make this chart appear when I click on the second button, the one with K/D?

Upvotes: 0

Views: 75

Answers (1)

Stuck
Stuck

Reputation: 12292

Just add a click-listener on the label representing the button and draw the new chart:

document.getElementById("1").addEventListener('click', () => {
  // ... create the new chart ...
});

Full code here: https://jsfiddle.net/akmjxynq/

Upvotes: 1

Related Questions