score:1

as i know we can't update chart type directly in charts.js then we have to destroy original chart and redraw the chart

// define data set for the chart
    let data = [18, 10,7, 8, 18, 20, 45, 8, 0, 67];
    mydata = {
        labels: ["january", "february", "march", "april", "may", "june", "july","september","october","november"],
        datasets: [{
            label: "data, baby!",
            fill: false,
            backgroundcolor: [
                "#aec7e8", "#ffbb78", "#d62728 ", "#98df8a ", "#1f77b4", "#ff7f0e ", "#2ca02c ",
                "#ff6380","#ff0000","#40e0d0","#fa8072","#339905","#98fb98","#ff8c00","#00fa9a",
                "#dc143c",
                "#ff1493",
                "#ff69b4",
                "#f08080",
                "#ffa500",
                "#ff4500",

            ],
            bordercolor: 'rgb(190, 99, 255)',
            data: data,
        }]
    };

    // default chart defined with type: 'line'
    chart.defaults.global.defaultfontfamily = "monospace";
    var ctx = document.getelementbyid('my_chart').getcontext('2d');
    var mychart = new chart(ctx, {
        type: 'line',
        data: mydata
    });

    // function runs on chart type select update
    function updatecharttype() {
        // here we destroy/delete the old or previous chart and redraw it again
        mychart.destroy();
        mychart = new chart(ctx, {
            type: document.getelementbyid("charttype").value,
            data: mydata,
        });
    };
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>
<div class="container-div">
    <div class="controls-div">
        <select name="charttype" id="charttype" onchange="updatecharttype()">
            <option value="line">line</option>
            <option value="bar">bar</option>
            <option value="doughnut">doughnut</option>
            <option value="radar">radar</option>
            <option value="polararea">polar area</option>
        </select>
    </div>
    <div class="chart-container" style="position: relative; width:85vw">
        <canvas id="my_chart"></canvas>
    </div>
</div>

score:8

one issue is the use of the assignment operator (=) instead of a logical operator (== or ===) in your conditional checks. additionally, i wouldn't couple the if/else logic with the available chart types.

var ctx = document.getelementbyid("mychart").getcontext("2d");
 ctx.canvas.width = 600;
 ctx.canvas.height = 200;

 var datamap = {
     'line': {
         method: 'line',
         data: {
             labels: ["january", "february", "march", "april", "may", "june", "july"],
             datasets: [{
                 label: "my first dataset",
                 fillcolor: "rgba(220,220,220,0.5)",
                 strokecolor: "rgba(220,220,220,0.8)",
                 highlightfill: "rgba(220,220,220,0.75)",
                 highlightstroke: "rgba(220,220,220,1)",
                 data: [65, 59, 80, 81, 56, 55, 40]
             }, {
                 label: "my second dataset",
                 fillcolor: "rgba(151,187,205,0.5)",
                 strokecolor: "rgba(151,187,205,0.8)",
                 highlightfill: "rgba(151,187,205,0.75)",
                 highlightstroke: "rgba(151,187,205,1)",
                 data: [28, 48, 40, 19, 86, 27, 90]
             }],
         }
     },
     'pie': {
         method: 'pie',
         data: [{
             value: 300,
             color: "#f7464a",
             highlight: "#ff5a5e",
             label: "red"
         }, {
             value: 50,
             color: "#46bfbd",
             highlight: "#5ad3d1",
             label: "green"
         }, {
             value: 100,
             color: "#fdb45c",
             highlight: "#ffc870",
             label: "yellow"
         }]
     }
 };

var currentchart;

 function updatechart() {
     if(currentchart){currentchart.destroy();}
   
     var determinechart = $("#charttype").val();

     var params = datamap[determinechart]
     currentchart = new chart(ctx)[params.method](params.data, {});
 }

 $('#charttype').on('change', updatechart)
 updatechart();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.js'></script>
<canvas id="mychart"></canvas>
<select id="charttype">
    <option value="line">line</option>
    <option value="pie">pie</option>
</select>


Related Query

More Query from same tag