Remplacer un graphe par un autre (select +option) sur le même div

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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 :weird:

Pièce jointe 576088

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

Code:

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 :D

Bonjour,

Apparemment il faut détruire l'ancien Chart avant d'afficher le nouveau, car à chaque fois tu modifies le type, un nouveau Chart s'ajoute sur l'ancien.

Comme je ne sais pas les valeurs des variables php <?=$label?> et <?=$count?>, je les ai remplacé par des tableaux (soit disant récupérés en php...)

Ton code devrait ressembler à ça :

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8" />
	<title>Chart Js</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 
	<script>
                 'use strict';
                 var labels=<?php echo json_encode([1,2,3,4,5,6]);?>
                 ,count=<?php echo json_encode([10,20,30,40,50]);?>;
                 
                console.log(labels,count);
                function showGraph(id, type, labels, label, data, text) {
                                   return new Chart($('#'+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
                                                        }
                                                }
                                        });
                                }
                        
                $(function() {
                                   
                                var myChart= showGraph("chart", "line", labels, "NBR PI", count, "Etat des lieux des titres de propriétés intellectuelles");
                               $('select').change(function() {
                                        myChart.destroy();//détruire l'ancien Chart
                                        let dataChart = $(this)
                                        .find('option:selected').data('class'); 
                                        console.log(dataChart);
                                        myChart=showGraph("chart", dataChart
                                                , labels
                                                ,"NBR PI"
                                                , count
                                                , "Etat des lieux des titres de propriétés intellectuelles"
                                        );
                           });
                });
        </script>
</head>
<body>
	<div class="col-md-4">
		<select class="form-control mb-5">
			<option data-class="line" selected>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>
</body>
</html>

1 pièce(s) jointe(s)

Où sont passer les switch case option :mrgreen:

Merci beaucoup Toufik83 , un code bien optimisé et fonctionne parfaitement :plusser:

pourriez-vous me conseiller sur la meilleure façon (méthode) à suivre pour rendre le code générique
,sachant par exemple que je souhaite afficher plusieurs divs qui auront cette option (changement de graphe)

J' ai pensé, en rendant le code sous forme d'une fonction en passant des paramètres (defaultChart = "line" //c'est le premier graph affiché)

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
    <script>
        'use strict';
 
 
        console.log(labels, count);
 
        function showGraph(id, type, labels, label, data, text) {
            return new Chart($('#' + 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
                    }
                }
            });
        }
 
        /**
         * @param {string} idChart      - L'ID du graphe à afficher.
         * @param {string} idSelect     - L'ID de <select></select> associé au graphe - .
         * @param {array} labels        - Les données récupérées en format JSON.
         * @param {int} count           - Le Nbr totale de chaque donnée récupérée $count.
         * @param {string} text         - Étiquette .
         * @param {string} defaultChart -Le type de premier graphe affichéé.
         */
        function displayChart(idChart, idSelect, labels, count, label, text, defaultChart = "line") {
            var myChart = showGraph(idChart, defaultChart, labels, label, count, text);
            $("#" + idSelect).change(function() {
                myChart.destroy(); //détruire l'ancien Chart
                let dataChart = $(this)
                    .find('option:selected').data('class');
                console.log(dataChart);
                myChart = showGraph(idChart, dataChart, labels, label, count, text);
            });
        }
 
 
 
        //Chart 1
        var labels = <?= $label ?>,
            count = <?= $count ?>;
        $(function() {
 
            displayChart("chart", "select1", labels, count, "NBR PI", "Etat des lieux des titres de propriétés intellectuelles")
        });
 
        //Chart 2
        var labels2 = <?php echo json_encode([1, 2, 3, 4, 5, 6]); ?>,
            count2 = <?php echo json_encode([10, 20, 30, 40, 50]); ?>;
        $(function() {
 
            displayChart("chart2", "select2", labels2, count2, "Label 2", "example de titre", "pie")
        });
    </script>

Code:

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
 
 
        <div class="row">
 
 
            <!--Chart 1-->
            <div class="col-md-5">
                <select class="form-control mb-5" id="select1">
                    <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>
 
            <!--Chart 2-->
            <div class="col-md-5 ">
                <select class="form-control mb-5" id="select2">
                    <option data-class="pie">Pie</option>
                    <option data-class="line">Line</option>
                    <option data-class="doughnut">doughnut</option>
                    <option data-class="horizontalBar">horizontalBar</option>
                </select>
                <canvas id="chart2"></canvas>
            </div>
 
            <div class="col-md-5">
                <canvas id="chart3"></canvas>
            </div>
 
            <div class="col-md-5">
                <canvas id="chart4"></canvas>
            </div>
        </div>

