IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

plugin jqPlot. Je cherche à sauvegarder les graphiques générés


Sujet :

jQuery

  1. #1
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut plugin jqPlot. Je cherche à sauvegarder les graphiques générés
    Salut,

    Je cherche à sauvegarder les graphs générés avec JQPLOT.

    Malheureusement pour moi ce n'est pas des plus simple.
    J'étais partit sur l'utilisation de Canvas2Image mais il semblerait que les Graphs soit des Canvas dans les Canvas etc... ce qui n'est pas pris en charge par Canvas2Image.

    J'ai bien trouvé cette bête :

    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
    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
     
     function convertPlotToImage(plot)
     {
            var parentSelector = plot.targetId;
            var titleDiv = $(parentSelector).children('.jqplot-title').get(0);
            var baseCanvas = $(parentSelector).children('.jqplot-base- canvas').get(0);
            var orig = $(baseCanvas).offset();
            var maxX = 0;
            var maxY = 0;
            var titleText = plot.title.text;
            var titleRenderer = new $.jqplot.CanvasTextRenderer({fontSize: '1.1em'});
     
            var textCanvas = document.createElement('canvas');
            var textContext = textCanvas.getContext('2d');
            titleRenderer.setText(titleText,textContext);
        var textWidth = titleRenderer.getWidth(textContext);
        var textHeight = titleRenderer.getHeight(textContext);
     
            textContext = null;
            textCanvas = null;
     
            $(parentSelector).find("canvas").each(function(i,elem)
            {
                    var p = $(elem).offset();
                    if(maxX < (p.left+elem.width)) maxX = p.left+elem.width;
                    if(maxY < (p.top+elem.height)) maxY = p.top+elem.height;
            });
     
            maxX -= orig.left;
            maxY -= orig.top;
     
            if(maxX < textWidth) maxX = textWidth;
     
            var imgCanvas = document.createElement('canvas');
            imgCanvas.background = 'white';
            imgCanvas.width = maxX;
            imgCanvas.height = maxY;
            var imgContext = imgCanvas.getContext('2d');
     
            titleRenderer.setText(titleText,imgContext);
            titleRenderer.draw(imgContext,titleText);
     
            imgContext.drawImage(baseCanvas,0,0);
     
            $(parentSelector).find("canvas").each(function(i,elem)
            {
                    if(elem!=baseCanvas)
                    {
                            var w = elem.width;
                            var h = elem.height;
                            var p = $(elem).offset();
     
                            imgContext.drawImage(elem,p.left-orig.left, p.top-orig.top);
                    }
            });
     
            var oImg = Canvas2Image.saveAsPNG(imgCanvas, true);
     
            if (!oImg)
            {
                    alert("Sorry, this browser is not capable of saving " + png + " files!");
                    return false;
            }
     
            oImg.id = 'canvasimage';
     
            $(parentSelector).empty();
            $(parentSelector).prepend(oImg);
     
            imageContext = null;
            imageCanvas = null;
     }
    Mais ça ne fonctionne pas non plus...

    Auriez vous une idée de comment si prendre ?

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Je n'ai pas la solution, mais avec Firefox 3.6, on peut sauvegarder n'importe quel canvas en image PNG d'un simple clic droit sur le canvas.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut
    Malheureusement je travaille dans une société ou FF n'a pas le droit de faire ces preuves.

    Donc je travaille sur IE et en plus le pire... IE6

    Enfin sur mon banc de test j'ai FF et même le click droit sauvegardé image ne fonctionne pas. Certainement pour la raison évoqué "Canvas dans Canvas etc.."

    Je collerais la prochaine fois une extraction HTML provenant de FireBug pour montrer l'aspect de la chose.

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour

    Du "canvas" sous IE ? IE6 ! Vous utilisez l'ancien excanvas.js ou le nouveau explorercanvas.js ?

    VML : http://msdn.microsoft.com/en-us/library/bb263898.aspx

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut
    Bonsoir,

    J'utilise ce qui est recommandé par JqPlot c'est à dire excanvas.js.
    Mais je vais jeter un oeil sur explorercanvas.js

    Merci

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    En fait, c'est le même fichier de 2006 sous deux noms différents !

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut
    Voilà la tête d'une division remplie par Jqplot

    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
     
    <div id=cible>
    <canvas class="jqplot-base-canvas" style="position: absolute; left: 0px; top: 0px;" height="500" width="825"></canvas>
    <div class="jqplot-title" style="height: 0px; width: 0px;"></div>
    <div class="jqplot-axis jqplot-xaxis" style="position: absolute; width: 825px; height: 19px; left: 0px; bottom: 0px;">
    <div style="position: absolute; left: -7px;" class="jqplot-xaxis-tick">29 Sep 2010</div>
    <div style="position: absolute; left: 258.333px;" class="jqplot-xaxis-tick">10 Oct 2010</div>
    <div style="position: absolute; left: 523.667px;" class="jqplot-xaxis-tick">21 Oct 2010</div>
    <div style="position: absolute; left: 791.5px;" class="jqplot-xaxis-tick">1 Nov 2010</div>
    </div>
    <div class="jqplot-axis jqplot-yaxis" style="position: absolute; height: 500px; width: 9px; left: 0px; top: 0px;">
    <div style="position: absolute; white-space: nowrap; top: 461.5px;" class="jqplot-yaxis-tick">-1</div>
    <div style="position: absolute; top: 369.3px;" class="jqplot-yaxis-tick">0</div>
    <div style="position: absolute; white-space: nowrap; top: 277.1px;" class="jqplot-yaxis-tick">1</div>
    <div style="position: absolute; white-space: nowrap; top: 184.9px;" class="jqplot-yaxis-tick">2</div>
    <div style="position: absolute; white-space: nowrap; top: 92.7px;" class="jqplot-yaxis-tick">3</div>
    <div style="position: absolute; white-space: nowrap; top: 0.5px;" class="jqplot-yaxis-tick">4</div>
    </div>
    <canvas style="position: absolute; left: 0px; top: 0px;" class="jqplot-grid-canvas" height="500" width="825"></canvas>
    <canvas class="jqplot-series-shadowCanvas" style="position: absolute; left: 19px; top: 10px;" height="461" width="796"></canvas>
    <canvas class="jqplot-series-canvas" style="position: absolute; left: 19px; top: 10px;" height="461" width="796"></canvas>
    <table class="jqplot-table-legend" style="position: absolute; right: 10px; top: 10px;">
    <tbody>
    <tr class="jqplot-table-legend">
    <td class="jqplot-table-legend" style="text-align: center; padding-top: 0pt;">
    <div>
    <div class="jqplot-table-legend-swatch" style="background-color: rgb(75, 178, 197); border-color: rgb(75, 178, 197);">
    </div>
    </div>
    </td>
    <td class="jqplot-table-legend" style="padding-top: 0pt;">Iphone (Appel)</td>
    </tr>
    </tbody>
    </table>
    <canvas class="jqplot-highlight-canvas" style="position: absolute; left: 19px; top: 10px;" height="461" width="796"></canvas>
    <div class="jqplot-highlighter-tooltip" style="position: absolute; left: 280.105px; top: 347.967px; display: none;">10 Oct 2010, 0</div>
    <div class="jqplot-cursor-tooltip" style="position: absolute; display: none;"></div>
    <canvas class="jqplot-zoom-canvas" style="position: absolute; left: 19px; top: 10px;" height="461" width="796"></canvas>
    <canvas class="jqplot-event-canvas" style="position: absolute; left: 19px; top: 10px;" height="461" width="796"></canvas>
    </div>
    Pas évident d'extraire le CANVAS dans ces conditions là

  8. #8
    Invité de passage
    Profil pro
    Inscrit en
    Octobre 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 1
    Par défaut
    Bonjour,

    J'ai le même problème...

    Avez-vous trouvé une solution ?

Discussions similaires

  1. Réponses: 4
    Dernier message: 22/07/2012, 22h16
  2. Réponses: 7
    Dernier message: 08/06/2011, 14h14
  3. [FPDF] Sauvegarder les pdfs générés dans un répértoire
    Par houdazcom dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 12/08/2009, 18h16
  4. Led : affichage des graphiques dans les pdf générés
    Par jyloup dans le forum Tableaux - Graphiques - Images - Flottants
    Réponses: 19
    Dernier message: 03/05/2009, 23h29
  5. [Continuum] Afficher les rapports générés par les plugins maven
    Par dferot dans le forum Intégration Continue
    Réponses: 4
    Dernier message: 14/11/2007, 16h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo