« Charts (jqm1000) » : différence entre les versions

De Wiki1000
(Page créée avec « Ce support permet d'afficher des graphique Google chart dans une page de l'application. ===Méthode=== {|class="wikitable" |- !Méthode !Usage |- |$.mobApp.showChart(meth... »)
 
Ligne 22 : Ligne 22 :


Elle peut retourner soit un graphique, soit un ensemble de graphique.
Elle peut retourner soit un graphique, soit un ensemble de graphique.
{|class="wikitable"
|-
|chart
|Structure ou tableau de structure
|-
|title
|Titre du graphique
|-
|options
|Options Google du graphique.
|-
|cols
|Données du graphique (Colonnes)
|-
|rows
|Données du graphique (Lignes)
|}


'''Exemple de structure JSON à retourner :'''
'''Exemple de structure JSON à retourner :'''

Version du 27 février 2014 à 13:58

Ce support permet d'afficher des graphique Google chart dans une page de l'application.

Méthode

Méthode Usage
$.mobApp.showChart(method, req, options) Execute une requête et affiche un ou plusieurs graphique(s) en fonction de la réponse
$.mobApp.showAChart($elt, data) Affiche un graphique
$.fn.bindChart(options) Rattache un gestionnaire d'évènement sur des éléments référençant un graphique

Format de requête

La requête doit retourner les données du graphique au format Google.

Elle peut retourner soit un graphique, soit un ensemble de graphique.

chart Structure ou tableau de structure
title Titre du graphique
options Options Google du graphique.
cols Données du graphique (Colonnes)
rows Données du graphique (Lignes)

Exemple de structure JSON à retourner :

<source lang="javascript"> {

  "chart":{
     "title":"Frais de Février (2014)",
     "options":{
        "pieSliceText":"value"
     },
     "cols":[
        {
           "name":"Statut",
           "type":"string"
        },
        {
           "name":"Montant",
           "type":"number"
        }
     ],
     "rows":[
        [
           "En attente1",
           2736.29
        ],
        [
           "Comptabilisées",
           385.56
        ],
        [
           "Refusées",
           1164.61
        ]
     ]
  }

} </source>

Exemple de code générant un graphique :

<source lang="delphi"> //Procedure getDashboard(req:TJson; var resp:TObject); Type

 ExpenseSumView = viewOf(TNoteFrais)
  aYear:Integer = year(nDate);
  aMonth:Integer = month(nDate);
  aAmount:Currency = sum(MontantRetenu);
  aUser:string = Salarie.Operateur.oidutilisateur;
  aStatus:Integer = Statut;
 end;

var json:TJson; ls:TSelector; inst:ExpenseSumView; indx,idc:Integer; begin

 json := TJson.Create();
 resp := json;
 //
 json.chart.title := Format(_TP('Frais de %s (%d)'),[NameOfMonth(ThisMonth),ThisYear]);
 json.chart.options.pieSliceText := 'value';
 json.chart.cols[0].name := _TP('Statut');
 json.chart.cols[0].type := 'string';
 json.chart.cols[1].name := _TP('Montant');
 json.chart.cols[1].type := 'number';
 //
 ls := ExpenseSumView.CreateSelector('(aUser=%1) and (aYear=%2) and (aMonth=%3)','-aYear,-aMonth',true,[GlbUserName,ThisYear,ThisMonth]);
 foreachP inst in ls.AsCursor index indx do
  begin
    case inst.aStatus of
     StatutNF_Valide       : json.chart.rows[indx][0] := _TP('Validées');
     StatutNF_Comptabilise : json.chart.rows[indx][0] := _TP('Comptabilisées');
     StatutNF_Regle        : json.chart.rows[indx][0] := _TP('Réglées');
     StatutNF_Refuse       : json.chart.rows[indx][0] := _TP('Refusées');
     else                    json.chart.rows[indx][0] := _TP('En attente')+inttostr(inst.aStatus);
    end;
    json.chart.rows[indx][1] := inst.aAmount;
  end;

end; </source>