Chartjs-Trying to display different types of charts using select/option tag

by

1👍

✅

Following my comment:

1- Hide the previously shown chart

In order to do that, you have two things to do: find what chart is currently being displayed, and hide it.

Let’s first add two classes: hidden-chart and active-chart and their CSS:

.hidden-chart { display: none !important; }
.active-chart { display: inherit !important; }

And edit the HTML accordingly:

<canvas id="lineChart" class="hidden-chart"></canvas>
<canvas id="barChart" class="hidden-chart"></canvas>
<canvas id="pieChart" class="hidden-chart"></canvas>
<canvas id="radarChart" class="hidden-chart"></canvas>

Okay, so now you can have two types of charts: hidden charts with the hidden-chart class and the currently being displayed chart with active-chart class.

In order to achieve 1), you’d now have to add the following code to your function: 

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;
    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
    }
}

2- A switch case on the selected option’s text:

Well that is a quite trivial switch, on the HTMLElement.text variable:

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;

    const selectedOption = chartType.options[i]; // The option the user has clicked on
    let toEnableChart;
    switch (selectedOption.text) {
        case 'Population':
            toEnableChart = lineChart;
            break;

        case 'Precipitation':
            toEnableChart = barChart;
            break;

        case 'Ethnicity':
            toEnableChart = pieChart;
            break;

        case 'Activity':
            toEnableChart = radarChart;
            break;
    }

    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
    }
}

You could replace the switch with a standard if else if else if else construct.

3- Enable the new chart

Now that we know what chart to display (toEnableChart variable, thanks to the switch ; and we know how to display it – remember our hidden-chart and active-chart classes?), it’s time to display it!

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;

    const selectedOption = chartType.options[i]; // The option the user has clicked on
    let toEnableChart;
    switch (selectedOption.text) {
        case 'Population':
            toEnableChart = lineChart;
            break;

        case 'Precipitation':
            toEnableChart = barChart;
            break;

        case 'Ethnicity':
            toEnableChart = pieChart;
            break;

        case 'Activity':
            toEnableChart = radarChart;
            break;
    }


    if (toEnableChart) {
        toEnableChart.classList.remove("hidden-chart");
        toEnableChart.classList.add("active-chart");
    }

As you may notice, displaying the new chart is step #1, but backwards.

Feel free to comment if something is unclear.

Leave a comment