Discussion :

[younes2727]

Bonsoir
je veux afficher plusieurs chart dans un seul div selon le choix de l'utilisateur;
i.e j'ai un select avec des options, et chaque option va afficher un graphe (dans le même div)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
   <div class="col-md-4">
                <select class="form-control mb-5">
                    <option data-class="line">Line</option>
                    <option data-class="pie">Pie</option>
                    <option data-class="doughnut">doughnut</option>
                    <option data-class="horizontalBar">horizontalBar</option>
                </select>
                <canvas id="chart"></canvas>
            </div>

Le code Jquery

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 $(function() {
            'use strict';
            //  showGraph("chart", "bar", <?= $label ?>, "NBR PI", <?= $count ?>, "Etat des lieux des titres de propriétés intellectuelles");
 
 
            $('select').change(function() {
 
                var $option = $(this).find('option:selected');
                //Added with the EDIT
                var dataChart = $option.data('class'); //to get content of "value" attrib
                console.log(dataChart);
 
 
                switch (dataChart) {
                    case "line":
                        showGraph("chart", "bar", <?= $label ?>, "NBR PI", <?= $count ?>, "Etat des lieux des titres de propriétés intellectuelles");
                        break;
 
                    case "pie":
                        showGraph("chart", "pie", <?= $label ?>, "NBR PI", <?= $count ?>, "Etat des lieux des titres de propriétés intellectuelles");
                        break;
 
                    case "horizontalBar":
                        showGraph("chart", "horizontalBar", <?= $label ?>, "NBR PI", <?= $count ?>, "Etat des lieux des titres de propriétés intellectuelles");
                        break;
 
                    case "doughnut":
                        showGraph("chart", "doughnut", <?= $label ?>, "NBR PI", <?= $count ?>, "Etat des lieux des titres de propriétés intellectuelles");
                        break;
                    default:
                        showGraph("chart", "bar", <?= $label ?>, "NBR PI", <?= $count ?>, "Etat des lieux des titres de propriétés intellectuelles");
 
                }
 
 
 
 
            });
        });

la fonction showGraph

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function showGraph(id, type, labels, label, data, text) {
            new Chart(document.getElementById(id), {
                type: type,
 
                data: {
 
                    labels: labels,
                    datasets: [{
                        label: label,
                        backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                        data: data
                    }]
 
                },
 
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: text
                    }
                }
            });
        }

Je suis arrivé à changer le graphe , mais quand je passe le curseur de la souris sur le div , le graphe change automatiquement
, il revient au premier affichage , genre une perturbation





le code Php pour bien éclaircir d'où vient les donnes de graphe

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
 <?php
 
        function jsonDATA()
        {
            $label = array();
            $count = array();
 
            $result = getDB()->prepare($query);
            $result->execute();
            $data =  $result->fetchAll();
 
            foreach ($data as $row) {
 
                array_push($label, $row[0]);
                array_push($count, $row[1]);
            }
            $label = json_encode($label, true);
            $count = json_encode($count, true);
            return [$label, $count];
        }
 
        [$label, $count] = jsonDATA();
 
        ?>

Merci