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

Ext JS / Sencha Discussion :

Comment Utiliser Ext JS4


Sujet :

Ext JS / Sencha

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Juillet 2002
    Messages
    428
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2002
    Messages : 428
    Par défaut Comment Utiliser Ext JS4
    Bjr;

    je souhaite generer un graphe dont le code source JS est le suivant :

    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
     
    Ext.onReady(function () {
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
            data: [
                    {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
                    {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
                    {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
                    {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
                  ]
        });
     
        var panel1 = Ext.create('widget.panel', {
            width: 800,
            height: 400,
            title: 'Stacked Bar Chart - Movies by Genre',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: {
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['comedy', 'action', 'drama', 'thriller'],
                    title: false,
                    grid: true,
                    label: {
                        renderer: function(v) {
                            return String(v).replace(/000000$/, 'M');
                        }
                    },
                    roundToDecimal: false
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['year'],
                    title: false
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    gutter: 80,
                    xField: 'year',
                    yField: ['comedy', 'action', 'drama', 'thriller'],
                    stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 65,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item.value[1] / 1000000) + 'M');
                        }
                    }
                }]
            }
        });
    });
    Mon objectif est de remplacer les valeurs en dur par des valeurs que je récupérer de la base MySQL sous format json :

    {"item":[{"MOIS":"1","TYPE_PRODUIT":"LOGICIEL","CHIFFRE_AFFAIRES":"500"},{"MOIS":"1","TYPE_PRODUIT":"MATERIEL","CHIFFRE_AFFAIRES":"1600"},{"MOIS":"1","TYPE_PRODUIT":"SERVICE","CHIFFRE_AFFAIRES":"2290"},{"MOIS":"2","TYPE_PRODUIT":"LOGICIEL","CHIFFRE_AFFAIRES":"1400"},
    ...

    mois = c'est les années
    type_produit = type de film ('year', 'comedy', 'action', 'drama', 'thriller')
    chiffre_affaire = nbre d'entrées

    J'ai déjà commencé à faire une JS du style :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    Ext.onReady(function () {
       var store = new Ext.data.JsonStore({
        autoLoad: true,
        url : 'lp-graph-js.php', 
        root : 'item', 
        fields: [
            'MOIS', 
            'TYPE_PRODUIT',
            'CHIFFRE_AFFAIRE'],
    Merci de m'aider à allez jusqu'au bout.

  2. #2
    Membre éclairé
    Avatar de abraxis
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    439
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2007
    Messages : 439
    Par défaut
    N'ayant jamais fais de graph sous ExtJS je ne serais pas te guider mais as tu regardé les exemples ?
    http://docs.sencha.com/ext-js/4-0/#!/example
    dans la section "Charts"

Discussions similaires

  1. Réponses: 4
    Dernier message: 24/02/2009, 12h06
  2. Comment utiliser un cache ?
    Par TOM-Z dans le forum XMLRAD
    Réponses: 4
    Dernier message: 14/03/2003, 09h55
  3. comment utiliser actionscript ?
    Par webs dans le forum Flash
    Réponses: 3
    Dernier message: 09/02/2003, 23h11
  4. Comment utiliser OUT ?
    Par Bouziane Abderraouf dans le forum CORBA
    Réponses: 3
    Dernier message: 20/07/2002, 09h35
  5. Réponses: 5
    Dernier message: 11/06/2002, 15h21

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