pour les données oui ç'est vrai je l'ai recuperé en format Json, comme vous l'avez fait, Merci (j'ai ajouté le code)

Pièce jointe 576138

Merci

Bonjour,

Pour le switch elle n'est pas vraiment utile car d'après ce que je vois, il n'y a que le "type" qui change.

Pour gérer plusieurs Chart sur la même page, il va falloir stocker chaque instance dans un tableau, puis lorsque tu modifies la valeur d'un <select> tu supprimes son instance du tableau en fonction de l'index du <select> par rapport à sa class .mb-5.

Un seul $(document).ready() OU $(function(){}) qui doivent apparaître dans ton code js, et pas plusieurs :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 /* Le code que je n'ai pas modifié ici....*/ $(function() { var allCharts=[]; //au chargement de la page, on affiche le Chart dans #chart et #chart2 $("#chart,#chart2").each(function(index){ allCharts[index]=showGraph($(this).attr('id'), "line", labels, "NBR PI", count, "Etat des lieux des titres de propriétés intellectuelles"); }); $('select.mb-5').change(function() { if(allCharts[$(this).index('.mb-5')]) allCharts[$(this).index('.mb-5')].destroy(); let dataChart = $(this).find('option:selected').data('class'); console.log(dataChart); allCharts[$(this).index('.mb-5')]=showGraph($(this).next('canvas').attr('id'), dataChart , labels ,"NBR PI", count , "Etat des lieux des titres de propriétés intellectuelles" ); }); });
Deux nouvelles instructions importantes que tu dois retenir, $(this).index('.mb-5') et $(this).next('canvas').attr('id'), la première renvoie l'index du <select> par rapport à la class .mb-5 et la deuxième récupère le id du <canvas> qui suit le <select>.

Vraiment impeccable :ptdr:

au premier coup d'oeil je n'ai pas compris comment injecter les données récupérer depuis Php (en ajoutant des boucles à gauche,et à droite, mais les résultats :aie:) alors que la solution était devant moi 8O

j'ai opter à cette approche :
1-on récupère les données dans un tableau (ce tableau contient les données de différents charts) AllDataOfCharts []
2- on utilise l'index de l'element (select || chart) comme compteur (indice du tableau)
3 on injecte les donnés dans la fonction showGraph()

une petite amélioration : lors de chargements de la page j'ai definit defaulchart qui affiche le graphe selon l'option sélectionnée (Car il peut être différent de "line" lors de rafraîchissement de la page)

Code:

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
40
41
42
 
    $(function() {
            var labels1 = <?= $label ?>,
                count1 = <?= $count ?>;
 
            var labels2 = <?php echo json_encode([1, 2, 3, 4, 5, 6]); ?>,
                count2 = <?php echo json_encode([10, 20, 30, 40, 50]); ?>;
 
            var dataOfChart1 = [labels1, "label1", count1, "Graphe_Title_1"];
            var dataOfChart2 = [labels2, "label2", count2, "Graphe_Title_2"];
 
            var AllDataOfCharts = [dataOfChart1, dataOfChart2];
 
 
            var allCharts = [];
 
 
            //au chargement de la page, on affiche le Chart dans #chart et #chart2
            $("#chart,#chart2").each(function(index) {
 
                let defaulChart = $(this).prev('select').find('option:selected').data('class'); //le premier graphe à afficher
 
                allCharts[index] = showGraph($(this).attr('id'),defaulChart , AllDataOfCharts[index][0], AllDataOfCharts[index][1], AllDataOfCharts[index][2], AllDataOfCharts[index][3]);
 
            });
 
 
 
 
            $('select.mb-5').change(function() {
 
                let index = $(this).index('.mb-5');
                let dataChart = $(this).find('option:selected').data('class');
 
                if (allCharts[index]) allCharts[index].destroy();
                console.log(dataChart);
 
                allCharts[$(this).index('.mb-5')] = showGraph($(this).next('canvas').attr('id'), dataChart, AllDataOfCharts[index][0], AllDataOfCharts[index][1], AllDataOfCharts[index][2], AllDataOfCharts[index][3]);
            });
 
 
        });

y a-t-il des conseille ou améliorations qui peuvent être ajoutées ?

Merci,et j'apprécie beaucoup votre aide

30/07/2020, 00h38
Toufik83

Bonjour,

Maintenant je peux dire que le code est propre et optimisé, tu gères bien les indexes.

Il faut seulement utiliser attr("data-class") au lieu de data("class"), car les 2 fonctions sont différentes, (je sais que ça fonctionne avec data() mais heureusement que tu n'attribues pas un $.data(), sinon tu auras un faux retour).

Résolu

Merci encore, Mr. Toufik, et à tous ceux qui essaient d'aider dans ce merveilleux forum "developpez.com"

le code final en changeant attr() au lieu data()

Code:

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
 
 
        <div class="row">
 
 
            <!--Chart 1-->
            <div class="col-md-5">
 
                <select class="form-control mb-5 select-graphe">
                    <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-1"></canvas>
            </div>
 
            <!--Chart 2-->
            <div class="col-md-5 ">
                <select class="form-control mb-5  select-graphe">
                    <option data-class="pie">Pie</option>
                    <option data-class="line">Line</option>
                    <option data-class="doughnut">doughnut</option>
                    <option data-class="horizontalBar">horizontalBar</option>
                </select>
                <canvas id="chart-2"></canvas>
            </div>
 
 
        </div>

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
  <script>
        function showGraph(id, type, labels, label, data, text) {
            return new Chart($('#' + id), {
                type: type,
 
                data: {
 
                    labels: labels,
                    datasets: [{
                        label: label,
                        backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9"],
                        data: data
                    }]
 
                },
 
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: text
                    }
                }
            });
        }
 
 
        $(function() {
          /*  var labels1 = <?= $label ?>,
                count1 = <?= $count ?>;*/
 
            var labels1 = <?php echo json_encode([1, 2, 3, 4, 5, 6]); ?>,
                count1 = <?php echo json_encode([25, 35, 40, 10, 70,5]); ?>;
 
            var labels2 = <?php echo json_encode([1, 2, 3, 4, 5, 6]); ?>,
                count2 = <?php echo json_encode([10, 20, 30, 40, 50,60]); ?>;
 
            var dataOfChart1 = [labels1, "label1", count1, "Graphe_Title_1"];
            var dataOfChart2 = [labels2, "label2", count2, "Graphe_Title_2"];
 
            var AllDataOfCharts = [dataOfChart1, dataOfChart2];
 
 
            var allCharts = [];
 
 
            //au chargement de la page, on affiche le Chart dans #chart et #chart2
            $("#chart-1,#chart-2").each(function(index) {
 
                let defaulChart = $(this).prev('select').find('option:selected').attr("data-class"); //le premier graphe à afficher
 
                allCharts[index] = showGraph($(this).attr('id'), defaulChart, AllDataOfCharts[index][0], AllDataOfCharts[index][1], AllDataOfCharts[index][2], AllDataOfCharts[index][3]);
 
            });
 
 
 
 
            $('select.select-graphe').change(function() {
 
                let index = $(this).index('.select-graphe');
                let dataChart = $(this).find('option:selected').attr("data-class");
 
                if (allCharts[index]) allCharts[index].destroy();
                console.log(dataChart);
 
                allCharts[$(this).index('.select-graphe')] = showGraph($(this).next('canvas').attr('id'), dataChart, AllDataOfCharts[index][0], AllDataOfCharts[index][1], AllDataOfCharts[index][2], AllDataOfCharts[index][3]);
            });
 
 
        });
    </script>

un lien intéressant, je l'ai consulté maintenant pour Comprendre la différence entre les deux fonctions [ data() vs attr() ]
https://blog.smarchal.com/jquery-data-vs-attr

:resolu:

Salut,

Tu peux aussi utiliser l'opérateur de décomposition pour réduire encore plus le code et d'une façon magique 8-).

