« Charts (jqm1000) » : différence 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... ») |
|||
| 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>