TeeChart VCL export to Javascript

[WilliE]

Hello,
we use in a new project your JavaScript export from TeeChart VCL (http://steema.com/wp/blog/2021/08/09/te ... avascript/). This is working quit good.

But we have two questions. It seams there is no export of subtitles and the export of datetime in the JavaScript htm file is in UTC and not in local time like the datetime of the VCL Chart. How can we export datetimes in local time?

Your sincerely

Willi

[Yeray]

Hello Willi,

It seams there is no export of subtitles

This seems to work fine for me here. What TeeChart version are you using?

Code: Select all

procedure TForm1.SubtitleToHtml;
const fileName='test';
begin
  with Chart1 do
  begin
    View3D:=False;
    Legend.Hide;
    Gradient.Visible:=False;
    Color:=clWhite;
    Walls.Back.Gradient.Visible:=False;
    Walls.Back.Color:=clWhite;
    
    Title.Text.Text:='Chart title';
    Title.Font.Size:=20;
    SubTitle.Text.Text:='Chart subtitle';
    SubTitle.Font.Size:=15;
    
    with AddSeries(TBarSeries) do
    begin
      FillSampleValues;
      Marks.Hide;
    end;
  end;
  
  TeeSaveToHTML5File(Chart1, fileName+'.html');
  TeeGoToURL(Handle,fileName+'.html');
end;

subtitleJS.png (26.88 KiB) Viewed 12475 times

the export of datetime in the JavaScript htm file is in UTC and not in local time like the datetime of the VCL Chart. How can we export datetimes in local time?

I'm not able to reproduce this either. We may be doing something different. Here is what I'm doing:

Code: Select all

procedure TForm1.LocalDatetimeToHtml;
const fileName='test';
var i: Integer;
    tmp: TDateTime;
begin
  with Chart1 do
  begin
    View3D:=False;
    Legend.Hide;
    Gradient.Visible:=False;
    Color:=clWhite;
    Walls.Back.Gradient.Visible:=False;
    Walls.Back.Color:=clWhite;

    with AddSeries(TBarSeries) do
    begin
      XValues.DateTime:=True;
      FillSampleValues;
      Marks.Hide;
      tmp:=Now;

      for i:=0 to Count-1 do
      begin
        tmp:=IncHour(tmp,1);
        XValue[i]:=tmp
      end;
    end;
  end;
  
  TeeSaveToHTML5File(Chart1, fileName+'.html');
  TeeGoToURL(Handle,fileName+'.html');
end;

localDateTimeJS.png (28.16 KiB) Viewed 12477 times

Could you please arrange a simple example project we can run as-is to reproduce the problems here?
Thanks in advance.

[WilliE]

Hello
we do an export like in the second sample with our DBChart

Code: Select all

exporter:=TJavascriptExportFormat.Create;
exporter.SaveToFile(DBChart1,Path);

because we need the live chart


Willi

[WilliE]

We use TeeChart Pro VCL FMX 2021.33 with Delphi 10.4.2, date.format.js ver. 1.2.3 and teechart.js v2.5 July 2018
from "http://www.steema.com/files/public/teec ... latest/src"

Willi

[Yeray]

Hello Willi,

Indeed, both problems are reproducible with the Javascript export.
I've just added the subheader and subfooter at #2473, and I'll look at their export from VCL and at the datetime issue asap.

[Yeray]

Hello Willi,

I'll look at their export from VCL

Done at #2474

[Yeray]

Hello Willi,

I'll look at their export from VCL and at the datetime issue asap

I've started by improving the datetime format at #2476

[WilliE]

Hello Yeray,
what hat i to do to get better results? I don' see any improved source code.

Willi

[WilliE]

Hello Yeray ,
i have send you three files to clarify the problem.
First an export of the DBChart with correct time (Export Chart.bmp). Than the HTM Website with the JavaScript export of the whole DBChart ("KanalName H_Ga1Ga2.htm"). In that HTM file the last date value is "new Date(1635429928000)" e.g. this value divided by 86400000 and added to the datetime value of '1.1.19070' gives the almost correct datetime "28.10.2021 14:05:28". But i think the conversion through your file "date.format.js" is not correct. After conversion through date.format.js the date time is "28.10.2021 15:55" like in the file "Screen Shot HTM.png". That is a difference of about 1:50Hour that is too much. There is no difference in with web brower the HTM File ist open (Edge or Firefox)

By the way to open the HTM file you must have the files "date.format.js" and "teechart.js" from "http://www.steema.com/files/public/teec ... atest/src/" in the same folder as the HTM File.

Willi

[Yeray]

Hello Willi,

If you open the console while viewing that htm page, and you paste this code

Code: Select all

Chart1.series.items[0].data.x[Chart1.series.items[0].data.x.length-1]

You'll see the last x value in the series. For me it's "Thu Oct 28 2021 16:05:28 GMT+0200"
I believe the problem is in the export, so I opened #2478.
We are investigating it.

[Yeray]

Hello Willi,

I've just sent you the changes by mail.
Don't hesitate to let us know how it works for you.