Charts (jqm1000)

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;

 if not json.Exists('chart.rows') then
   begin
     // google don't like empty rows
     json.chart.rows[0][0] := _TP('Aucune note');
     json.chart.rows[0][1] := 1;
   end;

end; </source>

Exemple de code générant 3 graphiques avec prise en charge des couleurs:

<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,aMonth,aYear:Integer; begin

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

       case inst.aStatus of
        StatutNF_Valide       : json.chart[idc].rows[indx][2] := 'color:#FFFF66';
        StatutNF_Comptabilise : json.chart[idc].rows[indx][2] := 'color:#0066FF';
        StatutNF_Regle        : json.chart[idc].rows[indx][2] := 'color:#00FF66';
        StatutNF_Refuse       : json.chart[idc].rows[indx][2] := 'color:#FF3300';
        else                    json.chart[idc].rows[indx][2] := 'color:#FDFDF0';
       end;
     end;
    //
    if not json.Exists(Format('chart[%d].rows',[idc])) then
     begin
       // google don't like empty rows
       json.chart[idc].rows[0][0] := _TP('Aucune note');
       json.chart[idc].rows[0][1] := 1;
       json.chart[idc].rows[0][2] := 'color:#808080';
     end;
    //
    idc := idc+1;
    if aMonth=1 then
     begin
       aMonth := 12;
       aYear := aYear -1;
     end
     else
     begin
       aMonth := aMonth-1;
     end;
  end;

end; </source>