Chart.js jQuery dropdown selected values

问题

Hello :) (I'm novice and I learn on the job),

I work with Chart.js, jQuery, PostgreSQL

Currently I have a bar chart directly linked to PostgreSQL database.

I'd like to add a dropdown to allow the user to select a "zone", which would dynamically update the chart.

Each "zone" has different variables: population, salaries (number of employees in english), etc.

Here is the PHP

<?php

$dbconn = pg_connect("")
or die('Erreur de connexion'.pg_last_error());

$query = "SELECT id, zone_nom, zone_pop, zone_salaries FROM table";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());

$array = array();
while ($row = pg_fetch_array($result, null, PGSQL_ASSOC)) {
    $array[] = $row;
}

$data=json_encode($array);
echo $data;

pg_free_result($result);

pg_close($dbconn);

?>

I get the following array

[{"id":"1","zone_nom":"test ","zone_pop":"36105","zone_salaries":"15279"},{...],{...}]

Then I generate a dropdown dynamically populated by my table

But I'm stuck on how to pass the selected values in the chart (and then make sure the chart gets refreshed depending on the choice in the dropdown)

<html>
<head>
    <title>Liste déroulante dynamique</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v1.0.3/leaflet-src.js"></script>
    <script type="text/javascript">
        function Zone() {
            $('#zone-select').empty();
            $('#zone-select').append("<option>Chargement</option>");
            $.ajax({
                type: "POST",
                url: "http://localhost/data.php",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data){
                    $('#zone-select').empty();
                    $('#zone-select').append("<option value='0'>-- Select zone --</option>");
                    $.each(data,function(i, item){
                        $('#zone-select').append('<option value='+data[i].zone_pop+'>'+data[i].zone_nom+'</option>');
                    });

                    $("#zone-select").change(function(){
                        var value = $("#zone-select option:selected").val(); // Value of selected option
                        console.log('Value: '+value);
                    });

            // How to link the dropdown and the chart ?        

            var zoneNom = [];
            var zonePop = [];
            for(var i in data) {
                zoneNom.push(data[i].zone_nom);
                zonePop.push(data[i].zone_pop);
                zoneSalaries.push(data[i].zone_salaries)
            }
            var chartdata = {
                labels: zoneNom,
                datasets : [
                    {
                        label: 'Population',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: zonePop
                    },
                    {
                        label: 'Salaries',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: zoneSalaries
                    }
                ]
            };

            var option = {};
            var ctx = $("#mycanvas");
            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata,
                options: option
            });
                    var myBarChart;

                },
                complete: function(){
                }
            });
        }
        $(document).ready(function(){
            Zone();
        });  

    </script>
</head>
<body>
    <select id="zone-select"></select>
    <div id="chart-container">
            <canvas id="mycanvas"></canvas>
    </div>
</body>
</html>

The value of the choice is returned

$("#zone-select").change(function(){
   var value = $("#zone-select option:selected").val(); // Value of selected option
   console.log('Value: '+value);
});

I am looking for but I can not find the solution for now (probably not very complicated)

Thank you in advance for your help

回答1:

You could accomplish this using the following on change event handler function for your dropdown menu ...

$("#zone-select").change(function() {
   var nom = $("#zone-select option:selected").text(); // name of selected option
   var index = zoneNom.indexOf(nom);
   var new_labels = [zoneNom[index]];
   var new_data1 = [zonePop[index]];
   var new_data2 = [zoneSalaries[index]];
   barGraph.data.labels = new_labels;
   barGraph.data.datasets[0].data = new_data1;
   barGraph.data.datasets[1].data = new_data2;
   barGraph.update(); // update chart
});

and, if you wish to select the first option by default, use ...

$("#zone-select").val(zonePop[0]).trigger('change');

working example

function Zone() {
   $('#zone-select').empty();
   $('#zone-select').append("<option>Chargement</option>");
   $.ajax({
      type: "GET",
      url: "https://istack.000webhostapp.com/json/t9.json",
      dataType: "json",
      success: function(data) {
         //console.log(data)
         $('#zone-select').empty();
         $('#zone-select').append("<option value='0'>-- Select zone --</option>");
         $.each(data, function(i, item) {
            $('#zone-select').append('<option value=' + data[i].zone_pop + '>' + data[i].zone_nom + '</option>');
         });

         $("#zone-select").change(function() {
            var nom = $("#zone-select option:selected").text(); // name of selected option
            var index = zoneNom.indexOf(nom);
            var new_labels = [zoneNom[index]];
            var new_data1 = [zonePop[index]];
            var new_data2 = [zoneSalaries[index]];
            barGraph.data.labels = new_labels;
            barGraph.data.datasets[0].data = new_data1;
            barGraph.data.datasets[1].data = new_data2;
            barGraph.update(); // update chart
         });

         var zoneNom = [];
         var zonePop = [];
         var zoneSalaries = [];
         for (var i in data) {
            zoneNom.push(data[i].zone_nom);
            zonePop.push(data[i].zone_pop);
            zoneSalaries.push(data[i].zone_salaries)
         }
         var chartdata = {
            labels: zoneNom,
            datasets: [{
               label: 'Population',
               backgroundColor: 'rgba(200, 200, 200, 0.75)',
               borderColor: 'rgba(200, 200, 200, 0.75)',
               hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
               hoverBorderColor: 'rgba(200, 200, 200, 1)',
               data: zonePop
            }, {
               label: 'Salaries',
               backgroundColor: 'rgba(200, 200, 200, 0.75)',
               borderColor: 'rgba(200, 200, 200, 0.75)',
               hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
               hoverBorderColor: 'rgba(200, 200, 200, 1)',
               data: zoneSalaries
            }]
         };

         var option = {
            scales: {
               yAxes: [{
                  ticks: {
                     beginAtZero: true
                  }
               }]
            }
         };
         var ctx = $("#mycanvas");
         var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata,
            options: option
         });
         var myBarChart;

         $("#zone-select").val(zonePop[0]).trigger('change'); // select first option

      },
      complete: function() {}
   });
}
$(document).ready(function() {
   Zone();
});

<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/2.6.0/Chart.min.js"></script>
<select id="zone-select"></select>
<div id="chart-container">
   <canvas id="mycanvas"></canvas>
</div>

来源：https://stackoverflow.com/questions/44654008/chart-js-jquery-dropdown-selected-values

标签

php

jquery

postgresql

chart.js

dropdown