Afficher un graphique en passant par ajax

**splifferwolf** · 16/01/2018, 10h45

Bonjour à tous,

Je viens vers vous pour des informations.

Voici le contexte :
Je développe un intranet pour l'entreprise, Pour naviguer on passe toujours par index.php auquel on indique une page exemple : index.php?page=Rapport, le module Rapport est charger en ajax, jusque là aucun soucis, mes module s'affiche correctement.

Mon module Rapport devrait afficher des graphiques. j'ai essayer différente chose mais qui ne fonctionne pas, je charge bien la librairie google jsapi avec une apikey via la structure HTML de base, aucune erreur.
Mais puisque le fichier sensé afficher le graphique est appeler en ajax je n'arrive pas à afficher un simple graphique, en effet tous les code que j'ai pu rencontré dans mes divers recherche me demande d'insérer le code entre les balise <head> </head>, sauf que j'affiche un contenu HTML en ajax.

Donc ma question est la suivante (si vous avez un exemple concret je suis preneur), comment afficher un graphique depuis un fichier appeler en ajax qui ne contient pas de head ni de body, juste un contenu HTML et pouvant contenir du JS.

Pourriez-vous me conseiller une méthode pour afficher un graphique via un fichier qui retourne du HTML sans head et body et appeler en ajax ?
Mon objectif étant, via un menu d'afficher un graphique ou un autre, chaque fichier lié au menu est appeler en AJAX

Je ne sais pas si je suis clair dans mes propos donc n’hésitez pas à demander les informations dont vous avez besoin.

En vous remerciant d'avance.
Bien à vous
Spliffer

PS : J'ai essayer plusieurs librairie mais sans succès, aucune erreur de console mais aucuns graphique afficher non plus donc je ne doit pas m'y prendre comme il faut, je repart donc de zéro.
PS2 : Peut-être devrais-je dire, comment afficher un graphique appeler en ajax alors que la page est déjà chargée ?

**NoSmoking** · 16/01/2018, 15h20

Bonjour,

le module Rapport est charger en ajax

• Où atterrie t-il dans ta page, une <div> une <iframe>, dans le premier cas il te faut exécuter le code javascript une fois chargé.
• Quel type de graphique est ce ?
• Utilises tu jQuery ?

**splifferwolf** · 16/01/2018, 16h08

Bonjour et merci pour votre réponse,

En éffet la page rapport atterri dans un div dont l'id est "content_ajax"
J'utilise du jquery et $.POST pour le chargement des fichier ajax

J'ai essayer l'api google chart, mais je n'arrive pas à afficher un graphique de type line, bar, camembert qui sont les 3 types de graphique que j'ai besoin pour mes différent rapport.
j'ai penser à un iframe et en effet là pas de soucis mais selon mes recherche il n'est pas possible d'exporter une iframe dans un pdf et j'ai essayer une impression en pdf et éffectivement le graphique ne s'y trouve pas c'est une zone blanche.

Voici la fonction générique qui me permet de charger une page ajax

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
 
/**
     * @function : XhrLoad
     * @var : cible (str) => Elément dans lequel écrire le résulta
     * @var : epage (str) => Page à chargé
     * @var : action (str) => case à chargé 
     * @var : param (json) => Paramètre à passer au fichier
     * @var : callback (function) => fonction à exécuter une fois le chergement réussi (optionnel)
    **/
    function XhrLoad(cible,epage,action,param,callback){
        // On crée un message de chargement
        if(action == 'load'){
            $(cible).html('<div class="page-header" style="margin-top:10px;margin-left:1%;width:98%;">Chargement en cours...</div>');
        }
        // On fusionne les paramètres standard avec ceux passer en argument de la fonction
        dataPrm = $.extend({'page' : "Channels", 'epage' : epage, 'action' : action },param);
        $.ajax({ type: 'post', 
                 url : "ajax.php", 
                data : dataPrm,
                async: true,
              success: function(ret){ 
                  $(cible).html(ret); 
                  if(typeof callback === "function"){ callback(); } 
              }
        });
    }

Si je suis votre raisonnement je devrait pour chaque appel à un rapport, créer une fonction pour le callback qui va permettre d'afficher un graphique ?
J'aimerai du coup éviter une multitude fonction toute casi identique hormis les données et le type de graphique

du genre :

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
 
function graphLine(data){
   ...
}
function graphPie(data){
   ...
}
function graphBar(data){
   ...
}
function graphGoogle(type,data){
    if(type == "line"){ graphLine(data); }
    else if(type == "pie"){ graphPie(data); }
    else{ graphBar(data); }
}

Je vais tenter et reviens vers vous pour la suite

Bien à vous
Spliffer

**splifferwolf** · 16/01/2018, 17h05

Re bonjour,

Merci NoSmoking, en effet; en chargeant la fonction en callback le graphique s'affiche correctement.

Exemple pour le graphique ligne :

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
 
function graphLine(data){
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
 
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
        ]);
 
        var options = {
            title: 'Company Performance',
            curveType: 'function',
                legend: { position: 'bottom' }
            };
 
         var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 
         chart.draw(data, options);
     }
}

Maintenant il ne me reste plus qu'a trouver le moyen d'aller chercher les data via une requête AJAX pour récupérer les données de ma base de données, mon problème est plus sur la structure du retour de fichier.

Une fois ce problème résolu, je pourrait développer ma petite classe perso pour mes différentes données devant générées un graphique.

Encore merci à vous, je clôture le sujet, car mon dernier problème est indépendant de celui-ci.

Bien à vous
Spliffer

Afficher un graphique en passant par ajax

AJAX

Discussions similaires

Partager

Partager