Tu n'as qu'à remplacer les 4 derniers paramètres de showGraph() par : ...AllDataOfCharts[index] qui est représenté par la variable (...all) lors de la construction.

Code:

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
 
//déclaration de showGraph avec l'opérateur de décomposition (...):
function showGraph(id, type,...all) {
         return new Chart($('#' + id), {
                type: type,
                data: {
 
                    labels: all[0],
                    datasets: [{
                        label: all[1],
                        backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9"],
                        data: all[2]
                    }]
 
                },
 
                options: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: all[3]
                    }
                }
            });
}
//utilisation de la fonction :
allCharts[index] = showGraph($(this).attr('id'), defaulChart,...AllDataOfCharts[index]);
// et 
allCharts[$(this).index('.select-graphe')] = showGraph($(this).next('canvas').attr('id'), dataChart,...AllDataOfCharts[index]);

31/07/2020, 14h26
younes2727

Un coup de génie :king: , on voit qu'on approche bien de l'intelligence artificielle :mrgreen: ,

j'essaie de compliquer le scénario un peu en ajoutant un autre sélect qui permet de changer les données, donc on aura un qui change le type et le deuxième qui change les données selon le choix , je suis en train tester :pc:(ajax ajax :aie:) , Peut-être je reviendrai sur le forum si je n'arrive pas:whistle:

Merci