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

**younes2727** · 29/07/2020, 00h04

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

Nom : CHRT.gif
Affichages : 147
Taille : 1 006,4 Ko

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

**Toufik83** · 29/07/2020, 03h41

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

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

**younes2727** · 29/07/2020, 15h01

Où sont passer les switch case option

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

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

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
 
 
        <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)

Nom : test.gif
Affichages : 132
Taille : 1,61 Mo

Nom : test.gif
Affichages : 132
Taille : 1,61 Mo

Merci

**Toufik83** · 29/07/2020, 17h21

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 :

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
 
/* 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>.

**younes2727** · 29/07/2020, 22h46

Vraiment impeccable

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

) alors que la solution était devant moi

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 :

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

**Toufik83** · 30/07/2020, 00h38

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).

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager