Vignette Google Chart (portail)

Version du 2 juin 2014 à 13:04

Cette vignette affiche un graphique Google Chart à partir d'une source de données JSON.

Paramètres standards :

Paramètres spécifiques :

• Source de données (URI)

Adresse de la source de données retournant les données du graphique.

Une source de données de graphique est une structure du type :

{
   "chart":{
      "options":{
         "title":"Expenses",
         "pieSliceText":"value"
      },
      "cols":[
         {
            "name":"Status",
            "type":"string"
         },
         {
            "name":"Amount",
            "type":"number"
         }
      ],
      "rows":[
         [
            "Accepted",
            1000.0
         ],
         [
            "Rejected",
            300.0
         ]
      ]
   }
}   

• Adresse page locale HTML (src)

Adresse de la page contenant le code permettant d'incorporer le graphique.

La page fournit par défaut permet de gérer les types de graphique standards.

• Google chart options (options)

Structure JSON permettant de sélectionner les options du graphique

Les options sont la combinaison des options défini dans les propriétés de la vignette et des options retournées par la source de données.

Exemple :

Le code suivant génère les données JSON nécessaire au graphie Pie précédent :

Procedure services.chart(req:Tjson; var resp:TObject);
//Procedure chart(req:Tjson; var resp:TObject);
var json:TJson;
begin
  json := Tjson.Create('');
  resp := json;
  json.chart.options.title := 'Expenses';
  json.chart.options.pieSliceText := 'value';
  //
  json.chart.cols[0].name := 'Status';
  json.chart.cols[0].type := 'string';
  json.chart.cols[1].name := 'Amount';
  json.chart.cols[1].type := 'number';
  //
  json.chart.rows[0][0] := 'Accepted';
  json.chart.rows[0][1] := 1000.00;
  json.chart.rows[1][0] := 'Rejected';
  json.chart.rows[1][1] := 300.00;
end;

Voir aussi :

• Google Chart