Charts (jqm1000)

De Wiki1000
(Différences entre les versions)
(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... »)
 
 
(3 révisions intermédiaires par un utilisateur sont masquées)
Ligne 1 : Ligne 1 :
 
Ce support permet d'afficher des graphique Google chart dans une page de l'application.
 
Ce support permet d'afficher des graphique Google chart dans une page de l'application.
  
−
===Méthode===
+
===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.
 +
 
 
{|class="wikitable"
 
{|class="wikitable"
 
|-
 
|-
−
!Méthode
+
|chart
−
!Usage
+
|Structure ou tableau de structure
 
|-
 
|-
−
|$.mobApp.showChart(method, req, options)
+
|title
−
|Execute une requête et affiche un ou plusieurs graphique(s) en fonction de la réponse
+
|Titre du graphique
 
|-
 
|-
−
|$.mobApp.showAChart($elt, data)
+
|options
−
|Affiche un graphique
+
|Options Google du graphique.
 
|-
 
|-
−
|$.fn.bindChart(options)
+
|cols
−
|Rattache un gestionnaire d'évènement sur des éléments référençant un graphique
+
|Données du graphique (Colonnes)
 +
|-
 +
|rows
 +
|Données du graphique (Lignes)
 +
|-
 +
|details
 +
|Des éléments détails [[actions (jqm1000)|actions]] qui seront affichés sous le 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.
 
  
 
'''Exemple de structure JSON à retourner :'''
 
'''Exemple de structure JSON à retourner :'''
Ligne 97 : Ligne 101 :
 
     json.chart.rows[indx][1] := inst.aAmount;
 
     json.chart.rows[indx][1] := inst.aAmount;
 
   end;
 
   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;
 
end;
 
</source>
 
</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>
 +
 +
===Référence===
 +
{|class="wikitable"
 +
|-
 +
!Méthode
 +
!Usage
 +
|-
 +
|[[showChar (jqm10000)|$.mobApp.showChart(method, req, options)]]
 +
|Execute une requête et affiche un ou plusieurs graphique(s) en fonction de la réponse
 +
|}
  
 
[[Category:Mobiles]]
 
[[Category:Mobiles]]
 
[[Category:jqm1000.js]]
 
[[Category:jqm1000.js]]

Version actuelle en date du 7 avril 2014 à 16:06

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

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)
details Des éléments détails actions qui seront affichés sous le graphique.

Exemple de structure JSON à retourner : 

{
   "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
         ]
      ]
   }
}

Exemple de code générant un graphique : 

//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;

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

//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;

Référence

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
Récupérée de « https://frp.sage.fr/wiki1000/index.php?title=Charts_(jqm1000)&oldid=9437 »
Outils personnels