Chartjs-How to pass a nested function to an HTML button and Dropdown menu

by

0👍

Here is what is happening.

You are calling getChart(), which is calling start(), and in start() you are calling getChart()!! You are making an infinite recursion, but it actually is stopping on the second call of getChart() because the chart is not beeing destroyed.

First, just make every function out of getChart, and remove the recursion.

Now, set the select to the following:

<select id="types">

and in your javascript add the folowing to take the change event:

$(function () {
    // on change the type of the chart
    $(document).on("change", "#types", function () {
        let type = $('#types').val();
        changeChart(type);
    });
})

Now changing the type of a chart. First you need to destroy the chart, Then you can recreate a chart with the type that is selected.

function changeChart(newType) {
    if (chart) {
        chart.destroy();
    }
    myChart= new Chart("myChart", {
        type: newType,
        .
        .
        .
    }
}

Leave a comment