RxGgCharts.pas

unit RxGgCharts;

interface

uses
  Classes, Dialogs, SysUtils,
  RaControlsVCL;

type
  TRxGgCharts = class(TRaExtendableControlGCD)
  public
    constructor Create(AOwner: TComponent); override;
  protected
    procedure RaDrawExtend(var AJavascript: String); override;
  published
    property Visible;
  end;

procedure Register;

implementation

uses
  RaCommon, main;

constructor TRxGgCharts.Create(AOwner: TComponent);
begin
  inherited;
  SetBounds(Left, Top, 300, 300);
end;

procedure TRxGgCharts.RaDrawExtend(var AJavascript: String);
begin
  AJavascript :=

    'var me=this;' +

    'me.onRender=function(){' +

      'me.getDOM().style.backgroundColor = "white";' +

      'me.r=me.require(["js","https://www.google.com/jsapi"],function(){' +

        'me.r=undefined;' +
        'me.d=setTimeout(function(){' +
          'me.d=undefined;' + #13#10 +

          // https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
          // http://stackoverflow.com/questions/9519673/why-does-google-load-cause-my-page-to-go-blank
          // https://groups.google.com/forum/?fromgroups#!topic/google-ajax-search-api/4HwmBkmAlOY

          'google.load("visualization", "1", {packages: ["corechart"], callback: function() {' + #13#10 +

            'var data = google.visualization.arrayToDataTable([' + #13#10 +
              '["Task",     "Hours per Day"],' + #13#10 +
              '["Work",     33],' + #13#10 +
              '["Eat",      2],' + #13#10 +
              '["Ngoding",  50],' + #13#10 +
              '["Nongkrong",  10],' + #13#10 +
              '["Commute",  2],' + #13#10 +
              '["Watch TV", 2],' + #13#10 +
              '["Sleep",    7]' + #13#10 +
                //ambil dari var script form main
                //FMain.script +
            ']);' + #13#10 +

            'var options = {' + #13#10 +
              'title: "My Daily Activities"' + #13#10 +
            '};' + #13#10 +

            'var chart = new google.visualization.PieChart(me.getDOM());' + #13#10 +
            'chart.draw(data, options);' + #13#10 +

          '}});' + #13#10 +

        '},0);' +
      '});' +
    '};' +

    'me.onUnrender=function(){' +
      'if(me.r){' +
        'me.dontRequire(me.r);' +
        'me.r=undefined;' +
      '};' +
      'if(me.d){' +
        'clearTimeout(me.d);' +
        'me.d=undefined;' +
      '};' +
    '};';
         ShowMessage(AJavascript);
end;

procedure Register;
begin
  RegisterComponents('Raudus X', [TRxGgCharts]);
end;

end.