how to implement bar chart that shows every value in x axis?-CodePudding

create updateBarChart(selectedDimension) function then

how to Create a bar chart that displays one of the numerical dimensions associated with each World Cup:

Average Attendance
Number of Goals
Number of Games
Number of Participants

Implement the bar chart such that it displays the dimension specified in the selectedDimension parameter.

then the bar-chart updates the data it shows depending on the selection of the drop-down box.

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</head>

<body>

    <header>
        
        <h1>Exploring FIFA World Cup Statistics</h1>
    </header>

    <div id="bar-chart" class="view">
        <h2 class="">Bar Chart</h2>
        <div id="plot-selector">
            <label>Plot:</label>
            <select id="dataset" onchange="chooseData()">
                <option selected value="attendance">Attendance</option>
                <option value="teams">Teams</option>
                <option value="matches">Matches</option>
                <option value="goals">Goals</option>
            </select>
        </div>
    </div>

    <div id="container" style="width:100%;max-width:900px;"></div>

    <script>
      window.onload = function () {

    var chart = new CanvasJS.Chart("container", {
        animationEnabled: true,
        theme: "light1",
        title: {
            text: ""
        },
        
        axisY: {
            title: "Attendance"
        },
        data: [{
            type: "column",
            showInLegend: true,
            legendMarkerColor: "grey",
            legendText: "Years",
            dataPoints: [
                { y: 32808, label: "1930" },
                { y: 21352, label: "1934" },
                { y: 20872, label: "1938" },
                { y: 47511, label: "1950" },
                { y: 29561, label: "1954" },
                { y: 23423, label: "1958" },
                { y: 27911, label: "1962" },
                { y: 48847, label: "1966" },
                { y: 50124, label: "1970" },
                { y: 49098, label: "1974" },
                { y: 40678, label: "1978" },
                { y: 40571, label: "1982" },
                { y: 46039, label: "1986" },
                { y: 48388, label: "1990" },
                { y: 68991, label: "1994" },
                { y: 43517, label: "1998" },
                { y: 42268, label: "2002" },
                { y: 52491, label: "2006" },
                { y: 49669, label: "2010" },
                { y: 52918, label: "2014" } 
            ]
        }]
    });
    chart.render();

}

    </script>
</body>

CodePudding user response：

Make your chooseData() function do something like this:

if select value is attendance
  var chart = new CanvasJS.Chart("container", {options_and_data_for_attendance});
else if select value is teams
  var chart = new CanvasJS.Chart("container", {options_and_data_for_teams});
else if select value is matches
  var chart = new CanvasJS.Chart("container", {options_and_data_for_matches});
else // select value is goals
  var chart = new CanvasJS.Chart("container", {options_and_data_for_goals});
chart.render();

CodePudding user response：

One of the ways, as described above is to change your ChooseData() function to switch between the charts, with the respective dropdowns.

Another way could be to add all the datasets into different Js arrays, and with different dropdowns, push the appropriate array into the datapoints object, hence effectively switching between the arrays, keeping one single chart.