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

APIs Google Discussion :

[Google Charts] ComboChart, area, stacked et line


Sujet :

APIs Google

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Août 2002
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2002
    Messages : 18
    Points : 16
    Points
    16
    Par défaut [Google Charts] ComboChart, area, stacked et line
    Bonjour,

    J'essaie d'utiliser l'api Google Charts sur un site Intranet en ce moment et j'ai un problème.

    Je souhaite afficher un graphique avec une nombre, qui est situé dans une zone (Zone 1, Zone 2, Zone 3)
    Pour faire cela, j'utilise un ComboChart (https://developers.google.com/chart/...ery/combochart) pour combiner 3 zones (Area Charts) et 1 ligne (Line Charts)

    Pour voir mon code : https://jsfiddle.net/yz8e7dex/

    Le problème : je ne comprend pas pourquoi la ligne n'a pas le même axe Y que mes zones. On voit que le 3ème point (nombre 25) est dans la zone entre 10 et 20. Normalement il doit être dans la zone au dessus.

    Y-a-t’il une autre de manière de faire? Ais-je oublié quelque chose?

    Par avance merci, j'espère que d'autres personnes ont déjà eu le même problème :/

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 144
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 144
    Points : 44 954
    Points
    44 954
    Par défaut
    Bonjour,
    ...je ne comprend pas pourquoi la ligne n'a pas le même axe Y que mes zones.
    tu utilises isStacked : true donc tes surfaces s'empile il te suffit de regarder l'axe des Y cumulé.
    Ta ligne est donc bien placée à 25 de la ligne de base.

    Si tu veux la faire « monter » entre la ligne 2 et 3 il te faut mettre la même valeur de hauteur pour toutes tes zones
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var data = google.visualization.arrayToDataTable([
        ['Date', 'Zone 1', 'Zone 2', 'Zone 3', 'Nombre'],
        ['23/01/2016',  10, 10, 10, 11],
        ['24/01/2016',  10, 10, 10, 18],
        ['25/01/2016',  10, 10, 10, 25],
        ['26/01/2016',  10, 10, 10, 5],
        ['27/01/2016',  10, 10, 10, 10],
        ['28/01/2016',  10, 10, 10, 16]
      ]);
    mais est ce que tu cherches à faire ?

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Août 2002
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2002
    Messages : 18
    Points : 16
    Points
    16
    Par défaut
    Bonjour,

    Merci mais je souhaite garder mes différentes zones.
    Par contre, j'ai essayé en retirant le "isStacked" (https://jsfiddle.net/yz8e7dex/).
    Les points sont bien placés dans les bonnes zones. Tout est bon, sauf les couleurs
    Les couleurs de zones ne correspondent pas : au lieu de bleu, orange et jaune, on a un dégradé d'orange...
    Si j'arrive à mettre les bonnes couleurs de fond, j'ai plus de problème, mais j'ai l'impression que les couleurs s'additionnent

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 144
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 144
    Points : 44 954
    Points
    44 954
    Par défaut
    Inverse les valeurs de tes zones
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var data = google.visualization.arrayToDataTable([
        ['Date', 'Zone 1', 'Zone 2', 'Zone 3', 'Nombre'],
        ['23/01/2016',  30, 20, 10, 11],
        ['24/01/2016',  30, 20, 10, 18],
        ['25/01/2016',  30, 20, 10, 25],
        ['26/01/2016',  30, 20, 10, 5],
        ['27/01/2016',  30, 20, 10, 10],
        ['28/01/2016',  30, 20, 10, 16]
      ]);

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Août 2002
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2002
    Messages : 18
    Points : 16
    Points
    16
    Par défaut
    C'est ce qu'on appelle "avoir la tête dans le guidon"

    Merci beaucoup ! Ça fonctionne parfaitement !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Jquery Google Charts [valeurs négatives]
    Par joker69666 dans le forum jQuery
    Réponses: 2
    Dernier message: 25/05/2012, 11h42
  2. [Google Chart] avec gvChart Pie changer Axe ?
    Par splifferwolf dans le forum APIs Google
    Réponses: 4
    Dernier message: 28/02/2012, 19h42
  3. Google Chart dans Interactive Analysis
    Par Riri69 dans le forum Débuter
    Réponses: 0
    Dernier message: 17/06/2011, 16h53
  4. Erreur Python (API Google charts)
    Par Invité dans le forum Général Python
    Réponses: 1
    Dernier message: 29/10/2010, 13h45
  5. rich:jQuery et google chart
    Par Chatastroff dans le forum JSF
    Réponses: 1
    Dernier message: 05/02/2009, 20h10

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