uses
  WEBLib.GoogleChart;

var
  it: TGoogleChartSerieItem;
begin
  WebGoogleChart1.BeginUpdate;

  WebGoogleChart1.Title := 'Browser Market Share';

  it := WebGoogleChart1.Series.Add;

  it.ChartType := gctPie;
  it.Title := 'September 2018';

  it.Values.AddPiePoint(60.3, 'Chrome');
  it.Values.AddPiePoint(13.1, 'Safari');
  // extract this pie out of the pie chart 
  it.Values.AddPiePoint(7.2, 'Firefox', 0.4);
  it.Values.AddPiePoint(6.7, 'IE/Edge');
  it.Values.AddPiePoint(3.1, 'Opera');
  it.Values.AddPiePoint(9.6, 'Other');
  WebGoogleChart1.EndUpdate;
end;

procedure TForm1.WebGoogleChart1Select(Sender: TObject;
  Event: TGoogleChartSelectEventArgs);
var
  chart: TWebGoogleChart;
begin
  chart := (Sender as TWebGoogleChart);

  lbSelect.Caption := chart.Series[Event.SerieIndex].Title + ' '
      + chart.Series[Event.SerieIndex].Values[Event.PointIndex].DataPoint.Title + ': '
      + FloatToStr(chart.Series[Event.SerieIndex].Values[Event.PointIndex].DataPoint.X) + '%';
end;

1. Tuesday, October 2, 2018 at 12:57:53 PM

Hi,

I am using Delphi from Delphi 1. I like object oriented language.
And always i worked with VCL.
I am looking for web for along times. And i can not like HTML and script.
Because it is not object oriented. There is no type or compiler that warn you what is wrong.
I hate that to work for web application.

But i think it is changed. Because i try to TMS Web Core trial and i saw that it is working.
You are on delphi and pascal and can use RTL. It is so comfortable.

And of course components that in your application is so important.
And Before i interested with Devextreme and i try somethings devextreme on TMS Web Core.
It is working, I did somethings and i like to share here.

Best Regards

unit dxButton;

interface

uses js, Web, LibJQuery, Classes, WebLib.Controls, Pi.Web.Controls.Base;

type

TdxCustomControl = class(TjQueryCustomControl)
protected
FInstance: TJSElement;
procedure InitControl; virtual;
public
constructor Create(AOwner: TComponent; AElementID: String); overload;
end;

TdxButton = class(TdxCustomControl)
private
FCaption: String;
FOnClick: TNotifyEvent;
procedure SetCaption(const Value: String);
protected
procedure InitControl; override;
procedure InitJQuery; override;
procedure UpdateElementVisual; override;

function HandleClick(Event: TEventListenerEvent): Boolean; virtual;
procedure BindEvents; override;
public
published
property Caption: String read FCaption write SetCaption;
property OnClick: TNotifyEvent read FOnClick write FOnClick;
end;

implementation

{ TdxCustomControl }

constructor TdxCustomControl.Create(AOwner: TComponent; AElementID: String);
begin
inherited Create(AOwner);
ElementID := AElementID;
InitControl;
end;

procedure TdxCustomControl.InitControl;
begin

end;

{ TdxButton }

procedure TdxButton.BindEvents;
begin
inherited;
Container.addEventListener(''OnClick'', @HandleDoClick);
end;

function TdxButton.HandleClick(Event: TEventListenerEvent): Boolean;
begin
Result := False;
if Assigned(FOnClick) then
begin
FOnClick(Self);
Result := True;
end;
end;

procedure TdxButton.InitControl;
begin
inherited;
HandleClick(nil);
FCaption := ''Button'';
end;

procedure TdxButton.InitJQuery;
var
//eh: TJSElement;
AName: String;
begin
inherited;
//eh := ElementHandle;
//eh := document.getElementById(ElementID);
AName := ''#'' + ElementID;

asm
var options = {
text: this.FCaption,
type: "default"
};
$(AName).dxButton(options);
this.FInstance = $(AName).dxButton("instance");
this.FInstance.option("onClick", rtl.createCallback(this, "HandleClick")); // working
//this.FInstance.option("onClick", this.HandleClick); // not working. this is not dxButton
end;
//this.FInstance = $(AName).dxButton("instance");
//this.FInstance.option("text", "perfect");
//this.FInstance = new dxButton(AName, options);
end;

procedure TdxButton.SetCaption(const Value: String);
begin
if FCaption = Value then
exit;
FCaption := Value;
UpdateElementVisual;
end;

procedure TdxButton.UpdateElementVisual;
begin
inherited;
if IsUpdating then
Exit;
if not Assigned(FInstance) then
Exit;
asm
this.FInstance.option("text", this.FCaption);
end;
end;

end.

Murat Ak

3. Wednesday, October 3, 2018 at 9:26:36 AM

+1 for DevExtreme

Ibrahim Ahmed A

4. Thursday, October 4, 2018 at 11:03:00 AM

Very easy and very good solution.

can it be published directly on the web server or do we have to do something?

Ralph Rangel

6. Friday, October 5, 2018 at 5:47:00 PM

Tms web é fantástico! Com ele é possível cortar toda curva de aprendizado de uma nova linguagem e utilizar o pascal para gerar arquivos HTML de maneira muito intuitiva e fácil!!!! Integrei tms web com google firebase e está algo fantástico! Recomendo a todos!

Edenir Martins

7. Friday, October 5, 2018 at 5:51:53 PM

Espetacular!!!!
Com o tms web é possível desenvolver de maneira RAD utilizando os recursos do delphi para WEB...
Fenomenal!

Edenir Martins

8. Saturday, October 13, 2018 at 1:34:21 AM

Unbelievable how easy it is to implement chart into TMS Web solution, extend our projeto toward the web is become one experience less scared.

I love delphi and i wanna continue to use delphi to solve all my customers problems, and nowadays there is one great need to integret all plataform, and the Embarcadeiro was working hard in order that we can developer seamlessly to windows, android, IOS, OSX and Linux, but WEB always missing and in my humble opinion no more need to be missing because TMS arrived to give us this great tool.

When be possible, i would like to know, how TMS Web work with Lazy Load Routes?

Thanks a lot!

Vieira Edson