1

I have a selected list where i want different charts to appear, but when i hover the new chart the old chart is bugging in and out. I have tryed to delete the chart but im not sure what to do. I have added new values to the array stat using the if and selectedIndex. Would really appreciate someone helping me:). I have see other people saying to use . destroy(); but i cant make it work.

    var item = document.getElementById("item");
    var ctx = document.getElementById("chart");
    var btn = document.getElementById("btn");

    var stat = [];


    function check() {
        var Index = item.selectedIndex;
        if(Index === 1){
            stat = [3,15.3,21.8,1.4,4.1,0.8,15.2,26.8,4.1];

            tabell();
        }else if(Index === 2){
            stat =[1.4,5.5,16.6,1.4,7.5,1.2,30.3,28.9,4.2];
            tabell();

        }
    }


    function show() {

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["player1", "player2", "player3", "player4", "player5", "player6","player7", "player8","player9"],
                datasets: [{
                    label: 'table thing',
                    data:stat ,
                    backgroundColor: ['#650012', '#a80014', '#e10028', '#b0e13e', '#23b121', '#ccd535', '#248e26', '#3c96bc', '#1721bc'],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

    }


    btn.onclick = function () {
        check();
    };
var item = document.getElementById("item");
var ctx = document.getElementById("chart");
var btn = document.getElementById("btn");
var stat = [];


function check() {
    var Index = item.selectedIndex;
    if(Index === 1){
        stat = [3,15.3,21.8,1.4,4.1,0.8,15.2,26.8,4.1];

        tabell();
    }else if(Index === 2){
        stat =[1.4,5.5,16.6,1.4,7.5,1.2,30.3,28.9,4.2];
        tabell();

    }
}


function show() {

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["player1", "player2", "player3", "player4", "player5", "player6","player7", "player8","player9"],
            datasets: [{
                label: 'Av 100 stemmer',
                data:stat ,
                backgroundColor: ['#650012', '#a80014', '#e10028', '#b0e13e', '#23b121', '#ccd535', '#248e26', '#3c96bc', '#1721bc'],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

}


btn.onclick = function () {
    check();
};
Erik Host
  • 11
  • 1
  • This answer helped me with loading different data on charts if thats what you are looking for. https://stackoverflow.com/questions/24785713/chart-js-load-totally-new-data – devdob Nov 15 '17 at 11:23
  • ye thanks, i have seen it and i cant figure how to set it in to my code :( – Erik Host Nov 15 '17 at 11:33

0 Answers0